body {
  /* Add styles here! */
  /* Add styles here! External CSS (in its own file)*/
  color: darkblue;
  background-image: url(download.gif); /*gif background*/
  background-size: cover; /*makes the entire background take up the entire space, even when opening it in a smaller view*/
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* makes height the full view*/
  margin: 0;
  font-family: Courier;

}

.container {
  max-width: 800px;
  width: 85%;
  padding: 30px;
  border-radius: 10px;
  background-color: #abc4ed;
  border: 20px #334a9c ridge;
  vertical-align: middle;
}

.container2 {
  overflow: hidden;
  background-color: #333;
}


.somefacts span {
  display: inline-block;
  animation: wave 2s ease-in-out infinite; /*makes animation go on forever...*/
}

.somefacts span:nth-child(1) { /*goes over each letter, nth child 1 is F, so on, so on*/
  animation-delay: 0s;
}

.somefacts span:nth-child(2) {
  animation-delay: 0.2s; /*delay causes each letter to go after each one*/
}

.somefacts span:nth-child(3) {
  animation-delay: 0.4s;
}

.somefacts span:nth-child(4) {
  animation-delay: 0.6s;
}

.somefacts span:nth-child(5) {
  animation-delay: 0.8s;
}

.somefacts span:nth-child(6) {
  animation-delay: 1.0s;
}

.somefacts span:nth-child(7) {
  animation-delay: 1.2s;
}

.somefacts span:nth-child(8) {
  animation-delay: 1.4s;
}

.somefacts span:nth-child(9) {
  animation-delay: 1.6s;
}

.somefacts span:nth-child(10) {
  animation-delay: 1.8s;
}
.somefacts span:nth-child(11) {
  animation-delay: 2.0s;
}



@keyframes wave {
    0%, 50% { 
        transform: translateY(0); /*controls how far it goes up*/
    }
    50% { 
        transform: translateY(-10px); /*controls how far it goes down*/
    }
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;

  
}