body {
        background-color: 	#B8FAFF;    
        color: 	#000000;
        border: 1em double #000000;
        padding: 2em;
         <link rel="stylesheet" href="style.css" type="text/css" media="all" />
          font-family: "Roboto", sans-serif;
    font-size: 1.2em;
        }   
        
        a {
        color: #000000;    
        }
        
        img {
            border: .5em ridge #000000;
            border-radius: 5em;
        }
        
        h1 {
              font-family: "Oswald", sans-serif;
    
        }   

        
        
      .container {
      display: flex;
      align-items: center;
      justify-content: center: space-around;
      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: 90%;
      display: block;
      margin: auto;
    }
    
    
    /* FORMATTING THE CITATIONS - DON'T COPY THIS IF YOU DON'T HAVE A "citation" CLASS */
    .citation {
      text-align: center;
    }
    
    /* 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;
}