:root { color-scheme: light dark; }

@font-face {
  font-family: "BerlinType";
  src: url("/fonts/BerlinTypeWeb-Regular.eot?#iefix") format("embedded-opentype"), url("/fonts/BerlinTypeWeb-Regular.woff2") format("woff2"), url("/fonts/BerlinTypeWeb-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "BerlinType";
  src: url("/fonts/BerlinTypeWeb-Bold.eot?#iefix") format("embedded-opentype"), url("/fonts/BerlinTypeWeb-Bold.woff2") format("woff2"), url("/fonts/BerlinTypeWeb-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

html, body { margin: 0; padding: 0; }
body {
  background-color: #fff;
  color: #323232;
  font-family: "BerlinType", 'URW Gothic', source-sans-pro, sans-serif;
}
svg {
  height: 85svh;
  width: 87vw;
  object-fit: contain;
  margin: 5svh 5vw 5svh 5vw;
}
path,
rect {
  vector-effect: non-scaling-stroke;
  stroke-width: 0.4 !important;
  stroke: #323232 !important;
}
text {
  fill: #323232 !important;
}
article, footer {
  padding: 5svh 5vw 5svh 5vw;
  font-weight: normal;
}
svg + article {
  background-color: #94d7ff;
}
@media (prefers-color-scheme: dark) {
  svg + article {
    background-color: #253b48;
  }
}
p, li {
  max-width: 42em;
}
a:hover path,
a:hover rect {
  opacity: 0.4;
}
nav {
  position: fixed;
  top: 2svh;
  left: 2svh;
  transform: rotate(7.2deg);
}
nav a {
  text-decoration: none;
  font-size: 2em;
  letter-spacing: 0.2rem;
  color: #f5af78;
}
nav a:first-child {
  font-weight: bold;
  letter-spacing: 0.1rem;
  margin-right: 0.2rem;
}
article h1:first-child {
  margin-top: 0;
  font-size: 2em;
  color: #f5af78;
  letter-spacing: 0.1rem;
}
@media (prefers-color-scheme: dark) {
  body { background-color: #323232; color: #fff }
  path, rect {
    stroke: #fff !important;
  }
  text {
    fill: #fff !important;
  }
}