html {
  font-size: 1.2rem;
  font-family: Lucida Grande, Helvetica, Arial;
  line-height: 1.6rem;

  @media (prefers-color-scheme: dark) {
    color: #eeeeee;
    background: #111111;
  }
}

section {
  max-width: 40rem;
  margin: 5rem auto 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Palatino, Palatino Linotype, Lucida Grande, Helvetica, Arial;
}

h1 {
  font-size: 2.5rem;
  line-height: 2.5rem;
}

h2 {
  font-size: 2rem;
  line-height: 2rem;
}

h3 {
  font-size: 1.2rem;
  line-height: 1.2rem;
}

a {
  color: #e00000;
}

a:visited {
  color: #c60000;
}

a:hover {
  color: #ff0000;
}

li {
  margin: 0.2rem 0 0.4rem 0;
}

#main p img {
  max-width: 100%;
  display: block;
  margin: auto;
}

header {
  max-width: 42rem;
  margin: 1rem auto;
  padding: 1rem;

  a {
    text-decoration: none;
  }

  a#header-title {
    float: left;
    font-family: Palatino, Palatino Linotype, Lucida Grande, Helvetica, Arial;
    font-size: 1.5rem;
    font-weight: 600;
  }

  ul {
    float: right;
    margin: 0;
    padding: 0;

    li {
      display: inline;
      padding: 0 1rem 0 0;
    }
  }
}

#content {
  margin: 0 auto;
}

#main {
  width: 100%;
  margin: 0;
  padding: 1rem;
}

footer {
  margin: 5rem auto;
  font-size: 1rem;
  text-align: center;
}

ul.post-meta {
  padding: 0;
  font-size: 0.9rem;
  color: #888888;

  li {
    display: inline;
    margin-right: 1rem;
  }
}

pre {
  padding: 1.1em;
  font-size: 0.9em;
  overflow: auto;
}

blockquote {
  font-style: italic;
  margin: 0;
  border-left: 0.1rem solid #e00000;
}

blockquote,
#article-footer {
  padding: 0.5rem 1.2rem;
  font-size: 0.9rem;
  color: #222222;
  background-color: #dddddd;

  @media (prefers-color-scheme: dark) {
    color: #dddddd;
    background: #222222;
  }
}

.posts-list {
  h3 {
    margin: 0.5rem 0;
  }

  ul {
    margin: 0;
  }

  p {
    margin: 0.3rem 0 2.5rem 0;
  }
}