body,
html, a, img {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img { border: none; }
a { text-decoration: none; }

#logo {
  position: absolute;
  left: 35%;
  top: 60%;
  z-index: 9;
}
.entry {
  color: #fff;
  font-family: Verdana, sans-serif;
  font-weight: 400;
  font-size: 1.2em;
  padding: 1em;
}
.entry:hover {
  color: #bbb;
}
.menu {
  display: flex;
  flex-direction: row;
  background-color: rgba(0, 0, 0, 0.5);
}

#backdrop-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: transparent url(images/01.png);
  opacity: 0.5;
  z-index: 0;
}

#backdrops { position: relative; }
#backdrops img {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: -1;
  /* background-position: left; */
  object-fit: cover;
  object-position: left center;
  animation-name: cross-fade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  /* 
  Adapted from http://css3.bradshawenterprises.com/cfimg/
    a = presentation time: 3s
    b = cross-fading: 1.5s
    total duration = (a + b)*n : 4.5s * 4 = 18s
    delay = a + b
  */
  animation-duration: 18s;
}
#backdrops img:nth-of-type(4) {
    animation-delay: 13.5s;
    object-position: center center;
    z-index: -4;
}
#backdrops img:nth-of-type(3) {
    animation-delay: 9s;
    object-position: center center;
    z-index: -3;
}
#backdrops img:nth-of-type(2) {
    animation-delay: 4.5s;
    z-index: -2;
}
#backdrops img:nth-of-type(1) {
    /* animation-delay: 0; */
}

@keyframes cross-fade {
  0% { opacity: 1; } 
  17% { opacity: 1; }
  25% { opacity: 0; }
  92% { opacity: 0; }
  100% { opacity: 1; }
}

.optional {
  display: inline;
}
@media (max-width: 480px) {
  /* mobile */ 
  #backdrop-overlay { display: none;}
  #logo { top: 15%; left: 5%; width: 100vw; }
  #logo img { width: 90vw; }
  .menu { display: inline-flex;}
  .entry { font-size: 1.3rem; margin: 0.4rem 0; padding: 1rem; }
  .optional { display: none; }
}