Body{
    background-color: #8F9CA8  ;
    background-image: url('https://images.unsplash.com/photo-1529655683826-aba9b3e77383?q=80&w=465&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
    background-repeat: no-repeat;
    background-size: cover;
    color:	#000000 ;
    border: 0.3em solid #000000;
    padding: 1.5em;
      font-family: "Coming Soon", cursive;

}
main{
    background-color: #8F9CA8cc;
    width: 80%;
    margin: auto;
}

img {
    border: 2em double #3b606e;
}

h1 {
      font-family: "Imperial Script", cursive;
font-size: 6em;
text-align: center;
background-image: linear-gradient(to bottom right, #ABABAB ,#1C1C45 );
}


a {
    color:#030B16;
}
    



.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: 99.9%;
  display: block;
  margin: auto;
}

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

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

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