:root {
  --link-color: rgb(175, 18, 18);
  --background: white;
  --color: #292929;
  font-size: 21px;
  font-family: "Hoefler Text";
}
body {
  background: var(--background);
  color: var(--color);
  margin: 0;
}
* {
  box-sizing: border-box;
}
*:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--link-color);
}
a {
  color: inherit;
}
a:hover, a:focus {
  color: var(--link-color);
  text-decoration: none;
}
nav {
  display: flex;
  justify-content: space-between;
  margin-block-end: 2rem;
  padding: 1rem;
}
nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
}
nav li {
  list-style: none;
  display: inline-block;
}
nav li:not(:last-child) {
  margin-right: 8px;
}
main {
  width: calc(750px + 2rem);
  margin: 0 auto 2rem auto;
  max-width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}
ul li {
  line-height: 1.45;
}
.post-list {
  padding: 0;
}
.post-list li {
  list-style: none;
  line-height: unset;
}
.post-list li + li {
  margin-top: 1rem;
}
.post-list li * {
  margin: 0;
}
.post-list a {
  text-decoration: none;
}
.post-list a:hover {
  text-decoration: underline;
}
article::after {
  content: "\2234";
  text-align: center;
  display: block;
  margin-top: 4rem;
  margin-bottom: 4rem;
}
header h1, header p {
  margin: 0;
  text-align: center;
}
.post-meta {
  font-size: 0.8em;
}
header #byline {
  display: none;
}
header {
  margin-bottom: 1.25rem;
}
h1 {
  font-size: 2em;
  line-height: 1.1;
}
h2 {
  font-size: 1.25rem;
}
p {
  line-height: 1.6;
  margin-block-end: 1.6em;
}
pre {
  font-size: 80%;
  font-family: monospace;
  color: white;
  padding: 1em;
  border: 1px solid;
  border-radius: .5em;
  background: #1a1919;
  overflow-x: auto;
}
figure {
  margin: 1.5em 0;
}
img {
  max-width: 100%;
}
figure img {
  margin: auto;
  display: block;
}
figure figcaption {
  margin: 0.5em;
  font-size: 0.8em;
  text-align: center;
}
:not(pre) > code {
  font-family: monospace;
  font-size: 0.8em;
}
footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.8em;
  width: 75%;
  margin: auto;
}
.social-media-list {
  padding: 0;
}
.social-media-list li {
  list-style: none;
}
.social-media-list svg {
  margin-right: 0.25em;
}
.footer-description {
  font-style: italic;
  width: 50%;
}

@media (max-width: 600px) {
  footer {
    flex-direction: column;
    width: 100%;
  }
  .footer-description {
    width: 100%;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
  --link-color: rgb(233, 69, 69);
    --color: rgb(204, 204, 204);
    --background: #1a1919;
  }
  pre {
    color: rgb(194, 143, 31);
  }
}