@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

*
{margin:0;
padding:0;
box-sizing: border-box;
font-family: 'poppins',sans-serif;
}

body{
background-color:black;
display:flex;
justify-content: center;
align-items: center;

  min-height: 100vh;
  font-family: 'poppins',sans-serif;
}

img{height:auto;max-width:200%;}

.intro {
  font-family: courier;
  color:white;
  width: 40%;
  position:absolute;
  top: 300px;
  left:300px;
}



h1 {

  position: relative;
  font-size: 8em;
  color: #222;
  text-transform: uppercase;
  border-bottom: 16px solid #222;
  letter-spacing: 0.05em;
  line-height: 1.2em;

}

h1:before{
  content: attr(data-text);
  position:absolute;
  top:0;
  left: 0;
  width: 100%;
  color: #03a9f4;
overflow:hidden;
  border-bottom: 16px solid  #03a9f4 ;
animation: myframe 10s ease 3;
}

@-webkit-keyframes myframe{
  0%{
    width:0%;
  }
  100%{
    width:100%;
  }
}

#loading  {
  -webkit-animation: seconds .5s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 19s;
  animation: seconds .5s forwards;
  animation-iteration-count: 1;
  animation-delay: 19s;
  position: relative;

}
@-webkit-keyframes seconds {
  0% {
    opacity: .25;
  }
  100% {
    opacity: 0;
    left: -9999px;
    position: absolute;
  }
}
@keyframes seconds {
  0% {
    opacity: .25;
  }
  100% {
    opacity: 0;
    left: -9999px;
    position: absolute;
  }
}

#theriver{
  size: 100%;
  position: absolute;
  top:-1000px;
 animation: therivers 0s forwards;
 -webkit-animation-delay: 24s;
}


@-webkit-keyframes therivers {
0% {}
100%{ transform:translateY(1120px);}
}

#warningbg{
  size: 0%;
  position: absolute;
  max-height: 200%;
  top:-4000px;
  left:-50px;
 animation: warningbg 0s forwards;
 -webkit-animation-delay: 21.5s;

}


@-webkit-keyframes warningbg {
0% {}
100%{ transform:translateY(4000px);}
}

#hack{
  size: 100%;
  position:absolute;
  top:-1050px;;
    left:40%;
 animation: warnings 0s forwards;
 -webkit-animation-delay: 26s;
}


#fraud{
  size: 100%;
  position: absolute;
  top:-1500px;;
  left:-600;
 animation: warnings 0s forwards;
 -webkit-animation-delay: 27s;
}

#human{
  size: 100%;
  position: absolute;
  top:-1060px;;
  left:10%;
 animation: warnings 0s forwards;
 -webkit-animation-delay: 28s;
}


#deleted{
  size: 100%;
  position: absolute;
  top:-1300px;;
  right:10%;
 animation: warnings 0s forwards;
 -webkit-animation-delay: 29s;
}

#fraudall{
  size: 100%;
  position: absolute;
  top:-1300px;;
  right:10%;
 animation: warnings 0s forwards;
 -webkit-animation-delay: 31s;
}

#deletedall{
  size: 100%;
  position: absolute;
  top:-1500px;;

 animation: warnings 0s forwards;
 -webkit-animation-delay: 32s;
}


#hackall{
  size: 100%;
  position: absolute;
  top:-1520px;
  right:10%;
 animation: warnings 0s forwards;
 -webkit-animation-delay: 34s;
}


@-webkit-keyframes warnings {
  0% {}
  100%{ transform:translateY(1500px);}
  }