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

@font-face {
  font-family: Inter;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/InterItalic.woff2") format("woff2");
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #90fb94;
    --secondary: #94bbd8;
    --tertiary: #44dd48;
    --foreground: #e2e2e2;
    --highlight: #ffffff;
    --background: #121212;
    --container: #181818;
    --menu: #242424;
    --neutral-dark: #383838;
    --neutral-light: #949494;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --primary: #046f08;
    --secondary: #274e6b;
    --tertiary: #22bb26;
    --foreground: #1d1d1d;
    --highlight: #000000;
    --background: #ededed;
    --container: #e7e7e7;
    --menu: #dbdbdb;
    --neutral-dark: #c7c7c7;
    --neutral-light: #6b6b6b;
  }
}

@keyframes fade-out {
  0%, 70% { background-color: var(--menu); }
  100% { background-color: transparent; }
}

.link-list {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.link-list li a {
  display: block;
  padding: 1em;
}

a { text-decoration: none; }
main a { color: var(--primary); }
main a:visited { color: var(--secondary); }
main a:hover { text-decoration: underline; }
footer a { color: inherit; }

aside {
  background-color: var(--container);
  box-shadow: inset 4px 0 var(--tertiary);
  padding: 0.2em 1em;
}

code {
  background-color: var(--menu);
  border-radius: 6px;
  padding: 3px;
}

section { padding: 0.5em; }
section:target { animation: fade-out 1.5s; }

body {
  color: var(--foreground);
  background-color: var(--background);
  font-family: Inter, sans-serif;
  line-height: 1.4;
  letter-spacing: 0.01rem;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
  overflow-y: scroll;
  min-height: 100vh;
  margin: 0;
}

#navbar {
  background-color: var(--menu);
  overflow-x: auto;
}

#navbar a { color: var(--highlight); }
#navbar a:hover {
  color: var(--primary);
  background-color: var(--neutral-dark);
}

#navbar a[aria-current] { color: var(--tertiary); }

main {
  flex: 1;
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  padding: 0.5em;
  box-sizing: border-box;
}

footer {
  color: var(--neutral-light);
  background-color: var(--container);
  text-align: center;
  padding: 1em;
}

footer ul {
  flex-wrap: wrap;
  justify-content: center;
}

#footer-logo {
  font-size: 0.9rem;
  letter-spacing: 0.18rem;
}

#footer-logo svg {
  width: 64px;
  height: 64px;
  color: var(--highlight);
  display: block;
  margin-inline: auto;
}

#footer-logo svg:hover { color: var(--foreground); }