/*  .slide {
  text-align : center;
  transform  : translateX(-100vw);
  animation  : 2s slideIn forwards;
  }  
.second {
  margin-top      : -.8em;
  animation-delay : 2s;
  } 
 @keyframes slideIn {
  0%   { transform : translateX(-100vh); }
  100% { transform : translateX(-0);      }
  } */ 
/*******************************************************************/

  h1 {
    margin-bottom: 20px;
  } 

  hr {
    border-top: 10px dashed rgb(17, 0, 248);
    border-radius: 5px;
  }

/*******************************************************************/



/*  .slide {
  text-align : center;
  transform  : translateX(-100vw);
  animation  : 2s slideIn ;
  transition-delay: 3s;
  }  
.second {
  margin-top      : -.8em;
  animation-delay : 2s;
  } 
.third {
   margin-top      : -.8em;
   animation-delay : 4s;
   }


 @keyframes slideIn {
  0%   { transform : translateX(0); }
  90% { transform : translateX(-100vw);}
  } */ 

  

  .slide {
    text-align : center;
    transform  : translateX(-100vw);
    animation  : 2s slideIn ;
    transition-delay: 10s;
    }  
  .second {
    margin-top      : -.8em;
    animation-delay : 2s;
    animation: 5s slideIn;
    } 
  .third {
     margin-top      : -.8em;
     animation-delay : 4s;
     animation: 7s slideIn;
     transition: transform 10s ease-in-out;
     }
  
  
   @keyframes slideIn {
    90%   { transform : translateX(-10vw); 
      transition: transform 2s ease-in-out;}
    0% { transform : translateX(0);}
    }

div.slide-left {
  width:100%;
  overflow:hidden;
}
div.slide-left p {
  animation: slide-left 10s;
}

@keyframes slide-left {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}


div.slide-right {
  width:100%;
  overflow:hidden;
  animation-fill-mode: forwards; /* This didn't work as intended even using forwards*/
}
div.slide-right p {
  animation: 10s slide-right;
}

@keyframes slide-right {
  from {
    margin-left: -100%;
    width: 300%; 
  }

  to {
    margin-left: 5%;
    width: 100%;
  }
}