@view-transition {
  navigation: auto;
}

:root {
  --max-width: 1100px;
  --border-radius: 12px;
  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;

  --r-black: #171219;
  --r-grey: #1d2121;
  --r-azure: #f0ffff;
  --r-orange: #f18f01;
  --r-white: #fff;
  --r-antiquewhite: #faebd7;
  --r-ocean: #bdc7f0;
  --r-dark-fg: #bac2de;
  --r-dark-accent: #221924;

  scroll-behavior: smooth;
  scroll-padding-top: calc(58px + 2rem);
  color-scheme: light dark;

  --r-bg: light-dark(var(--r-white), var(--r-black));
  --r-fg: light-dark(var(--r-black), var(--r-dark-fg));
  --r-border: light-dark(var(--r-black), var(--r-grey));
  --r-primary: light-dark(var(--r-orange), var(--r-orange));
  --r-secondary: light-dark(var(--r-ocean), var(--r-ocean));
  --r-accent: light-dark(var(--r-antiquewhite), var(--r-dark-accent));
  --r-code: light-dark(var(--r-white), var(--r-black));
}

@supports (color: color(display-p3 1 1 1)) {
  :root {
    --r-black: color(display-p3 0.09 0.07 0.1);
    --r-grey: color(display-p3 0.12 0.13 0.13);
    --r-azure: color(display-p3 0.95 1 1);
    --r-orange: color(display-p3 0.89 0.58 0.21);
    --r-white: color(display-p3 1 1 1);
    --r-antiquewhite: color(display-p3 0.97 0.92 0.85);
    --r-ocean: color(display-p3 0.75 0.78 0.93);
    --r-dark-fg: color(display-p3 0.74 0.76 0.86);
    --r-dark-accent: color(display-p3 0.129 0.101 0.14);
  }
}

[data-theme="light"] {
  color-scheme: only light;
}

[data-theme="dark"] {
  color-scheme: only dark;
  font-weight: 100;
}

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

h1 {
  margin-bottom: revert;
}
h1,
h2,
h3 {
  line-height: 1.25;
}
h3,
h4,
h5,
h6 {
  margin: revert;
}

p {
  margin: revert;
}

hr,
blockquote {
  margin: revert;
}

ul,
ol {
  all: revert;
}

body {
  min-height: 100vh;
  color: var(--r-fg);
  background-color: var(--r-bg);
  line-height: 1.5;
  text-rendering: optimizespeed;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    sans-serif;
}
body[data-theme="dark"] .navigation-ul {
  backdrop-filter: hue-rotate(36deg) brightness(0.5) blur(1.8px);
  -webkit-backdrop-filter: hue-rotate(36deg) brightness(0.5) blur(1.8px);
}
body[data-theme="dark"] .goto-homepage {
  color: var(--r-secondary);
}

header {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 20;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}
header > nav {
  width: 100vmin;
}

header > nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--r-fg);
  border-bottom: thin solid var(--r-border);
  background-color: var(--r-bg);
}
header > nav ul:has(a[data-current="true"]) {
  outline: thin solid;
}
header > nav ul > li {
  margin: 0;
  padding: 16px 12px;
  list-style: none;
}
header > nav .goto-homepage {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
}
header > nav .goto-homepage > a {
  padding-bottom: 2px;
}
header > nav #theme-toggler {
  cursor: pointer;
  background-color: transparent;
  outline: none;
  border: none;
}
header > nav ul > li a {
  padding: 0 0.25rem;
}

main {
  margin: 76px auto 0 auto;
  padding: 1.5rem 8px;
  max-width: 60ch;
  display: flex;
  flex-direction: column;
  gap: 1rem;

  &.r-article {
    flex-direction: column-reverse;
    & > #toolbar {
      order: 2;
    }
    & > h1 {
      order: 1;
    }
  }
}

footer {
  margin: 48px 0;
  text-align: center;
  font-size: 0.65rem;
  font-family: monospace;
  opacity: 0.5;
}

article {
  padding: 0.75rem;
  background-color: var(--r-accent);
  border-radius: 8px;
  word-spacing: 1.5;

  & p:nth-of-type(1) {
    margin-top: 0;
  }
  & time {
    opacity: 0.4;
    font-size: small;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  & > a {
    padding-left: 8px;
    opacity: 0.25;
  }
}

a {
  color: var(--r-primary);
  text-decoration: none;

  &:hover,
  &:focus,
  &:focus-within {
    text-decoration: underline;
  }
}

figure {
  margin: 1em 0;
  display: flex;
  flex-flow: column;
}

img {
  width: 100%;
}

figcaption {
  font: italic smaller sans-serif;
  padding: 3px;
  text-align: center;
}

code {
  font-style: var(--font-mono);
  background-color: var(--r-code);
  padding-inline: 1ch;
  border-radius: 4px;
}
pre {
  overflow-x: auto;
  margin: 1em 0;
  padding: 0.75em;
  background-color: var(--r-code);
  border-radius: 4px;
  & > code {
    border-radius: unset;
    padding-inline: unset;
    background-color: unset;
  }
}

#toolbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  opacity: 0.5;
  transform: translateY(12px);
  font-family: var(--font-mono);
  font-size: small;
  & select {
    font-family: var(--font-mono);
    font-size: small;
  }
}

select {
  display: inline-flex;
  cursor: pointer;
  user-select: none;
  appearance: none;
  padding-inline-start: 1rem;
  padding-inline-end: 2.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 2;
  border-radius: 6px;
  border-width: 1px;
  border-color: var(--r-border);
  background-color: transparent;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(1px + 50%),
    calc(100% - 16.1px) calc(1px + 50%);
  background-size:
    4px 4px,
    4px 4px;
  background-repeat: no-repeat;
  color: inherit;
}

blockquote {
  border-left: thick solid var(--r-secondary);
  padding-left: 1em;
}

@media (min-width: 600px) {
  header > nav {
    width: 600px;
  }
  article {
    padding: 0.75rem 1.5rem;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    & > a {
      visibility: hidden;
      opacity: 0.4;
    }
    &:hover > a,
    &:focus > a,
    &:focus-within > a {
      visibility: visible;
    }
  }
}