mue/src/scss/index.scss

@import 'variables';
@import 'toast';

body {
  background: #000;
  margin: 0;
  overflow: hidden;
}

* {
  font-family: 'Lexend Deca', Montserrat, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  outline: none;
}

#center {
  font-size: calc(10px + 2vmin);
  text-align: center;
  position: absolute;
  inset: 0;
  text-shadow: 0 0 25px rgb(0 0 0 / 30%);
  display: grid;
  place-items: center;
  margin: 0;

  #widgets {
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }

  &.no-textBorder {
    text-shadow: none !important;

    .quote {
      text-shadow: none !important;
    }
  }
}

::placeholder {
  @include themed {
    color: t($color);
  }

  opacity: 1;
}

::selection {
  background-color: #c2c2c2;
}

#root {
  @include themed {
    color: t($color);
  }
}

/* accessibility */
.textBorder {
  filter: drop-shadow(var(--shadow-shift) var(--shadow-shift) 0 #111c);
}

.no-animations {
  .ReactModal__Content,
  button,
  svg,
  input[type='text'],
  .MuiSwitch-switchBase,
  .tooltipTitle,
  .quicklinks-container img {
    transition: none !important;
  }
}

.frame {
  width: 100%;
  height: 100%;
}

/* fonts (imported from fontsource) */
// i don't even know what the unicode-range is for, but we're keeping it so that nothing breaks
@font-face {
  font-family: 'Lexend Deca';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../../node_modules/@fontsource/lexend-deca/files/lexend-deca-latin-400-normal.woff2')
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Lexend Deca';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../../node_modules/@fontsource/lexend-deca/files/lexend-deca-latin-ext-400-normal.woff2')
    format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../../node_modules/@fontsource/montserrat/files/montserrat-cyrillic-400-normal.woff2')
    format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* error */
.criticalError {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;

  .criticalError-actions {
    display: flex;
    flex-flow: row;
    gap: 20px;
  }

  button,
  a {
    border: 0;
    border-radius: 12px;
    padding: 10px 30px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    flex-flow: row;
    justify-content: center;
    gap: 20px;
    transition: 0.5s;
    cursor: pointer;
    text-decoration: none;
  }
}

/* light theme critical error */
@media (prefers-color-scheme: dark) {
  /** {
    background-color: #000000 !important;
  } */

  .criticalError {
    .criticalError-message {
      color: #fff;
    }

    p {
      color: rgb(255 255 255 / 75.3%);
    }

    a {
      background: #0e1013;
      box-shadow: 0 0 0 1px #484848;
      color: #fff;

      &:hover {
        background: #1e1e1e;
      }
    }
  }
}

@media (prefers-color-scheme: light) {
  * {
    background-color: #fff !important;
  }

  .criticalError {
    .criticalError-message {
      color: #000;
    }

    p {
      color: rgb(0 0 0 / 75.3%);
    }

    a {
      background: #fdfdfd;
      box-shadow: 0 0 0 1px #484848;
      color: #000;

      &:hover {
        background: #f5f5f5;
      }
    }
  }
}