body {
    background-image: linear-gradient(to right,
    #FBACAC, #FBCCAC, #FBF8AC, #B9FBAC, #ACE7FB, #E6ACFB);

    color: #005474 ;
    border: 1em double 	#40E0D0  ;
    
    padding: 2em;

    font-family: "Mystery Quest", system-ui;

    font-size: 150%;
}

a {
     color: #990000 ;
}

.right {
    float: right;
}


img {
    border: 1.4em solid  #A80051 ;

  margin: 1em;  

    border-radius: 12em;
}



h1 {
      font-family: "Mountains of Christmas", serif;

}









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




.box img {
  max-width: 100%;
  display: block;
  margin: auto;
}



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













    /* SIDE TO SIDE */
/* Create the animation... */
@keyframes breathe {
   0% {
      transform: scale(0.5);
      border: 2em dotted yellow ;
   }
   
   20% {
       border: 2em dotted green  ;
   }
   
   40% {
       border: 2em dotted blue ;
   }
   
   60% {border: 2em dotted purple ;
   
       
   }
   
   80%{border: 2em dotted pink;
       
   }
   100% {
      transform: scale(1); 
      border: 2em dotted red ;
   }
}

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