stylesheet for area.css

body
{
  margin: 0;
  padding: 0;
}
section
{
  height:100vh;
  background:#000;

}
section::after
{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(to right,#03e9f4,#03e9f3,#03e9f8);
  mix-blend-mode:color;
  pointer-events:none;
}
video
 {
  position:absolute;
  top:10%;
  left: 0;
  width:100%;
  height:40%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
h1
{
  margin: 0;
  padding: 0;
  position:center;
  top: 50%
  transform:translateY(-50%);
  width: 100%
  text-align:center;
  color: #03e9f4;
  font-size: 6.5em;
  font-family:sans-serif;
  letter-spacing:0.2em;
  opacity:1;

}
h1 span
{
  opacity:1;
  display:inline-block;
  animation: animate 1s linear forwards ;


}
@keyframes animate
 {
   0%
   {
     opacity:0;
     transform: rotateY(90deg);
     filter: blur(10px);
   }
   100%
   {
     opacity:1;
     transform: rotateY(0deg);
     filter: blur(0);
   }
}
h1 span:nth-child(1)
{
  animation-delay: 0.3s;
}
h1 span:nth-child(2)
{
  animation-delay: 0.75s;
}h1 span:nth-child(3)
{
  animation-delay: 1.25s;
}h1 span:nth-child(4)
{
  animation-delay: 1.75s;
}
h1 span:nth-child(5)
{
  animation-delay:2.25s;
}
h1 span:nth-child(6)
{
  animation-delay:2.75s;
}h1 span:nth-child(7)
{
  animation-delay: 3.25s;
}h1 span:nth-child(8)
{
  animation-delay:3.75s;
}