body {

background-color: black;
 overflow: hidden;




}

body:hover {

transition: 3s;

}
p {
    font-size: xx-large;
color: rgb(255, 0, 0);
    letter-spacing: 1000px;
    text-align: center;
    animation-name: a;
    letter-spacing: 100px;
    transition: 5s;
    animation-delay: 1s;
    animation-duration: 5s;
    animation-direction: reverse;
    animation-fill-mode: forwards;

}
p:hover {
    transition: 2s;
font-size: 100px;




}

.i {
font-size: 200px;



}
.i:hover {
 
transition: 5s;
font-size: -500px;


}

@keyframes a {
0% {
letter-spacing: normal;



}




}

div{
background-color: rgb(208, 4, 4);
width: 2000px;
height: 10px;
animation-duration: 1s;
    animation-name: div;
    animation-iteration-count: infinite;
      position: absolute; 
  top: 50px;  
  left: 0;     
    position: absolute; 
  top: 50px;   
  left: 0;     
   opacity: 0.3;
}
@keyframes div {

0%{
rotate: 90deg;
border-radius: 10px;

}


50%{

rotate: 180deg;
background-color: black;

}


100%{


rotate: 360deg;


}




}
.s{
background-color: rgb(208, 4, 4);
width: 2000px;
height: 10px;
animation-duration: 1s;
    animation-name: s;
    animation-iteration-count: infinite;
      position: absolute; 
  top: 50px;  
  left: 0;     
    position: absolute; 
  top: 500px;   
  left: 0;     
   opacity: 0.3;
   animation-direction: reverse;

}
@keyframes s {

0%{
rotate: 90deg;
border-radius: 10px;

}


50%{

rotate: 180deg;
background-color: black;

}


100%{


rotate: 360deg;


}




}

.e{
background-color: rgb(208, 4, 4);
width: 8000px;
height: 10px;
animation-duration: 1s;
    animation-name: e;
    animation-iteration-count: infinite;
position: absolute; 
  top: 50;   
  left: 50;     
   opacity: 0.9;
    animation-direction: reverse;
  animation-timing-function: linear;
}
@keyframes e {

0%{
rotate: 1deg;


}


100%{


rotate: 360deg;


}




}