*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --background-primary: #303446;
  --text-primary: #c6d0f5;
  --text-secondary: #babbf1;
  --text-strong: #f2d5cf;
  --text-accent: #8caaee;
  --text-quote: #99d1db;
  --line-height: 1.25rem;
}

html {
  background: var(--background-primary);
  color: var(--text-primary);
  color-scheme: dark;
  font-size: 16px;
  line-height: var(--line-height);
}

body {
  font-family: "JetBrains Mono NL", "JetBrains Mono", monospace;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
  max-width: 80ch;
  margin: 0 auto;
  padding: 16px;
}

button,
input,
select,
textarea,
optgroup,
*::placeholder {
  font: inherit;
  text-transform: none;
}

code,
pre,
kbd,
samp {
  font: inherit;
}

summary {
  display: list-item;
}

b,
strong {
  color: var(--text-strong);
  font-weight: bold;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-block-start: var(--line-height);
  margin-block-end: var(--line-height);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: bold;
}

h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  color: var(--text-secondary);
}

h1::before {
  content: "# ";
  content: "# " / "";
}

h2::before {
  content: "## ";
  content: "## " / "";
}

h3::before {
  content: "### ";
  content: "### " / "";
}

h4::before {
  content: "#### ";
  content: "#### " / "";
}

h5::before {
  content: "##### ";
  content: "##### " / "";
}

h6::before {
  content: "###### ";
  content: "###### " / "";
}

h1 {
  font-size: 1.25rem;
}

h2 {
  font-size: 1.1rem;
}

h1:hover,
h2:hover {
  text-decoration: underline wavy var(--text-secondary) 2px;
  transition: text-decoration 0.75s ease-out;
}

.anchor-link {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}

.anchor-link:hover {
  text-decoration: none;
}

h1:hover .anchor-link,
h2:hover .anchor-link,
h3:hover .anchor-link {
  visibility: visible;
  opacity: 1;
}

hr {
  color: var(--text-secondary);
  text-align: center;
  border: 0;
  margin: var(--line-height) 0;
}

hr::before {
  content: "---";
  content: "---" / "";
}

ul {
  list-style-type: "- ";
  margin: var(--line-height) 0;
  padding-inline-start: 2ch;
}

ul li::marker {
  font-weight: bold;
  color: var(--text-secondary);
}

ol {
  padding-inline-start: 3ch;
}

li[role="article"] + li[role="article"] {
  margin-top: var(--line-height);
}

li header {
  margin: 0;
}

li h1::before,
li h2::before,
li h3::before,
li h4::before,
li h5::before,
li h6::before {
  content: unset;
}

blockquote {
  color: var(--text-quote);
  position: relative;
  margin-block-start: var(--line-height);
  margin-block-end: var(--line-height);
  margin-inline-start: 2ch;
}

blockquote::before {
  content: ">";
  content: ">" / "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -2ch;
}

header {
  margin-block-start: 1.1rem;
  margin-block-end: 1.1rem;
}

header h1,
header h2,
header h3,
header h4,
header h5,
header h6,
header p {
  margin-block-start: 0;
  margin-block-end: 0;
}

a {
  color: var(--text-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline wavy;
}

small {
  font-size: inherit;
  color: var(--text-secondary);
}

code {
  color: var(--text-quote);
  overflow-wrap: break-word;
}

pre {
  margin: 2ch 0;
}

nav {
  display: flex;
  gap: 2ch;
  margin-block-end: 1.1rem;
}

nav span::before,
nav span::after {
  color: var(--text-secondary);
}

nav span::before {
  content: "[";
  content: "[" / "";
}

nav span::after {
  content: "]";
  content: "]" / "";
}

main {
  margin-block-start: 1.1rem;
}

.emoji-xl {
  font-size: 2rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --background-primary: #f9fffa;
    --text-primary: #000000;
    --text-secondary: #6c6f85;
    --text-strong: #353745;
    --text-accent: #049d67;
    --text-quote: #dd7878;
    --line-height: 1.25rem;
  }
}

@media (max-width: 500px) {
  nav {
    gap: 0.5ch;
    flex-direction: column;
  }
}

@media print {
  nav {
    display: none;
  }
}

.emoji-wave {
  display: inline-block;
  transform-origin: 70% 70%;
}

p:hover .emoji-wave {
  animation-name: wave-animation;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.explanation {
  text-decoration: underline dotted;
}

@keyframes wave-animation {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(14deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  30% {
    transform: rotate(14deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.emoji-rotate {
  display: inline-block;
}

span:hover .emoji-rotate {
  animation-name: spin-animation;
  animation-duration: 3s;
  animation-iteration-count: 1;
}

@keyframes spin-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}