@media (prefers-color-scheme: dark) {
  body {
    color: #ebe2c0;
    background: #111116;
  }

  a {
    color: #ebe2c0;
  }

  a:visited {
    color: #877a61;
  }

  footer {
    background: #202834;
  }

  .feed-icon {
    fill: #ebe2c0;
  }

  input,
  button {
    opacity: 70%;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background: #fef7ea;
    color: #121212;
  }

  a {
    color: #121212;
  }

  a:visited {
    color: #161616ff;
  }

  footer {
    background: #cac8c0;
    color: #343434;
  }

  .feed-icon {
    fill: #121212;
  }
}

@media screen and (min-width: 40em) {
  .footer-row {
    display: grid;
    grid-template-columns: auto auto;
  }
}

body {
  font-family:
    Georgia,
    Times,
    Times New Roman,
    serif;
  margin: 0;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

footer {
  text-align: center;
  padding: 2em 1em 1em;
  margin-top: 2em;
}

ol,
ul {
  list-style: none inside;
  padding: 0;
}

li {
  padding: .5em;
  font-size: 1.5em;
}

h1 {
  font-size: 3em;
}

form {
  margin-bottom: 2em;
}

input[type="text"] {
  padding: .5em .6em;
  border: 1px solid #ccc;
  border-radius: 4px;
  vertical-align: middle;
}

button {
  padding: .5em 1em;
  color: rgba(0, 0, 0, .8);
  border: none transparent;
  border-radius: 2px;
  vertical-align: middle;
}

.container {
  max-width: 1024px;
  padding: 1em;
  margin: auto;
}

.c {
  font-size: .5em;
}

.footer-row {
  padding: 1em;
}

.ut {
  font-size: .5em;
}

.subtitle {
  font-style: oblique;
  font-size: .75em;
}

.placeholder {
    height: 1em;
    margin: 0.5em 0;
    background: #eee;
    border-radius: 4px;
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}