@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: local("/static/fonts/AtkinsonHyperlegibleNextVF-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: local("/static/fonts/AtkinsonHyperlegibleMonoVF-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --color-light: #e2e2e2;
  --color-dark: #1a1a1a;
  --color-orange: #FF9F8A;
  --color-yellow: #FFF59D;
  --color-cyan: #5ABFB5;
  color-scheme: light dark;
  color: light-dark(var(--color-dark), var(--color-light));
  font-family: "Atkinson Hyperlegible Next", sans-serif;
  font-weight: 400;
  --main-width: 640px;
  --radius: 0px;
}

body {
  margin: 0; /* 1 */
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}


main {
  height: 100%;
}

a {
  color: light-dark(var(--color-dark), var(--color-light));
  transition: color 0.3s ease;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-decoration-thickness: .1rem;
}

header {
  text-align: center;
  ul {
    a:hover {
      color: light-dark(lch(from var(--color-cyan) calc(l - 10) c h), var(--color-cyan));
    }
  }
}

article {
  a {
    color: light-dark(lch(from var(--color-orange) calc(l - 10) c h), var(--color-orange));
  }
  img {
    transform: scale(1);
    transition: all 0.2s ease;
    border-radius: 2%
  }
  img:hover {
    transform: scale(1.05);
  }
}

h1 {
  color: light-dark(lch(from var(--color-yellow) calc(l - 10) calc(c + 50) calc(h - 5)), var(--color-yellow));
}

footer {
  padding: 2rem;
  font-size: large;
  p {
    margin: 0;
  }
}

blockquote {
  font-weight: 250;
  font-style: italic;
}

ul {
  list-style: none;
}

code {
  font-family: "Atkinson Hyperlegible Mono";
}