body {
background-color: #AB1212;
color: #FFFFFF; 
 font-family: "Amatic SC", sans-serif;
 padding: .75em;
}

a {
    color: #FFF3F0;
}

 img {
                    
            border: 20px ridge #00008A;
            border-radius: 5px;
             
         }
         
 .Shoes {
     font-size: .80em;
 }
 
 a:hover {
     background-color:#8497E1 ;
     color:#AB1212;
     border-radius: 5px;
 }
            
        
        h1  { 
         
        font-size: 4 em ;    
        text-align:center;
  background-image: repeating-radial-gradient(#8497E1, #00008A, #8497E1 50%);
  text-shadow: 0px 5px 4px black;
        
        
        font-size: 35px ;    
        text-align:center;

 font-family: "Amatic SC", sans-serif;
 padding: .75em;
  
        }
        .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 - DON'T GO OVER 45% */
  flex-basis: 25%;
  margin: .5em;
  border: 1px solid black;
  border-radius: 10px;
  padding: 1em;
}

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

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

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

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

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