@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');

:root {
    --primary-color: rgb(255, 255, 255);
    --secondary-color: red;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 3%;
    padding-bottom: 3%;
}

#footer__link {
    color: var(--primary-color);
    border-bottom: 2px dashed var(--primary-color);
    text-decoration: none;

    font-size: 2em;
    font-family: 'Monoton', cursive;
    letter-spacing: 0.05em;
}

#footer__link:hover {
    color: var(--secondary-color);
    border-bottom: 2px solid var(--secondary-color);
}

#footer__logo {
    width: 10%;
    min-width: 64px;
}

#footer__logo:hover {
    background-color: #333333;
    border-radius: 15%;
}

footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.3% 4%;
    align-items: center;
}

div {
    padding: 40px;
    font-size: 95px;
    font-family: 'Monoton', cursive;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
    color: red;
}

div p {
    margin: 5px;
}

#error:hover {
    text-shadow: 0 0 200px #ffffff, 0 0 80px #008000, 0 0 6px #0000ff;
}

#code:hover {
    text-shadow: 0 0 100px red, 0 0 40px FireBrick, 0 0 8px DarkRed;
}

#error {
    color: #fff;
    text-shadow: 0 0 80px #ffffff, 0 0 30px #008000, 0 0 6px #0000ff;
}

#error span {
    animation: upper 6s linear infinite;
}

#code {
    letter-spacing: 4px;
}

#code span:nth-of-type(2) {
    animation: lower 9s linear infinite;
}

#code span:nth-of-type(1) {
    text-shadow: none;
    opacity: .4;
}

@keyframes upper {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
        opacity: .99;
        text-shadow: 0 0 80px #ffffff, 0 0 30px #008000, 0 0 6px #0000ff;
    }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
        opacity: 0.4;
        text-shadow: none;
    }
}

@keyframes lower {
    0%, 12%, 18.999%, 23%, 31.999%, 37%, 44.999%, 46%, 49.999%, 51%, 58.999%, 61%, 68.999%, 71%, 85.999%, 96%, 100% {
        opacity: 0.99;
        text-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
    }
    19%, 22.99%, 32%, 36.999%, 45%, 45.999%, 50%, 50.99%, 59%, 60.999%, 69%, 70.999%, 86%, 95.999% {
        opacity: 0.4;
        text-shadow: none;
    }
}