:root {
  --font-size-xxl: 14px;
  /* >1920px */
  --font-size-xl: 12px;
  /* 1681px-1920px */
  --font-size-lg: 10.25px;
  /* 1601px-1680px */
  --font-size-md: 10px;
  /* 1441px-1600px */
  --font-size-sm: 9px;
  /* 1367px-1440px */
  --font-size-xs: 8.5px;
  /* 1281px-1366px */
  --font-size-xxs: 8px;
  /* 1153px-1280px */
  --font-size-tiny: 7px;
  /* 1025px-1152px */
  --font-size-small: 6.5px;
  /* 801px-1024px */
  --font-size-mobile: 5px;
  /* <=800px */

  --font-size-touch-xxl: 10px;
  /* >2560px */
  --font-size-touch-xl: 8px;
  /* 1441px-2560px */
  --font-size-touch-lg: 7px;
  /* 1025px-1440px */
  --font-size-touch-md: 6.5px;
  /* 769px-1024px */
  --font-size-touch-sm: 6px;
  /* 426px-768px */
  --font-size-touch-xs: 5.5px;
  /* 376px-425px */
  --font-size-touch-xxs: 5px;
  /* 321px-375px */
  --font-size-touch-tiny: 4.2px;
  /* <=320px */
}

@media (pointer: fine) {
  html {
    font-size: var(--font-size-mobile);
  }

  @media (min-width: 801px) {
    html {
      font-size: var(--font-size-small);
    }
  }

  @media (min-width: 1025px) {
    html {
      font-size: var(--font-size-tiny);
    }
  }

  @media (min-width: 1153px) {
    html {
      font-size: var(--font-size-xxs);
    }
  }

  @media (min-width: 1281px) {
    html {
      font-size: var(--font-size-xs);
    }
  }

  @media (min-width: 1367px) {
    html {
      font-size: var(--font-size-sm);
    }
  }

  @media (min-width: 1441px) {
    html {
      font-size: var(--font-size-md);
    }
  }

  @media (min-width: 1601px) {
    html {
      font-size: var(--font-size-lg);
    }
  }

  @media (min-width: 1681px) {
    html {
      font-size: var(--font-size-xl);
    }
  }

  @media (min-width: 1921px) {
    html {
      font-size: var(--font-size-xxl);
    }
  }
}

@media (pointer: coarse) {
  html {
    font-size: var(--font-size-touch-tiny);
  }

  @media (min-width: 321px) {
    html {
      font-size: var(--font-size-touch-xxs);
    }
  }

  @media (min-width: 376px) {
    html {
      font-size: var(--font-size-touch-xs);
    }
  }

  @media (min-width: 426px) {
    html {
      font-size: var(--font-size-touch-sm);
    }
  }

  @media (min-width: 769px) {
    html {
      font-size: var(--font-size-touch-md);
    }
  }

  @media (min-width: 1025px) {
    html {
      font-size: var(--font-size-touch-lg);
    }
  }

  @media (min-width: 1441px) {
    html {
      font-size: var(--font-size-touch-xl);
    }
  }

  @media (min-width: 2561px) {
    html {
      font-size: var(--font-size-touch-xxl);
    }
  }
}

@media (orientation:landscape) and (pointer:coarse) {
  body {
    width: 100vw;
    height: 100vh;
    color: var(--cliC-r1);
    font-size: 3rem;
    background-image: var(--cliG-t1);
    overflow: hidden;
  }

  body::after {
    content: "Rotate your device to portrait mode.";
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Electroharmonix";
    text-align: center;
    position: absolute;
    top: 0px;
    left: 0px;
  }

  body div {
    display: none !important;
  }
}

.hidden {
  display: none !important;
}