@import "https://cdn.jsdelivr.net/npm/monaspace-font/krypton.css";

body {
  font-family: "Monaspace Krypton", sans-serif;
  font-size: 14px;
  color: #cdd6f4;
  line-height: 1.6;
  background-color: #1e1e2e;
  width: 940px;
  max-width: 90vw;
  margin: 0 auto;
}

body > h1 {
  margin-top: 3rem;
}

header {
  margin: 2rem 0 4rem 0;
}

article:not(:last-of-type) {
  margin-bottom: 4rem;
}

footer {
  margin: 4rem 0 2rem 0;
}

footer {
  color: #bac2de;
  font-style: italic;
}

footer span {
  color: #a6e3a1;
}

.video-wrapper {
  border: 1px solid #89b4fa;
  border-radius: 5px;
  padding: 0.6rem;
  margin: 2rem auto;
  width: -moz-fit-content;
  width: fit-content;
}

article video {
  display: block;
  max-height: 320px;
  max-width: 82vw;
  border-radius: 5px;
}

.image-wrapper {
  border: 1px solid #89b4fa;
  border-radius: 5px;
  padding: 0.6rem;
  margin: 2rem auto;
  width: -moz-fit-content;
  width: fit-content;
}

article img {
  display: block;
  max-height: 320px;
  max-width: 82vw;
  border-radius: 5px;
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.2rem;
}

h3 {
  font-size: 1.1rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 1rem;
}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
  font-size: 0.8rem;
  color: #89b4fa;
  border: 1px solid #89b4fa;
  border-radius: 5px;
  padding: 0.3rem 0.3rem;
}

.system-log {
  font-size: 0.8rem;
  color: #89b4fa;
  border: 1px solid #89b4fa;
  border-radius: 5px;
  padding: 1em;
  font-style: italic;
}