body {
    background-color:#FFFFFF;
    color:#1C5F6D;
    padding: 2em;
    border: .7em double darkblue;
}

a {
    color:#1C5F6D;
}

a:hover {
        background-color:#1C5F6D;
    color:#FFFFFF;
    padding: .2em;
}


   img {
           border: .7em ridge darkblue;
           border-radius: 2em;
       } 
       
       
      h1 {
          font-size: 2.5em;
          text-align: center;
          background-image: linear-gradient(125deg, #F7F3F3 0%, #070D64 25%, #000000 50%, #3602F2 75%, #0CC6DF 90%);
    border-width: 4px;
         font-family: "Pacifico", cursive;
         color: #ffffff;
         text-shadow: 10px 15px 5px black;
      } 
      
      li{
          line-height: 2em ;
      }
      
      
      .tiny {
          font-size: .5em;
      }
      .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;
  
  padding: 1em;
}

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

/* WIGGLE */
/* Create the animation... */
@keyframes wiggling {
   0%,
   7% {
      transform: rotateZ(0);
   }
   15% {
      transform: rotateZ(-15deg);
   }
   20% {
      transform: rotateZ(10deg);
   }
   25% {
      transform: rotateZ(-10deg);
   }
   30% {
      transform: rotateZ(6deg);
   }
   35% {
      transform: rotateZ(-4deg);
   }
   40%,
   100% {
      transform: rotateZ(0);
   }
}

/* ...and then apply it: */
.wiggle {
   animation-duration: 2s;
   animation-name: wiggling;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   display: inline-block;
}