*{
    margin:  0;
	padding: 0;
	border:  0;
	outline: 0;	
	vertical-align: baseline;
	background:     transparent;			        
	box-sizing:     border-box;
	z-index:        1;	
}



html, body {
    height:   100%;
    position: relative;	
}

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {    
    border-radius: 0;
}


/* index */

#container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;

	font-family: "Madimi One", sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#fff;
	font-size: 20pt;
	letter-spacing: 1px;
	
	background: linear-gradient(153deg,#ff0000,#3b0000);
	background-size: 120% 120%;
	animation: gradient-animation 3s ease infinite;

}


  
@keyframes gradient-animation {
	0% {
	  background-position: 0% 50%;
	}
	50% {
	  background-position: 100% 50%;
	}
	100% {
	  background-position: 0% 50%;
	}
}

div {
	display:inline-block;
	overflow:hidden;
	white-space:nowrap;
	
  }
  
  div:first-of-type {    /* For increasing performance 
						 ID/Class should've been used. 
						 For a small demo 
						 it's okaish for now */
	animation: showup 7s infinite;	
	
  }
  
  div:last-of-type {
	width:0px;
	animation: reveal 7s infinite;
	
  }
  
  div:last-of-type span {
	margin-left:-355px;
	animation: slidein 7s infinite;
  }
  
  @keyframes showup {
	  0% {opacity:0;transform: rotate(180deg);}
	  5% {opacity:0.5;}
	  10% {opacity:1;transform: rotate(180deg);}
	  20% {opacity:1;transform: rotate(0deg);}
	  80% {opacity:1;}
	  100% {opacity:0;}
  }
  
  @keyframes slidein {
	  0% { margin-left:-800px; }
	  20% { margin-left:-800px; }
	  35% { margin-left:0px; }
	  100% { margin-left:0px; }
  }
  
  @keyframes reveal {
	  0% {opacity:0;width:0px;}
	  20% {opacity:1;width:0px;}
	  30% {width:355px;}
	  80% {opacity:1;}
	  100% {opacity:0;width:355px;}
  }