* {
    margin: 0;
}


body {
    background-color: #000000;  
    background-image: url('https://images.unsplash.com/photo-1720832842792-24fb9f061bc2?q=80&w=1174&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    background-repeat: no-repeat;
    background-size: cover;
    color: #FFFFFF;
    
    border: 1em ridge black;
    
 padding: 1.5em;   
  
}


main {
    background-color: #000000;  

margin: auto;
}




img {
border: 0.2em solid #FFFFFF;
border-radius: 2em;
}

h1 {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 3em;  
    
  background-image: linear-gradient(to top, red, yellow);
text-shadow: 3px 3px 2px black;
}



a {
    color:#A8A8FF ;
}

p {
    text-indent: 40px;
}

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

.box {
  /* PLAY WITH THE FLEX-BASIS TO SET THE SIZE OF THE BOXES */
  flex-basis: 45%;
 
 
  padding: 1em;
}




/* SIDE TO SIDE */
/* Create the animation... */
@keyframes slide-in {
   from {
     transform: translateX(-100%);
   }
   to {
     transform: translateX(24%);
   }
   
  


}

/* ...and then apply it: */
.slide_left {
   animation-duration: 3s;
   animation-name: slide-in;
   display: inline-block;
   
 animation-fill-mode: forwards;
}