body {
    color: whitesmoke;
    background-color: #1b1b1b;
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
}

.grain-header:after {
    animation: grain 1s steps(25) infinite;
    background-image: url(grainybackground.jpg);
    content: "";
    height: 300%;
    left: -50%;
    opacity: 0.5;
    position: fixed;
    top: -110%;
    width: 300%;
}

@keyframes grain {

    0%,
    100% {
        transform: translate(0, 0)
    }

    10% {
        transform: translate(-5%, -10%)
    }

    20% {
        transform: translate(-15%, 5%)
    }

    30% {
        transform: translate(7%, -25%)
    }

    40% {
        transform: translate(-5%, 25%)
    }

    50% {
        transform: translate(-15%, 10%)
    }

    60% {
        transform: translate(15%, 0%)
    }

    70% {
        transform: translate(0%, 15%)
    }

    80% {
        transform: translate(3%, 35%)
    }

    90% {
        transform: translate(-10%, 10%)
    }
}

.logo-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}

svg {
    display: block;
    margin: 0 auto;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

@-webkit-keyframes purpPink {
    0% {
        stop-color: #a00df9;
    }

    16% {
        stop-color: #e3005a;
    }

    33% {
        stop-color: #0df9f6;
    }

    50% {
        stop-color: #70e300;
    }

    67% {
        stop-color: #f9e60d;
    }

    84% {
        stop-color: #e32b00;
    }

    100% {
        stop-color: #a00df9;
    }
}

@keyframes purpPink {
    0% {
        stop-color: #a00df9;
    }

    16% {
        stop-color: #e3005a;
    }

    33% {
        stop-color: #0df9f6;
    }

    50% {
        stop-color: #70e300;
    }

    67% {
        stop-color: #f9e60d;
    }

    84% {
        stop-color: #e32b00;
    }

    100% {
        stop-color: #a00df9;
    }
}

@-webkit-keyframes pinkPurp {
    0% {
        stop-color: #e3005a;
    }

    16% {
        stop-color: #0df9f6;
    }

    33% {
        stop-color: #70e300;
    }

    50% {
        stop-color: #f9e60d;
    }

    67% {
        stop-color: #e32b00;
    }

    84% {
        stop-color: #a00df9;
    }

    100% {
        stop-color: #e3005a;
    }
}

@keyframes pinkPurp {
    0% {
        stop-color: #e3005a;
    }

    16% {
        stop-color: #0df9f6;
    }

    33% {
        stop-color: #70e300;
    }

    50% {
        stop-color: #f9e60d;
    }

    67% {
        stop-color: #e32b00;
    }

    84% {
        stop-color: #a00df9;
    }

    100% {
        stop-color: #e3005a;
    }
}

.stop_1 {
    stop-color: #a00df9;
    animation: purpPink 18s;
    -moz-animation: purpPink 18s infinite;
    -webkit-animation: purpPink 18s infinite;
}

.stop_2 {
    stop-color: #e3005a;
    animation: pinkPurp 18s;
    -moz-animation: pinkPurp 18s infinite;
    -webkit-animation: pinkPurp 18s infinite;
}