:root {
  --hot-pink: #e6007a;
  --brown-grey: rgb(139, 139, 139);
  --black: rgb(0, 0, 0);
  --spruce-0: rgba(9, 86, 78, 0);
  --bs-body-bg: unset !important;
  --font-family: "Rubik", sans-serif;
}
::-webkit-scrollbar {
  width: 0.6rem;
  height: 0.4rem;
}
::-webkit-scrollbar-thumb {
  border-radius: 1rem;
  background-color: #a9a9a9;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
body {
  font-family: Rubik, sans-serif;
  /* background-color: #f5f6fa; */
}
@font-face {
  font-family: anomalia_bold;
  src: url(/public/fonts/anomalia/anomalia_bold.woff2);
  font-weight: 500-700;
  font-style: normal;
}

@font-face {
  font-family: anomalia_medium;
  src: url(/public/fonts/anomalia/anomalia_medium.woff2);
  font-weight: 100-400;
  font-style: normal;
}
@font-face {
  font-family: anomalia_demibold;
  src: url(/public/fonts/anomalia/anomalia_demibold.woff);
  font-weight: 100-400;
  font-style: normal;
}

* {
  box-sizing: border-box;
}
@media (orientation: landscape) and (min-width: 700px) and (max-width: 799px) {
  html {
    font-size: calc(8px + ((700px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 800px) and (max-width: 899px) {
  html {
    font-size: calc(8px + ((800px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 900px) and (max-width: 999px) {
  html {
    font-size: calc(8px + ((900px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 1000px) and (max-width: 1099px) {
  html {
    font-size: calc(8px + ((1000px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 1100px) and (max-width: 1199px) {
  html {
    font-size: calc(8px + ((1100px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 1200px) and (max-width: 1299px) {
  html {
    font-size: calc(8px + ((1200px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 1300px) and (max-width: 1399px) {
  html {
    font-size: calc(8px + ((1300px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 1400px) and (max-width: 1499px) {
  html {
    font-size: calc(8px + ((1400px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 1500px) and (max-width: 1599px) {
  html {
    font-size: calc(8px + ((1500px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 1600px) and (max-width: 1699px) {
  html {
    font-size: calc(8px + ((1600px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 1700px) and (max-width: 1799px) {
  html {
    font-size: calc(8px + ((1700px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 1800px) and (max-width: 1899px) {
  html {
    font-size: calc(8px + ((1800px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 1900px) and (max-width: 1999px) {
  html {
    font-size: calc(8px + ((1900px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 2000px) and (max-width: 2099px) {
  html {
    font-size: calc(8px + ((2000px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 2100px) and (max-width: 2199px) {
  html {
    font-size: calc(8px + ((2100px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 2200px) and (max-width: 2299px) {
  html {
    font-size: calc(8px + ((2200px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 2300px) and (max-width: 2399px) {
  html {
    font-size: calc(8px + ((2300px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 2400px) and (max-width: 2499px) {
  html {
    font-size: calc(8px + ((2400px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 2500px) and (max-width: 2599px) {
  html {
    font-size: calc(8px + ((2500px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 2600px) and (max-width: 2699px) {
  html {
    font-size: calc(8px + ((2600px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 2700px) and (max-width: 2799px) {
  html {
    font-size: calc(8px + ((2700px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 2800px) and (max-width: 2899px) {
  html {
    font-size: calc(8px + ((2800px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 2900px) and (max-width: 2999px) {
  html {
    font-size: calc(8px + ((2900px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 3000px) and (max-width: 3099px) {
  html {
    font-size: calc(8px + ((3000px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 3100px) and (max-width: 3199px) {
  html {
    font-size: calc(8px + ((3100px - 700px) / 200)) !important;
  }
}

@media (orientation: landscape) and (min-width: 3200px) and (max-width: 3299px) {
  html {
    font-size: calc(8px + ((3200px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 3300px) and (max-width: 3399px) {
  html {
    font-size: calc(8px + ((3300px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 3400px) and (max-width: 3499px) {
  html {
    font-size: calc(8px + ((3400px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 3500px) and (max-width: 3599px) {
  html {
    font-size: calc(8px + ((3500px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 3600px) and (max-width: 3699px) {
  html {
    font-size: calc(8px + ((3600px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 3700px) and (max-width: 3799px) {
  html {
    font-size: calc(8px + ((3700px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 3800px) and (max-width: 3899px) {
  html {
    font-size: calc(8px + ((3800px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 3900px) and (max-width: 3999px) {
  html {
    font-size: calc(8px + ((3900px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 4000px) and (max-width: 4099px) {
  html {
    font-size: calc(8px + ((4000px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 4100px) and (max-width: 4199px) {
  html {
    font-size: calc(8px + ((4100px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 4200px) and (max-width: 4299px) {
  html {
    font-size: calc(8px + ((4200px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 4300px) and (max-width: 4399px) {
  html {
    font-size: calc(8px + ((4300px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 4400px) and (max-width: 4499px) {
  html {
    font-size: calc(8px + ((4400px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 4500px) and (max-width: 4599px) {
  html {
    font-size: calc(8px + ((4500px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 4600px) and (max-width: 4699px) {
  html {
    font-size: calc(8px + ((4600px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 4700px) and (max-width: 4799px) {
  html {
    font-size: calc(8px + ((4700px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 4800px) and (max-width: 4899px) {
  html {
    font-size: calc(8px + ((4800px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 4900px) and (max-width: 4999px) {
  html {
    font-size: calc(8px + ((4900px - 700px) / 200)) !important;
  }
}
@media (orientation: landscape) and (min-width: 5000px) and (max-width: 5099px) {
  html {
    font-size: calc(8px + ((5000px - 700px) / 200)) !important;
  }
}
@media (orientation: portrait) and (min-height: 100px) and (max-height: 199px) {
  html {
    font-size: calc(11px + ((100px - 100px) / 100)) !important;
  }
}
@media (orientation: portrait) and (min-height: 200px) and (max-height: 299px) {
  html {
    font-size: calc(11px + ((200px - 100px) / 100)) !important;
  }
}
@media (orientation: portrait) and (min-height: 300px) and (max-height: 399px) {
  html {
    font-size: calc(11px + ((300px - 100px) / 100)) !important;
  }
}
@media (orientation: portrait) and (min-height: 400px) and (max-height: 499px) {
  html {
    font-size: calc(11px + ((400px - 100px) / 100)) !important;
  }
}
@media (orientation: portrait) and (min-height: 500px) and (max-height: 599px) {
  html {
    font-size: calc(11px + ((500px - 100px) / 100)) !important;
  }
}
@media (orientation: portrait) and (min-height: 600px) and (max-height: 699px) {
  html {
    font-size: calc(11px + ((600px - 100px) / 100)) !important;
  }
}
@media (orientation: portrait) and (min-height: 700px) and (max-height: 799px) {
  html {
    font-size: calc(11px + ((700px - 100px) / 100)) !important;
  }
}
@media (orientation: portrait) and (min-height: 800px) and (max-height: 899px) {
  html {
    font-size: calc(11px + ((800px - 100px) / 100)) !important;
  }
}
@media (orientation: portrait) and (min-height: 900px) and (max-height: 999px) {
  html {
    font-size: calc(11px + ((900px - 100px) / 100)) !important;
  }
}
@media (orientation: portrait) and (min-height: 1000px) and (max-height: 1099px) {
  html {
    font-size: calc(11px + ((1000px - 100px) / 100)) !important;
  }
}
.disable_class {
  pointer-events: none !important;
  opacity: 0.5 !important;
  color: grey !important;
}

/* html {
  font-size: clamp(8px, 1vw, 16px);
}

@media (orientation: landscape) {
  html {
    font-size: calc(8px + (100vw - 1000px) / 100);
  }
}

@media (orientation: portrait) {
  html {
    font-size: calc(14px + (100vh - 100px) / 200);
  }
} */