body {
    background-color: #FFB6C1 ;
    color: #6C2E70 ;
    font-family: "Lobster Two", sans-serif;
    border: 2px dotted purple;
    padding:3em;
    margin:1em ;
    
}

a {
    color:#70003C;
}

    img {
        border: 2px solid purple;
        border-radius: 10px ;
            
        }
        
   .small  {
       font-size: .6em;
   }
   
   
 a:hover {
    background-color: #6C2E70 ;
    color: #FFB6C1 ;
     padding: .2em;
     border-radius: 10px;
 }
  
  
    h1 {
            font-size:25px  ;
        text-align: center;
        
        font-family: "Lobster Two", sans-serif;
        background-image: linear-gradient(to right, #DCEC5F,#F6DAF0)
        }  
        
        .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: 2px dotted purple;
  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: 85%;
  display: block;
  margin: auto;
}

/* SLIDE IN FROM LEFT ONCE */
/* Create the animation... */
@keyframes slide-in {
   from {
      transform: translateX(-700%);
   }
   to {
      transform: translateX(0%);
   }
}

/* ...and then apply it: */
.slide_left {
   animation-name: slide-in;
   animation-duration: 3s;
   display: inline-block;
}