html {
  width: 100%;
  height: 100svh;
  -ms-overflow-style: none;
  scrollbar-width: none;
  background-image: url(/web_res/main.png);
  background-size: cover;
  background-attachment: fixed;
}

body {
  width: 100%;
  min-height: calc(100dvh + 0px);
  -webkit-tap-highlight-color: transparent;
  font-family: "Roboto";
  font-size: 16px;
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
}

html::-webkit-scrollbar {
  display: none;
}

@font-face {
  font-display: swap;
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 100 700;
  src: local("Pacifico Regular"), url("/web_res/main.woff2") format("woff2");
}

.cross {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M0 99 L99 0 L100 1 L1 100' stroke-width='4' /></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%, auto;
  fill: #ff46c066;
}

.hideScroll::-webkit-scrollbar {
  display: none;
}

.hideScroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.notistack-MuiContent {
  border-radius: 15px !important;
  display: flex;
  justify-content: center !important;
  align-items: center !important;
}

@font-face {
  font-family: mainFont;
  src: url(/web_res/Facon.otf);
}

.module-border-wrap {
  display: flex;
  flex-direction: column;
  margin-left: 6px;
  margin-right: 6px;
  border-radius: 20px;
  position: relative;
  color: #fff;
  box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
    0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.ghost {
  position: absolute;
  pointer-events: none;

  inset: 0;
  border-radius: 20px;
}

.notistack-MuiContent {
  background-color: #1cffb3 !important;
  color: #000;
}

#notistack-snackbar {
  color: #000;
  font-family: "Jura", sans-serif;
  font-size: 30px;
}

.stack-top-for-line {
  /* adjust the below to control the shape */
  --d: 8px;
  --g: 25px;
  --c: #ffd700;
  /**/

  position: absolute;
  top: 0;
  right: 0;
  transform: translate(30%, -100%) rotate(45deg);
  color: #000;
  text-align: center;
  width: 100px;
  transform-origin: bottom left;
  padding: 5px 0 calc(var(--d) + 5px);
  background: linear-gradient(
        135deg,
        transparent var(--g),
        var(--c) calc(var(--g) - 0.3px)
      )
      left,
    linear-gradient(
        -135deg,
        transparent var(--g),
        var(--c) calc(var(--g) - 0.3px)
      )
      right;
  background-size: 51% 100%;
  background-repeat: no-repeat;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(100% - var(--d)) calc(100% - var(--d)),
    var(--d) calc(100% - var(--d)),
    0 100%
  );
}

.gradient-border {
  --border-width: 3px;

  border-radius: var(--border-width);

  &::after {
    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width) * 2);
    height: calc(100% + var(--border-width) * 2);
    background: linear-gradient(
      60deg,
      hsl(224, 85%, 66%),
      hsl(269, 85%, 66%),
      hsl(314, 85%, 66%),
      hsl(359, 85%, 66%),
      hsl(44, 85%, 66%),
      hsl(89, 85%, 66%),
      hsl(134, 85%, 66%),
      hsl(179, 85%, 66%)
    );
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: calc(2 * var(--border-width));
    animation: moveGradient 4s alternate infinite;
  }
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}