html {
  font-family: -apple-system,BlinkMacSystemFont,'avenir next',avenir,'helvetica neue',helvetica,ubuntu,roboto,noto,'segoe ui',arial,sans-serif;
  font-size: 19px;
  line-height: 1.4;
  text-rendering: optimizeLegibility;
}
body {
  box-sizing: border-box;
  background-color: #000;
  color: #eee;
  margin: 0;
  padding: 0;
}

/* :: Typography */

p, li {
  position: relative;
  margin: 0 0 1.666em 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  line-height: 1;
  margin-bottom: 0.667em;
  text-wrap:balance
}

h2, h3, h4, h5, h6 {
  margin-top: 1.667em;
}

h1 {
  font-size: 1.953em;
}

h2 {
  font-size: 1.563em;
}

h3 {
  font-size: 1.25em;
}

h4, h5, h6 {
  font-size: 1em;
}

blockquote {
  padding: 0 0 0 12px;
  color: #eee;
  opacity: 0.666;
}

.small, .caption {font-size: .8125rem;color: #eee;font-weight: 500;opacity:0.5}

.caption {
  display: block;
  margin: 1rem auto 1.6666rem;
  max-width: 36rem;
  font-style: normal;
}

big {color: #eee;font-size: 2em;line-height: 48px;display: block;}

a {
  color: #fcb95c;
  text-decoration-line: underline;
  text-underline-offset: 0.1em;
  text-decoration-thickness: 1px;
  text-decoration-color: oklch(from currentColor l c h / 75%);
}

a:hover {
  opacity: 0.75
}

a::selection {
  background: #b3d4fd;
}

a::-moz-selection {
  background: #b3d4fd;
}

a:active {
  opacity: 0.5
}

a:focus {
  background: oklch(from currentColor l c h / 10%);
  text-decoration-line: none
}
nav {
  max-width: 36rem;
  margin: 1em auto;
}
nav ul, nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline;
  margin-right: 1em;
}
nav .current {
  font-weight: bold;
}
nav a {
  color: #eee;
  text-decoration: underline;
}
main {
  max-width: 36rem;
  margin: 4em auto;
}
section {
  margin: 0 0 1em;
  padding: 1em;
  border: 5px solid #fcb95c;
  border-radius: 10px;
}
iframe {
  height: 100vh;
}