/* CSS */


  * {
	margin: 0;
	padding: 0;
  }

  section {
  	        width: 12vw;
  	        height: 100vh;
  	        float: left;
  }

  /* HERE ARE THE CSS ANIMATIONS */

 @keyframes fade-in {
 	0%    {opacity: 0;}
 	100%  {opacity: 1;}
 }

   .fade-in {
   	   animation-name: fade-in;
   	   animation-duration: 1s;
   	   animation-fill-mode: backwards;
   
   }


   .fade-two {
   	   animation-delay: 1s;
   }

    .fade-three {
    	animation-delay: 2s;
    }

    .fade-four {
    	animation-delay: 3s;
    }

.fade-five {
    	animation-delay: 4s;
    }

    .fade-six {
    	animation-delay: 5s;
    }

.fade-seven {
    	animation-delay: 6s;
    }

    .fade-eight {
    	animation-delay: 7s;
    }


  /* CSS COLOR CLASSES */

  .red {
  	background-color: red;
  }

  .orange {
  	background-color: orange;
  }

  .yellow {
  	background-color: yellow;
  }

  .green {
  	background-color: green;
  }

  .cyan {
  	background-color: cyan;
  }

  .blue {
  	background-color: blue;
  }

  .purple {
  	background-color: purple;
  }

.magenta {
  	background-color: magenta;
  }