html {
  height: 100%;
}

body {
    background-image: radial-gradient(circle farthest-corner at center, #3C4B57 0%, #1C262B 100%);
}

/* Questar Spinner Ball Style */
.logo{
     position: absolute;
     top: 10px;
     left: 30px;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     perspective: 100px;
     animation: rotate-logo 2s linear infinite;
}

/* Questar Spinner Animation */
@keyframes rotate-logo {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1);
    }

    50% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(180deg) scaleX(1) scaleY(1);
    }

    100% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1);
    }
}
/* End Spinner Animation */

.loading {
    position: absolute;
    top: 32px;
    left: 40px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    perspective: 200px;
    color: #FFFFFF;
}

.atomic {
    position: absolute;
top: 10px;
left: 90px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    perspective: 200px;
    animation: rotate-all 5s linear infinite;
}

.inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.inner.cherry {
    left: 0%;
    top: 0%;
    animation: rotate-cherry 1s linear infinite;
    border-bottom: 4px solid #ed1c24;
}


.inner.blue {
    right: 0%;
    top: 0%;
    animation: rotate-blue 1s linear infinite;
    border-right: 4px solid #68a1c0;
}


.inner.pink {
    left: 0%;
    top: 0%;
    animation: rotate-pink 1s linear infinite;
    border-top: 4px solid #ec008c;
}

.inner.orange {
    right: 0%;
    bottom: 0%;
    animation: rotate-orange 1s linear infinite;
    border-top: 4px solid #fcaf17;
}

.inner.blue.two {
    left: 0%;
    bottom: 0%;
    animation: rotate-blue-two 1s linear infinite;
    border-top: 4px solid #68a1c0;
}

@keyframes rotate-cherry {
     0% {
         transform: rotateX(75deg) rotateY(25deg) rotateZ(0deg);
     }

     100% {
         transform: rotateX(75deg) rotateY(25deg) rotateZ(360deg);
     }
}


@keyframes rotate-blue {
    0% {
        transform: rotateX(45deg) rotateY(45deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(45deg) rotateY(45deg) rotateZ(360deg);
    }
}


@keyframes rotate-pink {
    0% {
        transform: rotateX(45deg) rotateY(-45deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(45deg) rotateY(-45deg) rotateZ(360deg);
    }
   
}



@keyframes rotate-orange {
    0% {
        transform: rotateX(240deg) rotateY(200deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(240deg) rotateY(200deg) rotateZ(360deg);
    }
}

@keyframes rotate-blue-two {
    0% {
        transform: rotateX(35deg) rotateY(-70deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(-70deg) rotateZ(360deg);
    }

}

@keyframes rotate-all {
    0% {
        transform: rotate3d(0, 0, 0, 0turn);
    }

    100% {
        transform: rotate3d(0, 0, 1, 1turn);
        ;
    }

}