body {
    background-color:	#FF8A9D;
    color: 	#000000;
    padding: 2em;
    font-family: "Roboto", sans-serif;
}

a {
    color:#000000
}

.small {
    font-size: .5em 
    
}

a:hover { 
    background-color:	#000000;
    color: #FF8A9D;
    
}

 img {
                  border: 5px solid black;
                  border-radius: 30px;
              }
              
              
              h1 {
                  font-size: 2.5em ;
                  text-align: center;
                  background-image: linear-gradient( to right, red, orange, 
                  yellow, #31F261, #B8CFEA, #77EBF3, #EBBCEA);
                  font-family:"Roboto", sans-serif;
                  
                  text-shadow:0px 3px 2px white ;
                 
              }
              
.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: 42%;
  margin: .5em;
  padding: 1em;
}

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

/* SLIDE IN FROM LEFT ONCE AND STOP IN NEW POSITION */
/* 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;
   /*  WITHOUT animation-fill-mode: forwards, THE IMAGE WILL RESET BACK TO THE LEFT MARGIN WHEN THE ANIMATION COMPLETES   */
   animation-fill-mode: forwards;
   display: inline-block;
}