/* General Styling */

body {
  font-size: 18px;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  background-color: black;
  margin-top: 2rem;
}

h1, h2, h3, p {
  font-weight: normal;
  color: white;
}

hl1 {
  background-color: red;
}

hl2 {
  background-color: blue;
}

hl3 {
  background-color: green;
}

.flex-row {
  display: flex;
  justify-content: center;
}

/* End General Styling */

/**
 * Animation Code
 *
 * See more specs on MDN.
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
 *
 */

/* Fade in Once for Three Seconds */
.fade-in-1 {
  animation: 3s 1 fadeIn; /* Do the fade. */
}

/* Fade in Ease in Twice for Three Seconds with One Second Delay */
.fade-in-1-ease {
  opacity: 0; /* Be invisible first. */
  animation: 3s ease-in 1s 2 fadeIn; /* Do the fade. */
  /* This ensures that the item to be animated 
     is hidden at the beginning, then stays
     visible at the end (persists).*/
  animation-fill-mode: forwards;  
}

/* The fading in part. Reused above. */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Slide up Ease in Once for Three Seconds with Two Second Delay */
.slide-up-1-ease {
  opacity: 0; /* Be invisible first. */
  animation: 3s ease-in 2s 1 slideUp; /* Do the slide. */
  /* This ensures that the item to be animated 
     is hidden at the beginning, then stays
     visible at the end (persists).*/
  animation-fill-mode: forwards;  
}

/* The sliding up part. Reused above. */
@keyframes slideUp{
  0% {
    opacity:0;
    transform:  translate(0px,25px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}