:root {
 --color-bg-html: hsl(0, 0%, 100%);
 --color-bg-body: hsl(0, 0%, 95%);
 --color: hsl(0, 0%, 10%);
}

@media (prefers-color-scheme: dark) {
 :root {
  --color-bg-html: hsl(0, 0%, 0%);
  --color-bg-body: hsl(0, 0%, 5%);
  --color: hsl(0, 0%, 90%);
 }
}

html {
 font-family: sans-serif;
 color: var(--color);
 background-color: var(--color-bg-html);
}

body {
 background-color: var(--color-bg-body);
 max-width: 60em;
 margin-left: auto;
 margin-right: auto;
 padding: 24px;
}

a {
 color: inherit;
}

main>section, article>section {
 margin-top: 72px;
 margin-bottom: 72px;
}

main>section>header, article>section>header {
 border-bottom: 1px dotted;
}

main>section>section {
 border-bottom: 1px dotted;
 margin-top: 24px;
 margin-bottom: 24px;
 page-break-inside: avoid;
}

main>section>section>section>ul {
 list-style: inside;
 padding-left: 0;
}

ul.tags {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 list-style: none;
}

ul.tags>li {
 display: inline-block;
 width: max-content;
 padding: 8px;
 border: 1px dotted;
 border-radius: 8px;
}

pre {
 font-size: 1rem;
 padding: 12px;
 overflow-x: auto;
 border-width: 1px;
 border-style: dotted;
 border-radius: 12px;
}

code {
 font-family: monospace;
 font-size: 1rem;
}

@media (min-width: 30em) {
 
 main>section>section {
  display: flex;
  gap: 24px;
 }

 main>section>section>header {
  flex-basis: 25%;
  flex-shrink: 0;
 }

}

@media print {

 section#articles {
  display: none;
 }
 
}