#roulette-image, #roulette-image-info {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    animation: rotate360 7s linear infinite;
}

@media (orientation: landscape) {
    #roulette-image, #roulette-image-info {
        width: 90vh;
        height: calc(90vh);
    }
    #roulete-modal .hotspot_info_close {
        top: 10vh;
        right: calc(10vh);
    }
}

@media (orientation: portrait) {
    #roulette-image, #roulette-image-info {
        width: 90vw;
        height: calc(90vw);
    }
    #roulete-modal .hotspot_info_close {
        top: 10vw;
        right: calc(10vw);
    }
}

#roulette-image-info {
    animation: none !important;
}

@keyframes rotate360 {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

.font-family-primary {
    font-family: Bubblegum;
}