@keyframes typing {
    from { width: 100% }
    to { width: 0 }
    
}


.title{
	position:center;
	font-family: 'Kranky', cursive;
	font-size:3em;
	color:#7BCEEF;
	;
}
.container {
  position: relative;
  font-family: 'Kranky', cursive;
}

.typing1 {
  position: center;
  top: 0;
  margin: 0;
  z-index: -1;
  padding-top:200px;


}

.hiders1 {
  margin: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.hiders1 p {
  position: relative; 
  clear: both; 
  margin: 0;
  float: right; 
  width:0; 
  background: white; 
  animation: typing 3s steps(531, end);
  animation-fill-mode: both;  
  padding-top:200px;
}
  
.hiders1 p:nth-child(2) {
  animation-delay: 3s;
}
.hiders1 p:nth-child(3) {
  animation-delay: 6s;
}
.hiders1 p:nth-child(4) {
  animation-delay: 9s;
}
.hiders1 p:nth-child(5) {
  animation-delay: 12s;
}


.typing2 {
  position: center;
  top: 0;
  margin: 0;
  z-index: -1;
  padding-top:70px;


}

.hiders2 {
  margin: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.hiders2 p {
  position: relative; 
  clear: both; 
  margin: 0;
  float: right; 
  width:0; 
  background: white; 
  animation: typing 3s steps(531, end);
  animation-fill-mode: both;  
  padding-top:70px;
}


}
.hiders2 p:nth-child(6) {
  animation-delay: 15s;
}
.hiders2 p:nth-child(7) {
  animation-delay: 12s;
}
.hiders2 p:nth-child(8) {
  animation-delay: 14s;
}
.hiders2 p:nth-child(9) {
  animation-delay: 16s;
}