.sphereDiv {
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVjNTY3YSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjNWM1NjdhIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM4Mzg2OTAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzVjNTY3YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVjNTY3YSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #5c567a), color-stop(25%, #5c567a), color-stop(50%, #838690), color-stop(75%, #5c567a), color-stop(100%, #5c567a));
    background: -moz-linear-gradient(left, #5c567a, #5c567a, #838690, #5c567a, #5c567a);
    background: -webkit-linear-gradient(left, #5c567a, #5c567a, #838690, #5c567a, #5c567a);
    background: linear-gradient(to right, #5c567a, #5c567a, #838690, #5c567a, #5c567a);
}

html {
    /*background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVjNTY3YSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjNWM1NjdhIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiM4Mzg2OTAiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iIzVjNTY3YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVjNTY3YSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
            background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #5c567a), color-stop(25%, #5c567a), color-stop(50%, #838690), color-stop(75%, #5c567a), color-stop(100%, #5c567a));
            background: -moz-linear-gradient(left, #5c567a, #5c567a, #838690, #5c567a, #5c567a);
            background: -webkit-linear-gradient(left, #5c567a, #5c567a, #838690, #5c567a, #5c567a);
            background: linear-gradient(to right, #5c567a, #5c567a, #838690, #5c567a, #5c567a);*/
    /*font-size: 3em;
            text-shadow: 0 0 5px white;
            text-align: center;*/
}

@-webkit-keyframes celestial {
    50% {
        top: 98px;
        left: -2px;
        height: 0;
    }

    100% {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        top: -2px;
        left: -2px;
        height: 200px;
    }
}

@-moz-keyframes celestial {
    50% {
        top: 98px;
        left: -2px;
        height: 0;
    }

    100% {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        top: -2px;
        left: -2px;
        height: 200px;
    }
}

@-ms-keyframes celestial {
    50% {
        top: 98px;
        left: -2px;
        height: 0;
    }

    100% {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        top: -2px;
        left: -2px;
        height: 200px;
    }
}

@keyframes celestial {
    50% {
        top: 98px;
        left: -2px;
        height: 0;
    }

    100% {
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        top: -2px;
        left: -2px;
        height: 200px;
    }
}

.sphere, .celestial {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    opacity: 0.5;
}

.sphere {
    -moz-box-shadow: 0 0 40px #DFBD90 inset, 0 0 5px #DFBD90;
    -webkit-box-shadow: 0 0 40px #DFBD90 inset, 0 0 5px #DFBD90;
    box-shadow: 0 0 40px #DFBD90 inset, 0 0 5px #DFBD90;
    margin-top: 3%;
    margin-left: auto;
    margin-right: auto;
    /*line-height: 200px;*/
    position: relative;
    border: 1px solid #DFBD90;
}

.celestial {
    -moz-box-shadow: 10px 0px 5px -2px #888;
    -webkit-box-shadow: 10px 0px 5px -2px #888;
    box-shadow: 10px 0px 5px -2px #888;
    position: absolute;
    top: -2px;
    left: -2px;
    border: 2px solid #DFBD90;
    -webkit-animation: celestial 6s infinite;
    animation: celestial 6s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

.celestial-horizontal {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.celestial-diagonal {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}