body {
    background-color:#FFBDC6;
    color: 	#69115E;
    font-family: "Piazzolla", serif;
     border: 2px solid black;
     color:#000000;
    padding:2em;
}

a {
    color:002F9E;
}

.small {
    font-size: .5em;
}

a:hover {
    background-color:69115E ;
    color:;
} 

img {
    border: 2px solid black;
}
    
    h1{
      font-size: 2.5em
      text-align: center;
      background-image: linear-gradient(to right, red,orange,yellow,#31F261,#B8CFEA,#77EBF3,#EBBCEA); 
      text-shadow: 0px 2px 2px white;
}
     
        
    }
    
    li {
        line height:2.5em;
    }
    


.container {
  display: flex;
  align-items: flex-start;
  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;
}

/* BOUNCE */
/* Create the animation... */
@keyframes bouncing {
   from {
      transform: translateY(0px);
   }
   to {
      transform: translateY(-20px);
   }
}

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