html {
  overflow-y: scroll;
}

body {
  font-size: 16px;
  margin: 50px auto;
  width: 650px;
  text-align: left;
}

.main {
  max-width: 42rem;
  margin: 15px auto;
}


footer {
  text-align: right;
}

a {
  text-decoration: none;
}

a.link-as-text {
  color: inherit;
}

a:hover {
  text-decoration: underline;
}

li {
  margin-bottom: 0.25rem;
}

h2,
h3,
h4 {
  margin: 0;
}

blockquote {
  width: 70%;
  background-color: lightgray;
}

aside {
  padding: 0.25rem;
  font-size: 10pt;
  float: right;
  width: 18.75%;
  text-align: right;
}

code {
  font-size: 12pt;
}

pre {
  font-size: 9pt;
  border: 1px solid black;
  padding: 1rem;
}

strong {
  font-style: italic;
}

div.index {
  padding: 0.25rem 0.5rem;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

div.index a {
  color: inherit;
}

div.content {
  text-align: left;
}

div.content hr {
  float: left;
  width: 75%;
}

div.content p {
  width: 75%;
}

div.focus p {
  font-style: italic;
}

@media only screen and (max-width: 800px) {
  body {
    width: 400px;
  }
}

/*
@media (prefers-color-scheme: dark) {
  body {
    background-color: rgb(42, 43, 46);
    color: white;
    transition: background-color cubic-bezier(1, 0, 0, 1);
    transition: color cubic-bezier(1, 0, 0, 1)
  }

  a {
    color: lightblue;
    transition: color 2s;
  }

  blockquote {
    background-color: dimgrey;
    transition: background-color 2s;
  }

  pre {
    border: 1px solid white;
    transition: border 2s;
  }

  div.index {
    border: 1px solid white;
    transition: border 2s;
  }
}
*/