* {
  font-family: sans-serif;
}
body {
  background-color: white;
  color: black;
  font-family: sans-serif;
  width: 95%;
  margin: 1ex auto;
}
img {
  width: 100%;
}
nav ul {
  background-color: #CCC;
  border: 1px solid black;
  left: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
  top: 0;
  width: 100%;
}
nav ul li {
  padding: 0 0.5em;
}
nav ul li:hover {
  background-color: #999;
  cursor: pointer;
}
footer {
  border-top: 1px solid black;
  clear: both;
  font-size: 80%;
  margin: 0 auto;
  text-align: center;
}
h1, h2, h3, hr {
  clear: both;
}
div.caption p {
  font-size: 80%;
}

@media (prefers-color-scheme: dark) {
    body {
        background-color: #333;
        color: #CCC;
    }
    a {
        color: #99F;
    }
    a:visited {
        color: #D66;
    }
    nav ul {
        background-color: #223;
        border: 0 none transparent;
    }
    nav ul li:hover {
        background-color: #333;
    }
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  body {
    margin-bottom: 0;
    margin-left: 30%;
    margin-right: 5%;
    margin-top: 0;
    width: 65%;
  }
  div.caption, img {
    box-sizing: border-box;
    float: right;
    padding-bottom: 1ex;
    padding-left: 1ex;
    width: 50%;
  }
  div.caption img {
    float: none;
    padding: 0;
    width: 100%;
  }
  nav ul {
    border: 0px none transparent;
    border-right: 1px solid black;
    height: 100%;
    left: 0;
    padding-left: 0.5em;
    padding-top: 2ex;
    position: fixed;
    top: 0;
    width: 24%;
  }
}