body {
  background: antiquewhite;
  color: #004466;
  font-family: "Afacad Flux", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "slnt" 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Space Grotesk", serif;
  font-optical-sizing: auto;
  font-weight: 450;
  font-style: normal;
}

:link,
:visited {
  color: #0066aa;
}

body > header {
  background-color: #92d2ec;
  color: #442266;
  border-bottom: 4px solid #0066aa;
  padding: 0.35em 1em;
}
body > header h1,
body > header h2,
body > header h3,
body > header h4,
body > header h5,
body > header h6 {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

.main-cols {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex-gap: 2em;
}
@media screen and (min-width: 600px) {
  .main-cols {
    flex-direction: row;
  }
}

aside {
  width: 20%;
  background-color: white;
  padding: 0 1em;
}

main {
  max-width: 30em;
  padding: 0.35em 2em;
}

main p {
  text-align: justify;
  word-wrap: break-word;
  hyphens: auto;
  text-wrap-mode: wrap;
  text-wrap-style: pretty;
}

main.post > p:first-of-type::first-letter {
  font-family: "Space Grotesk", serif;
  initial-letter: 3;
  padding: 4px 8px;
  border: 2px dotted #0066aa;
  box-sizing: border-box;
  background-color: #92d2ec;
  margin-right: 5px;
}

main > header {
  padding-bottom: 1.5em;
  border-bottom: 2px solid #0066aa;
  margin-bottom: 2em;
}

main > footer {
  padding-top: 1em;
  border-top: 2px solid #0066aa;
  margin-top: 2em;
}

code {
  background-color: white;
  padding: 1px 5px;
  border: 2px dashed #336699;
  border-radius: 5px;
}

/*# sourceMappingURL=main.css.map */