@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Inter:wght@100..900&family=Manrope:wght@200..800&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap");

html,
body {
  max-width: 100%;
}

:root {
  --library-fit-scale: 0.86;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

@media (max-width: 820px) {
  html,
  body {
    overflow-x: hidden;
  }

  body.library-mobile-fix {
    width: 100vw;
    max-width: 100vw;
    overflow-x: clip;
    position: relative;
  }

  body.library-mobile-fix #root {
    width: 100vw;
    max-width: 100vw;
    overflow-x: clip;
  }

  body.library-mobile-fix:not(.library-mobile-fix--geo):not(.library-mobile-fix--cards) #root,
  body.library-mobile-fix--cards .wrap {
    zoom: var(--library-fit-scale);
    width: calc(100% / var(--library-fit-scale));
    margin: 0 auto;
  }

  body.library-mobile-fix--grade10 #root {
    zoom: 0.72;
    width: calc(100% / 0.72);
    margin: 0 auto;
  }

  body.library-mobile-fix .max-w-6xl,
  body.library-mobile-fix .max-w-4xl,
  body.library-mobile-fix .max-w-3xl {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  body.library-mobile-fix .max-w-6xl.mx-auto.p-4,
  body.library-mobile-fix .max-w-4xl.mx-auto.p-4,
  body.library-mobile-fix .max-w-3xl.mx-auto.p-4 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  body.library-mobile-fix .fixed.bottom-6.right-6,
  body.library-mobile-fix .fixed.top-4.right-4.z-50 {
    right: 10px !important;
  }

  body.library-mobile-fix--geo {
    width: 100vw;
    max-width: 100vw;
    overflow-x: clip;
    zoom: 0.86;
  }

  body.library-mobile-fix--geo .grid,
  body.library-mobile-fix--geo .modal,
  body.library-mobile-fix--geo .modal-body,
  body.library-mobile-fix--geo .unit-header,
  body.library-mobile-fix--geo .progress-bar-wrap {
    max-width: 100%;
  }

  body.library-mobile-fix--cards {
    width: 100vw;
    max-width: 100vw;
    overflow-x: clip;
  }

  body.library-mobile-fix--cards .wrap {
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }

  body.library-mobile-fix .p-6,
  body.library-mobile-fix .p-5,
  body.library-mobile-fix .p-4 {
    padding: 10px !important;
  }

  body.library-mobile-fix .gap-6,
  body.library-mobile-fix .gap-5,
  body.library-mobile-fix .gap-4 {
    gap: 10px !important;
  }

  body.library-mobile-fix .text-4xl,
  body.library-mobile-fix .text-3xl {
    font-size: 1.12rem !important;
    line-height: 1.08 !important;
  }

  body.library-mobile-fix .text-2xl,
  body.library-mobile-fix .text-xl {
    font-size: 0.92rem !important;
    line-height: 1.12 !important;
  }

  body.library-mobile-fix .text-lg,
  body.library-mobile-fix .text-base,
  body.library-mobile-fix .text-sm {
    font-size: 0.76rem !important;
    line-height: 1.34 !important;
  }

  body.library-mobile-fix .rounded-3xl,
  body.library-mobile-fix .rounded-2xl,
  body.library-mobile-fix .rounded-xl {
    border-radius: 14px !important;
  }

  body.library-mobile-fix .h-64,
  body.library-mobile-fix .h-56,
  body.library-mobile-fix .h-48 {
    height: 7rem !important;
  }
}

@media (max-width: 680px) {
  :root {
    --library-fit-scale: 0.8;
  }

  body.library-mobile-fix--grade10 #root {
    zoom: 0.66;
    width: calc(100% / 0.66);
  }

  body.library-mobile-fix--geo {
    zoom: 0.82;
  }
}