:root {
  color-scheme: dark;
  --nord0: #2e3440;
  --nord1: #3b4252;
  --nord2: #434c5e;
  --nord3: #4c566a;
  --nord4: #d8dee9;
  --nord5: #e5e9f0;
  --nord6: #eceff4;
  --nord7: #8fbcbb;
  --nord8: #88c0d0;
  --nord9: #81a1c1;
  --nord10: #5e81ac;
  --nord11: #bf616a;
  --nord12: #d08770;
  --nord13: #ebcb8b;
  --nord14: #a3be8c;
  --nord15: #b48ead;
  --font-mono: "Space Mono", "Cascadia Mono", ui-monospace, monospace;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--nord0);
  color: var(--nord4);
  font-family: var(--font-mono);
  font-size: clamp(14px, 1.2vw, 24px);
  line-height: 1.6;
  -webkit-font-smoothing: none;
  font-smooth: never;
}

body {
  margin: 0;
}

a {
  color: var(--nord8);
  text-underline-offset: 0.2em;
}

a:hover,
a[aria-current="page"] {
  color: var(--nord13);
}

:focus-visible {
  outline: 2px solid var(--nord8);
  outline-offset: 4px;
}

::selection {
  background: var(--nord8);
  color: var(--nord0);
}

h1,
h2,
h3 {
  color: var(--nord6);
  line-height: 1.4;
}

h1 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  overflow-wrap: anywhere;
}

h2 {
  margin: 2rem 0 1rem;
  font-size: 1rem;
}

h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

p {
  margin: 0 0 1rem;
}

code {
  font: inherit;
  overflow-wrap: anywhere;
}