@font-face {
  font-family: "Hepta Slab";
  src:
    local("hepta-slab"),
    url(/hepta-slab.woff2) format("woff2");
  font-style: normal;
  font-weight: 1 900;
  font-display: swap;
}


:root {
  --dark-text: oklch(0.85 0.03 250);
  --dark-bg: oklch(0.1 0.03 250);
  --dark-logo: oklch(0.5 0.03 250);
  --dark-card: oklch(0.2 0.01 250);

  --light-text: oklch(0.1 0.03 250);
  --light-bg: oklch(0.7 0.03 250);
  --light-logo: oklch(0.1 0.03 250);
  --light-card: oklch(0.8 0.03 250);

  --body-bg: var(--light-bg);
  --text-clr: var(--light-text);
  --card-bg: var(--light-card);
  --logo-border-color: var(--light-logo);
  --card-border-top: oklch(0.9 0.03 250);
  --card-border-bottom: oklch(0.5 0.03 250);
  --logo-yellow: oklch(0.75 0.15 100);
  --logo-blue: oklch(0.4 0.15 260);

  @media(prefers-color-scheme: dark) {
    --body-bg: var(--dark-bg);
    --text-clr: var(--dark-text);
    --card-bg: var(--dark-card);
    --logo-border-color: var(--dark-logo);
  }
}

@view-transition {
  navigation: auto;
  types: slide;
}

html {
  height: 100%;
  width: 100%;
  font-family: "Hepta Slab";
  font-weight: 600;
  font-size: 16px;
}

body {
  color: var(--text-clr);
  background-color: var(--body-bg);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  min-height: 100%;
  gap: 1rem;
  container-type: inline-size;
  overflow-x: hidden;
}

main {
  flex-grow: 1;
  width: 100%;
  max-width: 900px;
  text-align: start;
  background-color: var(--card-bg);
  border: solid 8px;
  border-color: var(--card-border-top) var(--card-border-bottom) var(--card-border-bottom) var(--card-border-top);
  padding: 0.75rem;
  box-sizing: border-box;
  border-radius: 1rem;
  corner-shape: bevel;
}

footer {
  max-width: 900px;
  width: 100%;
  text-align: end;
}

@keyframes move-out {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes move-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0%);
  }
}

/* Apply the custom animation to the old and new page states */

::view-transition-old(root) {
  animation: 0.4s ease-in both move-out;
}

::view-transition-new(root) {
  animation: 0.4s ease-in both move-in;
}