body{
    background-color: black;
    height:95vh;
    color:white;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items: center;
    font-family:'Special Elite',cursive;
}

header{
    flex:1;
    display:flex;
    justify-content:center;
    align-items: center;
    
}

#headerTxt{
    
    font-size:4.5vw;
    font-weight: bold;
    color:#a30909;
}

.glow{
    animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px #494949, 0 0 20px #494949,0 0 30px #494949, 0 0 40px #494949;
  }

  to {
    text-shadow: 0 0 20px #494949,0 0 30px #494949, 0 0 40px #494949, 0 0 50px #494949, 0 0 60px #494949, 0 0 70px #494949, 0 0 80px #494949, 0 0 90px #494949;
  }
}

    

main{
    flex:5;
    display:flex;
    justify-content:center;
    align-items: center;
}

    main section article {
        display:flex;
        flex-direction: column;
        justify-content:center;
        align-items: center;
    }

    main section article span{
        width:16vw;
        display:flex;
        justify-content:center;
        align-items: center;
    }

        main section article span span {
            opacity:0;
            animation: fade-text 1s forwards;
            font-size:3vw;
            margin-right:-0.2vw;
        }

        #B{animation-delay:0.3s}
        #i{animation-delay:0.6s}
        #e1{animation-delay:0.9s}
        #n1{animation-delay:1.2s}
        #v{animation-delay:1.5s}
        #e2{animation-delay:1.8s}
        #n2{animation-delay:2.1s}
        #u{animation-delay:2.4s}
        #e3{animation-delay:2.7s}

        @keyframes fade-text {
            0% {opacity :0}
            100% {opacity:1}
        }

        #introTxt{
            opacity:0;
            font-size:2vw;
            animation:fade-text 1s forwards;
            animation-delay:3.5s;
        }

        #pseudoTxt{
            opacity:0;
            font-size:2vw;
            animation:fade-text 1s forwards;
            animation-delay:5s;
        }

        #pseudoInput{
            opacity:0;
            font-family:'Special Elite',cursive;
            font-size:1.8vw;
            border-radius:1vw;
            padding:0.3vw 1vw 0vw 0.5vw;
            animation:fade-text 1s forwards;
            animation-delay:5s;
            
        }

        #pseudoInput:focus{
            outline:none;
            font-family:'Special Elite',cursive;
            font-size:1.8vw;
            border-radius:1vw;
            padding:0.3vw 1vw 0vw 0.5vw;
        }

footer{
    flex:1;
    display:flex;
    flex-direction: column;
    justify-content:flex-end;
    align-items: center;
}