:root {
  --primary-100: #0080FF;
  --secondary-05: #F2F9FF;
  --secondary-20: #CCE6FF;
  --secondary-40: #BCDEFF;
  --secondary-gray-05: #f9f9fa;
  --secondary-gray-10: #f3f4f5;
  --secondary-gray-20: #e6e8eb;
  --secondary-gray-40: #cdd2d6;
  --secondary-gray-60: #b4bbc2;
  --secondary-gray-80: #9ba5ad;
  --secondary-gray-100: #828e99;
  --secondary-yellow-05: #fffbf2;
  --secondary-yellow-20: #fef3d9;
  --secondary-yellow-100: #f9b000;
  --secondary-green-05: #f5fcf5;
  --secondary-green-20: #d6f2d6;
  --secondary-green-100: #30bf30;
  --secondary-red-05: #fef5f5;
  --secondary-red-20: #fcd6d6;
  --secondary-red-100: #f23030;
  --secondary-purple-05: #f8f6ff;
  --secondary-purple-20: #e1dbff;
  --secondary-purple-100: #6a4dff;
  --additional-pink-05: #fef6fc;
  --additional-pink-20: #fcdcf1;
  --additional-pink-100: #f050ba;
  --additional-turquoise-05: #f6fcfe;
  --additional-turquoise-20: #dcf4fc;
  --additional-turquoise-100: #50c8f0;
}

body {
  -webkit-font-smoothing: auto;
}

html {
  font-size: 23px;
}

@media only screen and (max-width: 2700px) {
  html {
    font-size: 22.5px;
  }
}
@media only screen and (max-width: 2640px) {
  html {
    font-size: 22px;
  }
}
@media only screen and (max-width: 2580px) {
  html {
    font-size: 21.5px;
  }
}
@media only screen and (max-width: 2520px) {
  html {
    font-size: 21px;
  }
}
@media only screen and (max-width: 2460px) {
  html {
    font-size: 20.5px;
  }
}
@media only screen and (max-width: 2400px) {
  html {
    font-size: 20px;
  }
}
@media only screen and (max-width: 2340px) {
  html {
    font-size: 19.5px;
  }
}
@media only screen and (max-width: 2280px) {
  html {
    font-size: 19px;
  }
}
@media only screen and (max-width: 2220px) {
  html {
    font-size: 18.5px;
  }
}
@media only screen and (max-width: 2160px) {
  html {
    font-size: 18px;
  }
}
@media only screen and (max-width: 2100px) {
  html {
    font-size: 17.5px;
  }
}
@media only screen and (max-width: 2040px) {
  html {
    font-size: 17px;
  }
}
@media only screen and (max-width: 1980px) {
  html {
    font-size: 16.5px;
  }
}
@media only screen and (max-width: 1920px) {
  html {
    font-size: 16px;
  }
}
@media only screen and (max-width: 1860px) {
  html {
    font-size: 15.5px;
  }
}
@media only screen and (max-width: 1800px) {
  html {
    font-size: 15px;
  }
}
@media only screen and (max-width: 1740px) {
  html {
    font-size: 14.5px;
  }
}
@media only screen and (max-width: 1680px) {
  html {
    font-size: 14px;
  }
}
@media only screen and (max-width: 1620px) {
  html {
    font-size: 13.5px;
  }
}
@media only screen and (max-width: 1560px) {
  html {
    font-size: 13px;
  }
}
@media only screen and (max-width: 1500px) {
  html {
    font-size: 12.5px;
  }
}
@media only screen and (max-width: 1440px) {
  html {
    font-size: 12px;
  }
}
@media only screen and (max-width: 1380px) {
  html {
    font-size: 11.5px;
  }
}
@media only screen and (max-width: 1320px) {
  html {
    font-size: 11px;
  }
}
@media only screen and (max-width: 1260px) {
  html {
    font-size: 10.5px;
  }
}
@media only screen and (max-width: 1200px) {
  html {
    font-size: 10px;
  }
}
@media only screen and (max-width: 1140px) {
  html {
    font-size: 9.5px;
  }
}
@media only screen and (max-width: 1080px) {
  html {
    font-size: 9px;
  }
}
body {
  background-color: #f5f5f5;
  min-height: 100vh;
  overflow: hidden;
}
body * {
  scrollbar-color: #b7d8ff transparent;
  scrollbar-width: thin;
  /* Track */
  /* Handle */
  /* Handle on hover */
}
body *::-webkit-scrollbar {
  width: 0.875rem;
}
body *::-webkit-scrollbar-track {
  background: transparent;
}
body *::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  border: 0.125rem solid transparent;
  background-clip: content-box;
  background-color: #b7d8ff;
}
body *::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-100);
}