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

:root {
  --text-padding: 4vw;
  --text-size: 2vw;
  --text-size-large: 2em; /* 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% 100% 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.4 360) 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: radial-gradient(
    farthest-corner circle at 50% 100% in oklab,
    oklch(0.73 0.2 58.57) 2% 2%,
    oklch(95% 0.4 95) 98% 98%
  );
  --gradient-alert: linear-gradient(
    136deg in oklab,
    oklch(100% 0.5 37) 0%,
    oklch(100% 0.5 56) 100%
  );
  --gradient-strawberry: linear-gradient(
    to top left in oklch,
    oklch(80% 0.3 12) 0%,
    oklch(80% 0.3 33) 100%
      /* to top left in oklch,
    oklch(80% 0.28 245) 0%,
    oklch(80% 0.12 259) 100% */
      /* to top left in oklch,
    oklch(27% 0.23 245) 0%,
    oklch(100% 0.09 259) 100% */
  );

  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: 9vw;
  line-height: 1em;
  letter-spacing: -0.02em;
  max-width: 14ch;
}

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

.h3 {
  font-weight: 800;
  font-size: 2.5vw;
  line-height: 1em;
}

pre {
  font-size: var(--text-size);
  line-height: 1.6em;
  font-weight: 400;
  font-family: monospace;
}

p {
  line-height: 1.6em;
}

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

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

p + p,
p + .list,
.list + 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; */
  list-style-type: disc;
  margin: 0;
  padding: 0 0 0 1em;
}

.list li {
  padding: 0.8em 0 0 0;
}

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

.list--ordered {
  counter-reset: list-counter;
  text-align: start;
}

.list--ordered li {
  padding: 0.5em 0;
  display: flex;
  gap: 1em;
  align-items: baseline;
  font-size: var(--text-size-large);
}

.list--ordered li::before {
  content: counter(list-counter);
  counter-increment: list-counter;
  display: inline-block;
  width: 0.8em;
}

.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%;
}

.cover-image {
  overflow: hidden;
}

.cover-image img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
}

/* Content Title */

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

/* Content Default */

.content--default {
  display: flex;
  flex-direction: column;
}

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

.content--default > :last-child {
  padding: var(--text-padding);
  padding-block-start: 0;
  /* padding-block-end: 0; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* 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: 25% 55% 15%;
}

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

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

.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,
.content--50-50 > :last-child > :first-child,
.content--50-50 > :last-child > :last-child {
  padding: var(--text-padding);
}

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

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

/* Content Test */

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

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

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

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

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

.content--3-split > div:nth-child(2),
.content--3-split > 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-light);
  --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);
}

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

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

/* 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%;
}