html {
    background: url("marvel.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
}

@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400');

body{ 
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center; 
  flex-direction: column;
  color: rgb(31, 128, 198);
  font-size: 50px;
  font-family: 'Bank Gothic', monospace;
  letter-spacing: -7px;
}

/* search bar */
#Name {
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
    width: 280px;
    height: 30px;
    border-radius: 15%;
}

/* submit button */
#submitbtn {
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
    border-radius: 10%;
    color: rgb(10, 33, 91);
}

#access {
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
    border-radius: 10%;
    color: rgb(10, 33, 91);
}
#heroname {
    font-size: 20px;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid rgb(7, 65, 99); /* The typwriter cursor */
  /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
} 

#herodescription {
    font-size: 20px;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid rgb(7, 65, 99); /* The typwriter cursor */
  /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: rgb(133, 140, 142); }
}
  

.database {
    color: white;
    
}
.glitch{
    font-size: 100px;
  animation: glitch 1s linear infinite;
  text-shadow:
      0 0 7px rgb(206, 213, 215),
      0 0 10px rgb(14, 38, 47),
      /* 0 0 21px #fff, */
      /* 0 0 42px rgb(11, 23, 27),
      0 0 82px rgb(11, 23, 27),
      0 0 92px rgb(11, 23, 27),
      0 0 102px rgb(11, 23, 27), */
      0 0 151px rgb(0, 149, 255);
}

@keyframes glitch{
  2%,64%{
    transform: translate(2px,0) skew(0deg);
  }
  4%,60%{
    transform: translate(-2px,0) skew(0deg);
  }
  62%{
    transform: translate(0,0) skew(5deg); 
  }
}

div:before,
div:after{
  content: attr(title);
  position: absolute;
  left: 0;
}

div:before{
  animation: glitchTop 1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

@keyframes glitchTop{
  2%,64%{
    transform: translate(2px,-2px);
  }
  4%,60%{
    transform: translate(-2px,2px);
  }
  62%{
    transform: translate(13px,-1px) skew(-13deg); 
  }
}

div:after{
  animation: glitchBotom 1.5s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitchBotom{
  2%,64%{
    transform: translate(-2px,0);
  }
  4%,60%{
    transform: translate(-2px,0);
  }
  62%{
    transform: translate(-22px,5px) skew(21deg); 
  }
}