body {
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  font-family: "Press Start 2P";
  background: black;
  justify-content: center;
  gap: 40px;
  position: relative;
   
}

body::after {
content: "";
position: absolute;
top:0;
left: 20px;
width: 10px;
bottom: 80px;
transition: all 200ms;
opacity: 0;
background: magenta;
}

body:hover::after {
opacity: 0.3
}

body::before {
content: "";
position: absolute;
top:0;
left: 40px;
width: 14px;
bottom: 300px;
transition: all 200ms;
opacity: 0;
background: limegreen;
}

body:hover::before {
opacity: 0.4
}


* {
   color: #0BDA51;
  }

a {
display: block;
padding: 16px 32px;
border: 2px solid #0BDA51;
text-decoration: none;
border-radius: 4px;
position: relative;
background-color: black;
z-index: 2;
}

a::after {
content: "";
position: absolute;
top:0;
left: 0;
right: 0;
bottom: -4px;
transition: all 200ms

}

a:hover::before {
border: 2px dashed hotpink;
opacity: 0.7;
top: -12px;
left: 12px;
bottom: 12px;
right: -6px;
}

a::before {
content: "";
position: absolute;
top:0;
left: 0;
right: 0;
bottom: -4px;
transition: all 200ms

}

a:hover::after {
border: 2px dashed white;
opacity: 0.7;
top: 12px;
left: -12px;
bottom: -12px;
right: 6px;
}

a:hover {
animation: 100ms infinite shake   
}

h1 {
  font-size: 46px;
  position: relative;
}

#shadow-it {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: hotpink;
transition: all 100ms;
z-index: -1;
}

#shadow-third {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: white;
transition: all 100ms;
z-index: -2;
}

/* The typing effect */
@keyframes shake {
  0% {
  transform: translateX(-4px)
  }
  50% {
    transform: translate(0px, 2px)

  }
  75% {
    transform: translateX(4px)

  }
    100% {
    transform: translate(0px)

  }
}

p {
font-family: sans-serif;
color: white;
font-size: 14px;
width: 500px;
position: fixed;
bottom: 0px;
left: 50%;
transform: translateX(-50%);
}


h1 span {
position: relative;
display: inline-block;
transition: all 1200ms;
}

h1 #shadow-it span {
position: relative;
display: inline-block;
transition: all 2000ms;
color: hotpink;
}

h1 #shadow-third span {
position: relative;
display: inline-block;
transition: all 2700ms;
color: white;
}



h1:hover span:not(#shadow-it):not(#shadow-third) {
  transform: translate(300px,820px) ;
  opacity: 0.4;
 
  

  }

h1:hover .spaneven:not(#shadow-it):not(#shadow-third) {
  transform: translate(-300px,-820px) ;
  opacity: 0.4;

  }
  
  
  h1:hover #shadow-it span {
  transform: translate(-200px,-720px);
  opacity: 0.4;
 
  

  }

h1:hover #shadow-it .spaneven {
  transform: translate(200px,720px);
  opacity: 0.4;

  }
  
h1:hover #shadow-third span {
  transform: translate(20px,-20px);
}

h1:hover #shadow-third .spaneven {
  transform: translate(-20px, 20px) ;
  opacity: 0.4;

  }
  
  
  
.glitch {
 
    position: absolute;
  width: 100px;
  height: 100px;
}

.glitch span {
display: block;
opacity: 0;
background: teal;
width: 30px;
height: 300px;
}

.glitch:hover span {
  opacity: 0.7;
}

.first,.third,.fifth {
  top: 0
}

.second, .forth, .sixth, .seventh {
bottom: 0;  
}

.first {
  left: 80px;

  width: 300px;
  height: 400px;
  }