body {
                                background-color:#F4DDAF3; 
                                color:#3A4D14;
                                font-family: "Quicksand", sans-serif;
                                font-size: 1.5em; 
                                Padding: 2em;
                        }
                        
                        h1 {
                            font-family: "Delius", cursive;
                            font-size: 3em; 
                            text-align: center;     
                        }
                        
                        h1 :hover {
                            cursor:  pointer;
                            
                        }
                          
                              a {
                            color:#3A4D14;  
                        }
                        a:hover{ 
                            background-color: #FBBBB9;
                        color: #3A4D14;
                        border-radius: 10px;
                        }
                        img {
    border: 1em solid  #FBBBB9;  
                        }       
                        
                        .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 */
  flex-basis: 25%;
  margin: 1.5em;
border: 1px #FBBBB9   ;   
  border-radius: 10px;
  padding: 1em;
}
    
.box img {
  max-width: 90%;
  display: block;
  margin: auto;
}

@keyframes bounce {
   from {
      transform: translateY(0px);
   }
   to {
      transform: translateY(-20px);
   }
}

/* ...and then apply it: */
.bounce {
   animation-duration: 350ms;
   animation-name: bounce;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-timing-function: cubic-bezier(0.2, 0.65, 0.6, 1);
}