:root {
  /* color */
  --main: #A1D66B;
  --main-tint-8: #BCEB8D;
  --main-tint-30: #DFF5C9;
  --black-tint-14: #242424;
  --black-tint-35: #595959;
  --white: #FFFFFF;
  --white-shade-5: #F2F2F2;
  --white-shade-8: #EBEBEB;
  --white-shade-12: #E0E0E0;

  /* font family */
  --f-rr: 'Rubik-Regular', sans-serif;
  --f-rm: 'Rubik-Medium', sans-serif;
  /* --f-sr: 'STIXTwoText-Regular', sans-serif; */

  /* font size */
  --fs-64-32: clamp(2rem, 1.0909rem + 3.2323vw, 4rem);
  --fs-40-24: clamp(1.5rem, 1.0455rem + 1.6162vw, 2.5rem);
  --fs-18-16: clamp(1rem, 0.9432rem + 0.202vw, 1.125rem);
  --fs-16: 1rem;
  --fs-14: 0.875rem;

  /* letter spacing */
  --neg-4: calc(-1 * 0.04);
  --neg-3: calc(-1 * 0.03);
  --neg-2: calc(-1 * 0.02);
  --neg-1: calc(-1 * 0.01);
  --zero: 0;

  /* line height */
  --lh-150: 1.5;
  --lh-120: 1.2;
  --lh-110: 1.1;
  --lh-100: 1;

  /* space */
  --sp-1440: 90rem;
  --sp-950: 59.375rem;
  --sp-913: 57.0625rem;
  --sp-800: 50rem;
  --sp-680: 42.5rem;
  --sp-447: 27.9375rem;
  --sp-440: 27.5rem;
  --sp-330: 20.625rem;
  --sp-300: 18.75rem;
  --sp-264: 16.5rem;
  --sp-256-160: clamp(10rem, 7.2727rem + 9.697vw, 16rem);
  --sp-250: 15.625rem;
  --sp-213: 13.3125rem;
  --sp-200: 12.5rem;
  --sp-128: 8rem;
  --sp-120-40: clamp(2.5rem, 0.2273rem + 8.0808vw, 7.5rem);
  --sp-120: 7.5rem;
  --sp-100-0: clamp(0rem, -2.8409rem + 10.101vw, 6.25rem);
  --sp-100: 6.25rem;
  --sp-96: 6rem;
  --sp-80-40: clamp(2.5rem, 1.3636rem + 4.0404vw, 5rem);
  --sp-80: 5rem;
  --sp-72: 4.5rem;
  --sp-64: 4rem;
  --sp-60-40: clamp(2.5rem, 1.9318rem + 2.0202vw, 3.75rem);
  --sp-60: 3.75rem;
  --sp-48: 3rem;
  --sp-44-32: clamp(2rem, 1.6591rem + 1.2121vw, 2.75rem);
  --sp-44: 2.75rem;
  --sp-40-20: clamp(1.25rem, 0.6818rem + 2.0202vw, 2.5rem);
  --sp-40: 2.5rem;
  --sp-32: 2rem;
  --sp-30-16: clamp(1rem, 0.6023rem + 1.4141vw, 1.875rem);
  --sp-30: 1.875rem;
  --sp-24: 1.5rem;
  --sp-20: 1.25rem;
  --sp-16: 1rem;
  --sp-14: 0.875rem;
  --sp-12: 0.75rem;
  --sp-10-60: clamp(0.625rem, 5.1705rem + -5.0505vw, 3.75rem);
  --sp-10: 0.625rem;
  --sp-8: 0.5rem;
  --sp-4: 0.25rem;
  --sp-2: 0.125rem;
  --sp-1: 0.0625rem;

  /* style */
  --border: var(--sp-1) solid var(--white-shade-8);

  /* animation */
  --anime-time: 0.3s;
  --anime-func: ease-in-out;
}
@font-face {
  font-family: 'Rubik-Regular';
  src: url('/assets/fonts/Rubik-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Rubik-Medium';
  src: url('/assets/fonts/Rubik-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'STIXTwoText-Regular';
  src: url('/assets/fonts/STIXTwoText-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
* {
  &::selection {
    background-color: var(--white-shade-8);
    color: var(--black-tint-14);
  }

  &:not(html, body) {
    /* Firefox */
    scrollbar-width: none;

    /* hide windows edge scroll bar arrow */
    -ms-overflow-style: none;

    /* hide scroll bar on Chrome, Safari, Opera */
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
body {
  color: var(--black-tint-14);
}
section:has(inner-wrapper) {
  padding-inline: var(--sp-30-16);
}
inner-wrapper {
  display: block;
  margin-inline: auto;
  padding-block: var(--sp-120-40);
  max-width: var(--sp-1440);
}
box-wrapper {
  display: block;
  max-width: var(--sp-447);
  margin-inline: auto;
}
img {
  width: 100%;
}
h2 {
  margin-block-end: var(--sp-60-40);
  text-transform: uppercase;
}
summary::marker {
  display: none; /* Hides the default marker */
}
summary {
  list-style: none; /* Removes the default bullet/marker style */
  cursor: pointer;
}
summary::-webkit-details-marker {
  display: none; /* Hides the default marker in WebKit browsers */
}
h1 {
  view-transition-name: heading-1;
}
.hero inner-wrapper {
  padding-block-end: 0;
}