* {
    margin:0;
}

body {
  background-color: 	#8CBABA ;
  color: 	#161664  ;
  border: 2em ridge #094a2d;
  padding: 2em;
    font-family: "Merienda", cursive;
 background-image: linear-gradient(to bottom right, #8CBABA,  #c196d4);
 background-image: url('https://images.unsplash.com/photo-1701028981218-94475781b17d?q=80&w=435&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
background-repeat: no-repeat;
    background-size: cover;
    
    
}

main { background-color: 	#8CBABA ;
    
}



  




img {
    border: 1.7em groove  #94eb95;
   
     border-image: linear-gradient(125deg, red 0%, yellow 25%, green 50%, blue 75%, purple 100%) 1;
        border-width: 4px;
    
}




h1 {
    font-family: "Shadows Into Light", cursive;
        border: 1px solid white;
            
}

a {
    color: #270C21 ;
    

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

/* SETTING THE IMAGE WIDTH HERE INSTEAD OF IN HTML. REMOVE WIDTH="XXX%" FROM THE HTML IMAGE TAGS */
.box img {
  max-width: 30%;
  display: block;
  margin: auto;
}

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




/* SLIDE IN FROM LEFT ONCE */
/* Create the animation... */
@keyframes slide-in-left {
   from {
      transform: translateX(-100%);
   }
   to {
      transform: translateX(0%);
   }
}

/* ...and then apply it: */
.slide_left {
   animation-name: slide-in-left;
   animation-duration: 1500ms;
   display: inline-block;
}


@keyframes slide-in-right {
   from {
      transform: translateX(200%);
   }
   to {
      transform: translateX(0%);
   }
}

/* ...and then apply it: */
.slide_right {
   animation-name: slide-in-right;
   animation-duration: 1500ms;
   display: inline-block;
}