@import "https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Instrument+Serif:ital@0;1&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&family=Strichpunkt+Sans:wght@400..900&display=swap";

/* css/theme.css */
:root {
  --background-light: #ffffff;
  --background-light-translucent: rgb(255 255 255 / 0.3);
  --surface-light: #ffffff;
  --surface-light-alt: #d3d3d3;
  --surface-light-translucent: rgb(211 211 211 / 0.3);
  --text-primary-light: #232323;
  --text-secondary-light: #555555;
  --background-dark: #4c4c4c;
  --background-dark-translucent: rgb(39 39 39 / 0.3);
  --surface-dark: #8a8a8a;
  --surface-dark-alt: #424242;
  --surface-dark-translucent: rgb(66 66 66 / 0.3);
  --text-primary-dark: #eaeaea;
  --text-secondary-dark: #dfdfdf;
  --accent: #e87633;
}
:root {
  --background: var(--background-light);
  --background-translucent: var(--background-light-translucent);
  --surface: var(--surface-light);
  --surface-alt: var(--surface-light-alt);
  --surface-translucent: var(--surface-light-translucent);
  --text-primary: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --text-inverted: var(--background-light);
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--background-dark);
    --background-translucent: var(--background-dark-translucent);
    --surface: var(--surface-dark);
    --surface-alt: var(--surface-dark-alt);
    --surface-translucent: var(--surface-dark-translucent);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --text-inverted: var(--background-dark);
  }
}
:root {
  --max-content-width: 1080px;
  --max-article-width: 940px;
  --dim-small: 8px;
  --dim-medium: 16px;
  --dim-large: 24px;
  --dim-x-large: 48px;
  --dim-xx-large: 96px;
  --thumb-size: 48px;
  --dim-logo-max-height: 85px;
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-major: 36px;
}
:root {
  --font-family:
    "Manrope",
    "Inter",
    sans-serif;
  --font-fancy: "Instrument Serif", serif;
  --font-icon: "";
  --shadow-small: 0 0 12px rgba(0, 0, 0, 0.25);
}

/* css/product-page.css */
#root {
  background-image: url("../background-ELCPDXJS.svg"), url("../splash-Q6DEZJ7F.svg");
  background-repeat: repeat, repeat-y;
  background-position: center, top right;
  background-size: 128px, cover;
}
.slide-in {
  animation: slide-in 1s ease-out;
  animation-fill-mode: forwards;
}
#main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  grid-column: 2;
  grid-row-start: 2;
  grid-row-gap: var(--dim-xx-large);
}
#hero,
.hero {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  :first-child {
    grid-column: 1;
  }
  :last-child {
    grid-column: 2;
  }
}
.action-buttons {
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: center;
  display: flex;
  justify-content: center;
  gap: var(--dim-large);
}
#hero,
.hero,
.action-buttons {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-fancy), cursive;
    font-size: 5em;
  }
  button {
    font-size: 1.5em;
  }
}
@media (max-width: 738px) {
  #root :is(h1, h2, h3, h4, h5, h6) {
    font-size: 2em;
  }
  #root .hero {
    grid-row: span 2;
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    :first-child {
      grid-column: 1;
      grid-row: 1;
      width: 100%;
    }
    :last-child {
      grid-column: 1;
      grid-row: 2;
      width: 100%;
    }
  }
}