body {
    background-color: 	#DEB887;
    color: 	#000000;
      font-family: "Kirang Haerang", system-ui;
      font-size: 1.5em;
      padding: 2em;
}



h1  {
     font-family: "Rubik Bubbles", system-ui;
     font-size: 3.2em;
     text-align: center;
}


a:hover {
    background-color:#000000 ;
    color:#DEB887	;
    border-radius:10px;
    cursor:wait;
}

a {
 color: 	#000000;
}  

img {
    border: .5em dotted #000000;
    border-radius: 50px;
}

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

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


/* SIDE TO SIDE */
/* Create the animation... */
@keyframes breathe {
   0% {
      transform: scale(0.5);
   }
   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;
}