@font-face {
  font-family: 'Absans';
  src: url('fonts/Absans/Absans-Regular.woff2') format('woff2'),
    url('fonts/Absans/Absans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Necto Mono';
  src: url('fonts/Necto Mono/NectoMono-Regular.woff2') format('woff2'),
    url('fonts/Necto Mono/NectoMono-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Sinistre';
  src: url('fonts/Sinistre/Sinistre-Bold.woff2') format('woff2'),
    url('fonts/Sinistre/Sinistre-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Sinistre';
  src: url('fonts/Sinistre/Sinistre-Dark.woff2') format('woff2'),
    url('fonts/Sinistre/Sinistre-Dark.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Sinistre';
  src: url('fonts/Sinistre/Sinistre-Regular.woff2') format('woff2'),
    url('fonts/Sinistre/Sinistre-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Sinistre';
  src: url('fonts/Sinistre/SinistreVF.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
}

h1,
h2,
h3 {
  font-family: 'Sinistre', sans-serif;
  font-weight: normal;
  color: var(--smoky-black);
  align-self: center;
  text-align: center;
}

h4 {
  color: var(--smoky-black);
}

b,
strong {
  color: var(--smoky-black);
}

a {
  color: var(--dark-red);
  font-weight: bold;
}

main a[target="_blank"] {
  text-decoration-style: dotted;
}

main a {
  text-decoration: underline;
  text-decoration-style: solid;
}

main a:hover,
main a:hover > * {
  background-color: #000;
  color: var(--dark-red);
  text-decoration: none
}

footer a {
  color: color-mix(in hsl, var(--smoky-black), var(--jasmine) 35%);
  text-decoration-style: dotted;
}

body {
  font-family: 'Absans', serif;
  background-color: var(--jasmine);
  color: var(--smoky-black);
  display: flex;
  flex-direction: column;
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

nav {
  font-size: 1rem;
  border-top: 1px solid var(--smoky-black);
  border-bottom: 1px solid var(--smoky-black);
  padding: 2px 5px;
  text-align: center;
}

p {
  line-height: 1.4;
}

nav {
  font-weight: bold;
  margin-bottom: 2rem;
}

nav a {
  color: var(--smoky-black);
  text-decoration: none;
}

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

#content {
  align-self: center;
  box-sizing: border-box;
  padding: 0 30px;
  max-width: min(600px, 100vw);
}

.centered {
  align-self: center;
  text-align: center;
}

#page h2,
#page h3 {
  text-align: left;
}

#page h2 {
  font-size: 1.7rem;
  border-bottom: px dashed #aaa;
}

#page h3 {
  font-size: 1.5rem;
}

#page h4 {
  font-size: 1rem;
}

hr {
  background-color: color-mix(in hsl, var(--smoky-black), var(--jasmine) 35%);
  border: none;
  height: 3px;
  margin: 0;
  width: 100%;
}

.title,
.subtitle {
  margin-bottom: 0;
  margin-top: 10px;
}

.subtitle,
.tagline {
  margin-top: 0;
}

.title {
  font-size: 3rem;
}

.subtitle {
  font-size: 2rem;
}

p:has(+ pre) {
  margin-bottom: 0;
}

p+pre {
  margin-top: 5px;
}

pre {
  overflow: auto;
  border-top: 1px solid var(--smoky-black);
  border-bottom: 1px solid var(--smoky-black);
  padding: 4px 0;
  background-color: #111;

}

code {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
  font-family: 'Necto Mono', monospace;
  font-size: 0.9rem;
}

p>code,
a>code,
h1>code,
h2>code,
h3>code,
h4>code,
h5>code,
li>code {
  font-weight: bold;
  color: var(--smoky-black);
  font-size: 1em;
}

.copy-button {
  font-family: sans-serif;
  font-size: 0.8rem;
  text-decoration: underline;
}

table th {
  border-bottom: 1px solid var(--pomp-and-power);
}

img,
video {
  margin: 0;
  max-width: 100%;
}

.warning {
  border-color: var(--pomp-and-power) !important;
}

.warning h1 {
  border-color: var(--pomp-and-power) !important;
  background-color: var(--pomp-and-power) !important;
}

.block {
  border: 1px dashed var(--pomp-and-power);
}

.block.padded {
  margin: 10px;
  border: 1px solid var(--pomp-and-power);
}

.block p {
  padding-top: 0;
  font-size: 0.9em;
  padding-left: 15px;
  padding-right: 15px;
}

.block h1 {
  font-size: 1.17em;
  position: relative !important;
  margin: 0 !important;
  text-align: left;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 2px !important;
  border: 1px solid var(--pomp-and-power);
  color: #111;
  background-color: var(--pomp-and-power);
}

.nopara p {
  padding: 0;
  margin: 0px;
  margin-bottom: -5px;
}


li {
  padding: 1px 0;
}

:root {
  /* apple wtf lol */
  font-size: 1rem;
}

@media screen and (min-width: 800px) and (max-width: 1000px) {
  :root {
    zoom: 1.2;
  }
}

@media screen and (min-width: 1000px) and (max-width: 1200px) {
  :root {
    zoom: 1.3;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
  :root {
    zoom: 1.4;
  }
}

@media screen and (min-width: 1400px) and (max-width: 1600px) {
  :root {
    zoom: 1.5;
  }
}

@media screen and (min-width: 1400px) and (max-width: 1600px) {
  :root {
    zoom: 1.55;
  }
}


@media screen and (min-width: 1400px) and (max-width: 1600px) {
  :root {
    zoom: 1.6;
  }
}

@media screen and (min-width: 1600px) and (max-width: 1800px) {
  :root {
    zoom: 1.65;
  }
}

@media screen and (min-width: 1800px) {
  :root {
    zoom: 1.7;
  }
}

@keyframes dove-fly {

  0%,
  45% {
    right: -55px;
    bottom: -55px;
  }

  55% {
    right: -15px;
    bottom: -15px;
  }

  65%,
  100% {
    right: -55px;
    bottom: -55px;
  }
}

#dove {
  position: fixed;
  animation-name: dove-fly;
  animation-duration: 100s;
}

.zoom {
  transition: transform .1s ease-in-out;
}

.zoom:hover {
  transform: scale(1.01);
}