body {
    background-color: #9EF0EA;
    color: #940000;       
    font-family:  "Italianno", cursive;
    padding: 2em;

}

a {
    color:  #990000;

    
    
} 

img {
        border:1px solid black;
        border-radius: 20px;
        padding: .5em;
    }
    
    .small{
        font-size: .5em;
        
    }
    
    a:hover {
    background-color: #940000;
    color:#9EF0EA;  
   border-radius:10px ;
    }
        
        h1  {
            font-size:2.5em 
            text-align:center;  
         background-image: linear-gradient(to bottom right,#9EF0EA, #930B0B);
         text-shadow: 2px black;
            
          font-family: "Italianno", cursive;;
          
                 
        } 
        
        .container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  border: 1px solid black;
}

.box {
  /* PLAY WITH THE FLEX-BASIS TO SET THE SIZE OF THE BOXES - DON'T GO OVER 45% */
  flex-basis: 30%;
  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;
}/* BOUNCE */
/* Create the animation... */
@keyframes bouncing {
   from {
      transform: translateY(0px);
   }
   to {
      transform: translateY(-20px);
   }
}

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