@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

body {
    font-family: "Source Code Pro";
    background-color: #000;
    color: #00FF00;
    text-shadow: 0 0 10px #00FF00, 0 0 20px #00FF00,
        0 0 40px #00FF00;
}

h1 {
    display:flex;
    justify-content:center;
    margin-bottom:60px;
    font-size:60px;
}
p {
    display:flex;
    justify-content:center;
    padding: 0px;
    font-size: 23px;
    color: #00FF00;
    text-shadow: 0 0 5px #00FF00, 0 0 10px #00FF00, 0 0 15px #00FF00;
    transition: all 0.2s ease;
}


p::before {
    content: attr(data-initial-text); /* prvi tekst koji se vidi na stranici, tj pitanje*/;
}


p:hover::before {
    content: "010101001010101001100101";
    animation: brzifade 0.4s steps(10, end) forwards;
}


@keyframes brzifade {
    0% {
        content: "010101001010101001100101";
    }
    20% {
        content: "0110101011001010110010";
    }
    40% {
        content: "100101101010011001011";
    }
    60% {
        content: "1100101100101010010010";
    }
    80% {
        content: "1010010110010101010010";
    }
    100% {
        content: attr(data-final-text); /* odgovor na pitanja */
        text-shadow: none;
    }
}


code {
    font-size: 20px;
    display:flex;
    justify-content:center;
    text-align:center;
    margin-top:40px;
    
}

hr {
    box-shadow: #00FF00 0 0 5px 1px;
    animation: widthhr 0.5s steps(100, end) forwards;
}


@keyframes widthhr {
    0% {
        width:10px;
    }
    
    100% {
        width:100%;
    }
}