body {
    background-color: 	#006600;
    color: #FFFFFF;
    border: 2em ridge purple;
padding: 1em;
margin: 1em;
  font-family: "Lexend", sans-serif;

}

a {
    color: #FFFFFF;
}

img{
    border-radius: 20%;
    padding: 2em;
}

h1 {
        font-family: "Irish Grover", system-ui;
}

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

.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: 40%;
  margin: 1.5em;
  border: 1px solid black;
  border-radius: 10px;
  padding: 1em;
}

/* SIDE TO SIDE */
/* Create the animation... */
@keyframes wiggle {
   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: wiggle;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
}

/* SIDE TO SIDE */
/* Create the animation... */
@keyframes breathe {
   0% {
      transform: scale(0.8);
   }
   100% {
      transform: scale(1);
   }
}

/* ...and then apply it: */
.breathe {
   animation-duration: 3s;
   animation-name: breathe;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-timing-function: ease-in-out;
}

/* SIDE TO SIDE */
/* Create the animation... */
@keyframes side {
   from {
      margin-left: 0%;
   }
   to {
      margin-left: 70%;
      /* 70% works because the image width is set to 30% - update your percent according to your element's width */
   }
}

/* ...and then apply it: */
.sidetoside {
   animation-duration: 3s;  
   animation-name: side;
   animation-iteration-count: infinite;
   animation-direction: alternate;
   animation-timing-function: linear;
}

/* SIDE TO SIDE */
/* Create the animation... */
@keyframes bounce {
   from {
      transform: translateY(0px);
   }
   to {
      transform: translateY(-30px);
   }
}

/* ...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);
}