* {
    margin: 0;
}


body{
    background-color: #00A8A8 ;
    background-image: url('https://images.unsplash.com/photo-1700170726155-fe844921b8b3?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    background-repeat: no-repeat;
    background-size: cover;
   
    color: #000000 ;
    border: 0.5em solid #145f80;
    padding: 1em;
    font-family: "Tinos", serif;
    font-size: 1.5em;
    
} 
 
main {  background-color: #00A8A8cc ;
    width:80%;
    margin: auto;
}


img { 
    border: 0.5em solid #145f80;
    border-radius: 10px;
}

h1 {
     font-family: "Shadows Into Light Two", cursive;
     font-size: 2em;
     text-align: center;
      background-image: linear-gradient(to bottom right, #65adad,#b55573, white);
      text-shadow: 3px 3px 2px white;

  
}



a {
    color:#00001F;
    
}

.container {
  display: flex;
  align-items: flex-wrap;
  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: 100%;
  display: block;
  margin: auto;
}

.box {
  /* PLAY WITH THE FLEX-BASIS TO SET THE SIZE OF THE BOXES */
  flex-basis: 30%;
  margin: 1.5em;

}







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

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







/* SLIDE IN FROM right ONCE */
/* Create the animation... */
@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;
}


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

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

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

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



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

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