body {
    background-color: #9EF0EA;
    color: 	#000000;
    border: .7em solid black; 
    padding: 2em;
    margin:1em;
    background-image: linear-gradient(to bottom right, #9EF0EA, #02A7DE);
    font-family: "Lobster Two", sans-serif;
}



a {
    color:#A10D0D;
}



img {
border:5px  solid black;
border-radius:20px;
}




 .small {
 font-size: .5em;
}
  
 
    
h1 {
font-size:2.5em ;
text-shadow:1px 4px 2px white;
}   



li {
line-height: 1.5em;
}

   
a:hover {
background-color: #AB9C9C;
color: 	#9EF0EA;
border-radius: 10px;
} 
    
    
.container {
  display: flex;
  align-items: center;
  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: 25%;
  margin: .5em;
  border: 1px solid black;
  border-radius: 10px;
  padding: 1em;
}

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

/* 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;
}