.random-container {
    text-align: center;
}

.random-indicator {
    display: inline-block;
    transform: translateZ(0.063rem);
}

.random-indicator > div {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    margin: .5rem;
    border-radius: 50%;
    background: var(--color-primary);
    background-size: 100% 100%;
    background-position: 0 0.35rem;
    background-repeat: no-repeat;
    background-image: url(img/pointing-finger.png);
    animation: spinning-animation 12.4s ease-in-out infinite;
}

@keyframes spinning-animation {
    0%, 100% {
        /*animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);*/
    }
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(3600deg);
    }
}

.random-visualization, .random-result, .final-result {
    opacity: 0;
    transition: all ease-in-out 1s;
}

.visible {
    opacity: 1;
}

.random-choices {
    display: none;
}