/* https://www.swyx.io/css-100-bytes */
html {
  background-color: lightblue;
  font-size: large;
}

main {
  max-width: 70ch;
  padding: 3em 1em;
  padding-bottom: 0; /* Reduce space between <main> and <footer> */
  margin: auto;
  line-height: 1.5;
}

h1 {
  font-size: 2em; /* Even when in containers like <article> or <section> */
  text-align: center;
}

.blurb {
  display: flex;
}

@media (max-width: 768px) {
  .blurb {
    flex-direction: column-reverse;
  }
}
.blurb > :first-child {
  text-align: center;
  flex-basis: 50%;
}

.blurb > img:nth-child(2) {
  flex-basis: 50%;
  max-width: 40%;
  max-height: auto;
}

.colored-list-container {
  display: flex;
  flex-direction: column;
  /* If the first child of a colored-list-container is a div, then it is
   * probably containing a header and an RSS image link. Style such that the
   * heading and the RSS image link are on the same horizontal row, above the
   * bordered list.
   */
}
.colored-list-container > div:first-child {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-right: 10px;
}
.colored-list-container > div:first-child > a {
  /* Center vertically */
  margin-top: auto;
  margin-bottom: auto;
}
.colored-list-container > :nth-child(2) {
  margin-top: 0;
}

.links {
  background-color: moccasin;
  border: 2px solid tan;
  border-radius: 5px;
  padding-top: 0.5em;
  padding-right: 1em;
  padding-bottom: 0.5em;
}

img, video {
  max-width: 480px;
  max-height: 360px;
  width: auto;
  height: auto;
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid grey;
  border-radius: 5px;
}

.unbordered, .rss-link > img {
  border: none;
}

pre {
  background-color: #282a36;
  color: white;
  border: 2px solid grey;
  border-radius: 5px;
}

span.ps1 {
  font-weight: bold;
  color: #50fa7b;
}

hr {
  /* Different browsers respond to different attributes for this element.
   * As per this StackOverflow answer:
   * https://stackoverflow.com/questions/6382023/changing-the-color-of-an-hr-element/12399447#12399447
   */
  background-color: black;
  border-color: black;
  color: black;
}

footer {
  font-weight: bold;
  margin: auto;
  max-width: 70ch;
}

.blog-posts {
  background-color: skyblue;
  border: 2px solid cornflowerblue;
  border-radius: 5px;
  padding-top: 0.5em;
  padding-right: 1em;
  padding-bottom: 0.5em;
}

.blog-posts .date {
  float: right;
}