@keyframes changeColor {
    0% {
        background-image: radial-gradient( rgba(0, 150, 0, 0.75), black 100%);
    }
    10% {
        background-image: radial-gradient( rgba(10, 145, 0, 0.77), black 100%);
    }
    20% {
        background-image: radial-gradient( rgba(15, 140, 0, 0.78), black 100%);
    }
    30% {
        background-image: radial-gradient( rgba(20, 135, 0, 0.8), black 100%);
    }
    40% {
        background-image: radial-gradient( rgba(24, 130, 0, 0.83), black 100%);
    }
    50% {
        background-image: radial-gradient( rgba(25, 127, 0, 0.82), black 100%);
    }
    60% {
        background-image: radial-gradient( rgba(25, 127, 0, 0.80), black 100%);
    }
    70% {
        background-image: radial-gradient( rgba(20, 130, 0, 0.8), black 100%);
    }
    80% {
        background-image: radial-gradient( rgba(15, 135, 0, 0.78), black 100%);
    }
    90% {
        background-image: radial-gradient( rgba(10, 140, 0, 0.77), black 100%);
    }
    100% {
        background-image: radial-gradient( rgba(0, 145, 0, 0.75), black 100%);
    }
}

@keyframes changeCharA {
    0% {
        color: #FFFFFFFF;
        text-shadow: 0 0 5px #C8C8C8;
    }
    25% {
        color: #FFFFFF00;
        text-shadow: 0 0 5px #C8C8C8;
    }
    50% {
        color: #EFEFEF88;
        text-shadow: 0 0 5px #C8C8C8;
    }
}

@keyframes changeCharB {
    0% {
        color: #FFFFFF00;
        text-shadow: 0 0 5px #C8C8C8;
    }
    25% {
        color: #FFFFFFFF;
        text-shadow: 0 0 5px #C8C8C8;
    }
    60% {
        color: #EFEFEF88;
        text-shadow: 0 0 5px #C8C8C8;
    }
}

@keyframes changeCharC {
    72% {
        color: #FFFFFF00;
        text-shadow: 0 0 5px #C8C8C8;
    }
    35% {
        color: #FFFFFFFF;
        text-shadow: 0 0 5px #C8C8C8;
    }
    0% {
        color: #EFEFEF88;
        text-shadow: 0 0 5px #C8C8C8;
    }
}

@keyframes changeCharD {
    0% {
        color: #FFFFFF00;
        text-shadow: 0 0 5px #C8C8C8;
    }
    45% {
        color: #FFFFFFFF;
        text-shadow: 0 0 5px #C8C8C8;
    }
    35% {
        color: #EFEEEF58;
        text-shadow: 0 0 5px #C8C8C8;
    }
}

@keyframes changeCharE {
    0% {
        color: #FFFFFF00;
        text-shadow: 0 0 5px #C8C8C8;
    }
    24% {
        color: #FFFFFF33;
        text-shadow: 0 0 5px #C8C8C8;
    }
    54% {
        color: #FFEFFFFF;
        text-shadow: 0 0 5px #C8C8C8;
    }
    80% {
        color: #EFEFEF42;
        text-shadow: 0 0 5px #C8C8C8;
    }
}

body {
    background-color: black;
    /*background-image: radial-gradient(
  rgba(0, 150, 0, 0.75), black 120%
  );*/
    height: 100vh;
    color: white;
    font: 1.3rem Inconsolata, monospace;
    text-shadow: 0 0 5px #C8C8C8;
    animation: changeColor 1s infinite ease;
}

::selection {
    background: #0080FF;
    text-shadow: none;
}

a {
    height: 100vh;
    color: white;
}

#footer {
    position: absolute;
    bottom: 0;
    padding-bottom: 10px;
    width: 100%;
    height: 1.0rem;
    text-align: center;
}

.charA {
    animation: changeCharA 0.8s infinite ease;
}

.charB {
    animation: changeCharB 0.3s infinite ease;
}

.charC {
    animation: changeCharC 0.4s infinite ease;
}

.charD {
    animation: changeCharD 0.4s infinite ease;
}

.charE {
    animation: changeCharE 0.14s infinite ease;
}

.glitch-effect {
    position: relative;
    font-size: 2rem;
    color: #fff;
}

.glitch-effect::before,
.glitch-effect::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: -1;
}

.glitch-effect::before {
    animation: glitch-anim 4s ease-in-out infinite;
}

.glitch-effect::after {
    animation: changeCharE 0.14s infinite ease;
}

@keyframes glitch-anim {
    0% {
        clip-path: inset(0 0 0 0);
        transform: translate3d(0, 0, 0);
    }
    25% {
        clip-path: inset(0 0 0 0);
        transform: translate3d(2px, 2px, 0);
    }
    50% {
        clip-path: inset(0 0 0 0);
        transform: translate3d(0, -2px, 0);
    }
    75% {
        clip-path: inset(0 0 0 0);
        transform: translate3d(-2px, 0, 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
        transform: translate3d(0, 0, 0);
    }
}

.typewriter {
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    border-right: .12em solid orange;
    /* The typwriter cursor */
    white-space: nowrap;
    /* 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: orange;
    }
}