body {
     background-color: #800000;
     color: #00FFE1 ;
     border:2em double #212344;
     padding:1em;
       font-family: "Sriracha", cursive;
       font-size:4em;
 }
 
 a {
     color: #DDF240;
 }
 
 img{
     border: 2em groove #104322;
     border-radius:20px;
 }
 
 h1 {
       font-family: "Lexend", sans-serif;

 }
 
 .container {
  display: flex;
  align-items: flex start;
  justify-content: center;
  flex-wrap: wrap;
}

.box {
  /* PLAY WITH THE FLEX-BASIS TO SET THE SIZE OF THE BOXES - DON'T GO OVER 45% */
  flex-basis: 45%;
  margin: .5em;
  border: 10em;
  border-radius:10em;
  padding: 1em ;
  text-align: center;
}

/* SETTING THE IMAGE WIDTH HERE INSTEAD OF IN HTML. REMOVE WIDTH="XXX%" FROM THE HTML IMAGE TAGS */
.box img {
  max-width: 80%;
  display: block;
  margin: auto;
}


/* FORMATTING THE CITATIONS - DON'T COPY THIS IF YOU DON'T HAVE A "citation" CLASS */
.citation {
  text-align: center;
}
 /* BOUNCE */
/* Create the animation... */
@keyframes bouncing {
   from {
      transform: translateY(90px);
   }
   to {
      transform: translateY(-40px);
   }
}

/* ...and then apply it: */
.bounce {
   animation-duration: 350ms;
   animation-name: bouncing;
   animation-iteration-count: 7;
   animation-direction: alternate;
   animation-timing-function: cubic-bezier(0.2, 0.65, 0.6, 1);
   display: inline-block;
}
/* SLIDE IN FROM LEFT ONCE */
/* Create the animation... */
@keyframes slide-in {
   from {
      transform: translateX(-100%);
   }
   to {
      transform: translateX(0%);
   }
}

/* ...and then apply it: */
.slide_left {
   animation-name: slide-in;
   animation-duration: 1500ms;
}