body {
    background-color:#3EFEE8;
    color:#000000;
    padding:2em;
      font-family: "Sriracha", cursive;
font-size: 150%;
    border-image: linear-gradient(125deg, red 0%, yellow 25%, green 50%, blue 75%, purple 100%) 1;
    border-width: 4px;
}

a {
    color:#000000;
}

img {   
  border: 5em inset #17529c;
 
  
}   

.float {
    float: right;
}

h1 {
      font-family: "Gravitas One", serif;

}



.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}


.box img {
  max-width: 89%;
  display: block;
  margin: auto;
  border: 30px inset #17529c;
}

.box {
  /* PLAY WITH THE FLEX-BASIS TO SET THE SIZE OF THE BOXES */
  flex-basis: 25%;
  margin: 1.5em;
  border: 1px solid black;
  border-radius: 10px;
  padding: 1em;
}

/* SIDE TO SIDE */
/* Create the animation... */
@keyframes breathe {
   0% {
      transform: scale(0.5) skew(-15deg);
   }
   100% {
      transform: scale(1) skew(15deg);
   }
}

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