body {
  font-family: sans-serif;
  text-align: center;
  background-color: white;
  background-image: url("mountaintop.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  background-position: center;
  height: 100vh;
  animation-name: start;
  animation-duration: 2s;
}

.main {
  padding-top: 50vh;
  display: flex;
  margin: auto;
}

.poem {
  background: rgba(0, 0, 0, 0.4);
  color: white;
  margin: auto;
  padding: 0 5vw;
}

.first {
  animation-name: start;
  animation-duration: 4s;
}

.second {
  animation-name: enter;
  animation-duration: 5s;
}

.third {
  animation-name: enter;
  animation-duration: 7s;
}

.fourth {
  animation-name: enter;
  animation-duration: 9s;
}

.fifth {
  animation-name: enter;
  animation-duration: 11s;
}

.sixth {
  animation-name: enter-red;
  animation-duration: 13s;
}

@keyframes start {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 100%;
  }
}

@keyframes enter {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 100%;
  }
}

@keyframes enter-red {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
    color: red;
  }
  70% {
    opacity: 1;
    color: red;
  }
  100% {
    opacity: 1;
    color: white;
  }
}