html,
body {}

html {
    color: white;
    font-family: Lato, "Segoe UI", Avenir, Ubuntu, Tahoma, Verdana, Helvetica, sans-serif;
    background-image: url('https://techunlimitedgroup.com/disabled/bg.jpg');
    background-size: cover;
    overflow: hidden;
    background: linear-gradient(222deg, #000000, #000b23, #000000);
    background-size: 600% 600%;

    -webkit-animation: bgAnim 36s ease infinite;
    -moz-animation: bgAnim 36s ease infinite;
    -o-animation: bgAnim 36s ease infinite;
    animation: bgAnim 36s ease infinite;
}

@-webkit-keyframes bgAnim {
    0% {
        background-position: 91% 0%
    }

    50% {
        background-position: 10% 100%
    }

    100% {
        background-position: 91% 0%
    }
}

@-moz-keyframes bgAnim {
    0% {
        background-position: 91% 0%
    }

    50% {
        background-position: 10% 100%
    }

    100% {
        background-position: 91% 0%
    }
}

@-o-keyframes bgAnim {
    0% {
        background-position: 91% 0%
    }

    50% {
        background-position: 10% 100%
    }

    100% {
        background-position: 91% 0%
    }
}

@keyframes bgAnim {
    0% {
        background-position: 91% 0%
    }

    50% {
        background-position: 10% 100%
    }

    100% {
        background-position: 91% 0%
    }
}

#container {
    top: 3em;
    right: 7em;
    position: absolute;

    text-align: center;


}

h1 {
    font-size: 4em;
    font-weight: normal;
    /* text-transform: lowercase; */
}

#wheel {
    position: absolute;
    top: 2em;
    left: -25rem;
    overflow: hidden;
    width: 64rem;
    -webkit-animation: spin 120s linear infinite;
    -moz-animation: spin 120s linear infinite;
    animation: spin 120s linear infinite;
    transform-origin: 41.9% 49.8%;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

#face {
    position: absolute;
    top: 9rem;
    left: -4rem;
    overflow: hidden;
    width: 38rem;
}

footer {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}



@media only screen and (max-width: 820px) {
    #container {

        top: 3em;
        left: unset;
        right: unset;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        text-align: center;
        width: 86%;
        border-radius: 12px;
        padding: 2em 1em;
        background-color: rgb(0 0 0 / 49%);
        z-index: 10;
    }

    #wheel {
        position: absolute;
        bottom: -4em;
        top: auto;
        left: -16em;
        overflow: hidden;

        -webkit-animation: spin 120s linear infinite;
        -moz-animation: spin 120s linear infinite;
        animation: spin 120s linear infinite;
        transform-origin: 41.9% 49.8%;
    }

    #face {
        position: absolute;
        top: auto;
        bottom: 2em;
        left: -4em;
        overflow: hidden;

    }
}