* {
  margin: 0;
  box-sizing: border-box;
}

:root {
  --text-padding: 4vw;
  --text-size: 1.8vw;
  --text-size-large: 1.8em; /* as multiplier on base size */

  --color-dark: #1d1e1f;
  --color-light: #fff;
  --color-medium: #eceff2;
  --color-medium-2: #bbc5cf;
  --color-medium-3: #505254;

  --color-text: var(--color-dark);
  --color-background: var(--color-light);

  --gradient-candy: radial-gradient(
    farthest-corner circle at 100% 50% in oklab,
    oklch(60% 0.5 0) 0%,
    oklch(80% 0.5 325) 100%
  );
  --gradient-honeycomb: linear-gradient(
    to bottom right in oklab,
    oklch(95% 0.5 110) 0%,
    oklch(72% 0.5 90) 100%
  );
  --gradient-ice: conic-gradient(
    from 0deg at 0% 0% in oklch,
    oklch(75% 0.5 156) 0%,
    oklch(70% 0.5 261) 100%
  );
  --gradient-midnight: radial-gradient(
    farthest-corner circle at 100% 0% in oklab,
    oklch(80% 0.4 222) 0%,
    oklch(35% 0.5 313) 100%
  );
  --gradient-lawn: linear-gradient(
    to top left in oklab,
    oklch(0.71 0.3 144.45) 0%,
    oklch(0.88 0.27 147.37) 100%
  );
  --gradient-peaches: linear-gradient(
    to bottom left in oklab,
    oklch(55% 0.45 350) 0%,
    oklch(95% 0.4 95) 100%
  );
  --gradient-lime: linear-gradient(
    to top left in oklab,
    oklch(95% 0.5 153) 0%,
    oklch(72% 0.5 182) 100%
  );
  --gradient-sun: linear-gradient(
    204deg in oklab,
    oklch(55% 0.45 350) 2% 2%,
    oklch(95% 0.4 95) 98% 98%
  );

  font-family: 'InterVariable', sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: var(--text-size);
  color: var(--color-text);
}

@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./assets/webfonts/InterVariable-subset.woff2') format('woff2');
}

body {
  min-height: 100vh;
  background-color: var(--color-medium-3);
}

body,
.slides,
.slide {
  display: grid;
}

/* Text */

a {
  color: currentColor;
}

.h1 {
  font-weight: 800;
  font-size: 10vw;
  line-height: 1em;
  letter-spacing: -0.02em;
  max-width: 10ch;
}

.h2 {
  font-weight: 800;
  font-size: 6vw;
  line-height: 1.2em;
  letter-spacing: -0.01em;
  max-width: 20ch;
}

.h3 {
  font-weight: 600;
  font-size: 2vw;
  line-height: 1.2em;
}

p {
  line-height: 1.4em;
}

.h1 + p {
  padding-block-start: 2em;
}

.h2 + p,
.h3 + p,
.h3 + .list {
  padding-block-start: 1em;
}

p + p {
  padding-block-start: 1em;
}

p + .h1,
p + .h2,
p + .h3 {
  padding-block-start: 1em;
}

.large-text {
  font-size: var(--text-size-large);
}

.list {
  list-style-type: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

.list li {
  padding: 0.2em 0;
}

.list--large {
  font-size: var(--text-size-large);
}

.list--ordered {
  font-size: 1em;
  counter-reset: list-counter;
  text-align: start;
}

.list--ordered li {
  padding: 0.5em 0;
  display: flex;
  gap: 1em;
  align-items: baseline;
}

.list--ordered li::before {
  content: counter(list-counter);
  counter-increment: list-counter;
  font-size: var(--text-size-large);
  display: inline-block;
  width: 2em;
  text-align: end;
}

.large-number {
  display: flex;
  align-items: baseline;
  gap: 1em;
  font-size: var(--text-size-large);
  font-weight: 900;
}

.large-number::before {
  content: var(--number);
  display: inline-block;
  font-size: var(--text-size-large); /* multiplied by base */
}

/* Slide Setup */

.slides {
  list-style: none;
  padding: 0;
  margin: 0;
}

.slide {
  --slide-height: 40rem;

  width: 100vw;
  height: var(--slide-height);
  max-height: var(--slide-height);
  background: var(--color-background);
}

.slide:not(:last-child) {
  margin-bottom: 2rem;
}

/* Fit Image */

.fit-image {
  overflow: hidden;
}

.fit-image img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* Content Title */

.content--title {
  padding: var(--text-padding);
  place-content: flex-end flex-start;
}

/* Content Center Image */
.content--center-image {
  display: grid;
  grid-template-rows: auto 1fr;
  max-height: 100%;
  overflow: hidden;
}

.content--center-image > :first-child {
  padding: var(--text-padding);
}

/* Content Statement */

.content--statement {
  display: grid;
  grid-template-rows: 35% 45% 20%;
}

.content--statement > div {
  padding: var(--text-padding);
}

.content--statement > :nth-child(2) {
  display: flex;
  font-size: var(--text-size-large);
  justify-content: center;
  align-items: center;
  max-width: 38ch;
}

.content--statement > :last-child {
  align-content: flex-end;
}

/* Content 50-50  */

.content--50-50 {
  display: grid;
  grid-template-columns: repeat(2, 50%);
}

.content--50-50 > :first-child {
  display: grid;
}

.content--50-50 > :first-child > :first-child,
.content--50-50 > :first-child > :last-child {
  padding: var(--text-padding);
}

.content--50-50 > :first-child > :last-child {
  align-content: flex-end;
}

.content--50-50 > :last-child {
  height: var(--slide-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* Content Test */

.content--test {
  display: grid;
  grid-template-areas:
    'a a'
    'b c';
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: repeat(2, 50%);
}

.content--test > div {
  padding: var(--text-padding);
}

.content--test > div:nth-child(1) {
  grid-area: a;
}

.content--test > div:nth-child(2) {
  grid-area: b;
}

.content--test > div:nth-child(3) {
  grid-area: c;
}

.content--test > div:nth-child(2),
.content--test > div:nth-child(3) {
  place-content: center;
  display: grid;
  text-align: center;
}

/* Themes */

.theme {
  color: var(--color-text);
  background: var(--color-background);
}

.theme--dark {
  --color-text: var(--color-light);
  --color-background: var(--color-dark);
}

.theme--medium {
  --color-text: var(--color-text);
  --color-background: var(--color-medium);
  box-shadow: inset var(--color-medium-2) 0px 0px 3em -1em;
}

.theme--candy {
  --color-text: var(--color-dark);
  --color-background: var(--gradient-candy);
}

.theme--honeycomb {
  --color-text: var(--color-dark);
  --color-background: var(--gradient-honeycomb);
}

.theme--ice {
  --color-text: var(--color-dark);
  --color-background: var(--gradient-ice);
}

.theme--lawn {
  --color-text: var(--color-dark);
  --color-background: var(--gradient-lawn);
}

.theme--lime {
  --color-text: var(--color-dark);
  --color-background: var(--gradient-lime);
}

.theme--midnight {
  --color-text: var(--color-dark);
  --color-background: var(--gradient-midnight);
}

.theme--peaches {
  --color-text: var(--color-dark);
  --color-background: var(--gradient-peaches);
}

.theme--sun {
  --color-text: var(--color-dark);
  --color-background: var(--gradient-sun);
}

/* Text Themes */

.theme-text {
  background-clip: text;
  color: transparent;
  width: fit-content;
}

.theme-text--candy {
  background-image: var(--gradient-candy);
}

.theme-text--honeycomb {
  background-image: var(--gradient-honeycomb);
}

.theme-text--ice {
  background-image: var(--gradient-ice);
}

.theme-text--midnight {
  background-image: var(--gradient-midnight);
}

.theme-text--lawn {
  background-image: var(--gradient-lawn);
}

.theme-text--lime {
  background-image: var(--gradient-lime);
}

.theme-text--peaches {
  background-image: var(--gradient-peaches);
}

.theme-text--sun {
  background-image: var(--gradient-sun);
}

/* Adjustments wider Viewports */

@media screen and (min-width: 120ch) {
  body {
    background: var(--color-light);
  }

  .slides {
    grid-auto-flow: column;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .slide {
    /* without the height of the scrollbar*/
    --slide-height: calc(100vh - 16px);
    /* --slide-height: calc(100vh - 10px); */

    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .slide:not(:last-child) {
    margin-bottom: 0;
  }
}

/* QR Code */

.qr-code {
  display: inline-block;
  width: 70%;
}