.loading {
    background-color: white;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 4;
}



.hidden {
    display: none;
}

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    /* Safari */
    animation: spin 2s linear infinite;
    margin: 0 auto;
    top: 20vh;
    position: relative;
}

.loading>p {
    position: relative;
    display: block;
    text-align: center;
    top: 80px;
    font-family: sans-serif;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

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

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.micoscope {

    width: 500px;
    height: 500px;
    position: relative;
    margin: 80px auto 20px auto;

}

.labels {
    background-image: url(assets/img/labels.png);
    background-size: 100% 100%;
    background-position: center;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}

body {

    background-color: #cbc8c3;

}

.controls {
    width: fit-content;
    height: fit-content;
    padding: 10px;
    margin: 0 auto;

}

.controls>button {
    padding: 10px 20px;
}

.controls>button:hover {
    cursor: pointer;
}




.stage {
    width: 4100%;
    height: 100%;
    background-image: url('assets/img/stage_sprites.png');
    background-size: 100%, 100%;
    background-position: left;
    background-repeat: no-repeat;
    animation-name: '';
    animation-duration: 1s;
    animation-timing-function: steps(40);
    animation-iteration-count: 1;
    animation-direction: forwards;
    animation-play-state: paused;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}


@keyframes stage-animate {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-97.5609756097561%);
    }
}

@keyframes stage-animate-back {
    from {

        transform: translateX(-97.5609756097561%)
    }

    to {
        transform: translateX(0%);
    }
}





.stage__wrapper {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
}


.objectives-red {
    width: 1800%;
    height: 100%;
    background-image: url('assets/img/red-objective_sprites.png');
    background-size: 100%, 100%;
    background-repeat: no-repeat;
    animation-name: objectives-red;
    animation-duration: 1s;
    animation-timing-function: steps(17);
    animation-iteration-count: 1;
    animation-direction: forwards;
    animation-play-state: paused;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.objectives-yellow {
    width: 2200%;
    height: 100%;
    background-image: url('assets/img/yellow-objective_sprites.png');
    background-size: 100%, 100%;
    background-repeat: no-repeat;
    animation-name: objectives-yellow;
    animation-duration: 1s;
    animation-timing-function: steps(21);
    animation-iteration-count: 1;
    animation-direction: forwards;

    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.objectives-green {
    width: 2000%;
    height: 100%;
    background-image: url('assets/img/green-objective_sprites.png');
    background-size: 100%, 100%;
    background-repeat: no-repeat;
    animation-name: objectives-green;
    animation-duration: 1s;
    animation-timing-function: steps(19);
    animation-iteration-count: 1;
    animation-direction: forwards;

    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

.objectives-blue {
    width: 1900%;
    height: 100%;
    background-image: url('assets/img/blue_objective_sprites.png');
    background-size: 100%, 100%;
    background-repeat: no-repeat;
    animation-name: objectives-blue;
    animation-duration: 1s;
    animation-timing-function: steps(18);
    animation-iteration-count: 1;
    animation-direction: forwards;

    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

@keyframes objectives-red {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-94.44444444444444%);
    }
}

@keyframes objectives-yellow {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-95.45454545454545%);
    }
}


@keyframes objectives-green {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-95%);
    }
}

@keyframes objectives-blue {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-94.73684210526316%);
    }
}

.objectives__wrapper {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
}

.plates-400 {
    background-image: url(assets/img/400x.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    width: 25%;
    height: 25%;
    display: initial;
    margin: 0 auto;
    left: 47%;
    top: 11%;
    z-index: 2;
    border-radius: 50%;
    box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 5.3px rgb(0 0 0 / 5%), 0 12.5px 10px rgb(0 0 0 / 6%), 0 22.3px 17.9px rgb(0 0 0 / 7%), 0 41.8px 33.4px rgb(0 0 0 / 9%), 0 100px 80px rgb(0 0 0 / 12%);
    display: block;
}

.plates-40 {
    background-image: url(assets/img/40x.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    width: 25%;
    height: 25%;
    display: initial;
    margin: 0 auto;
    left: 47%;
    top: 11%;
    z-index: 2;
    border-radius: 50%;
    box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 5.3px rgb(0 0 0 / 5%), 0 12.5px 10px rgb(0 0 0 / 6%), 0 22.3px 17.9px rgb(0 0 0 / 7%), 0 41.8px 33.4px rgb(0 0 0 / 9%), 0 100px 80px rgb(0 0 0 / 12%);
    display: block;
}

.plates-100 {
    background-image: url(assets/img/100x.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    width: 25%;
    height: 25%;
    display: initial;
    margin: 0 auto;
    left: 47%;
    top: 11%;
    z-index: 2;
    border-radius: 50%;
    box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 5.3px rgb(0 0 0 / 5%), 0 12.5px 10px rgb(0 0 0 / 6%), 0 22.3px 17.9px rgb(0 0 0 / 7%), 0 41.8px 33.4px rgb(0 0 0 / 9%), 0 100px 80px rgb(0 0 0 / 12%);
    display: block;
}

.plates-1000 {
    background-image: url(assets/img/1000x.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    width: 25%;
    height: 25%;
    display: initial;
    margin: 0 auto;
    left: 47%;
    top: 11%;
    z-index: 2;
    border-radius: 50%;
    box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 3%), 0 6.7px 5.3px rgb(0 0 0 / 5%), 0 12.5px 10px rgb(0 0 0 / 6%), 0 22.3px 17.9px rgb(0 0 0 / 7%), 0 41.8px 33.4px rgb(0 0 0 / 9%), 0 100px 80px rgb(0 0 0 / 12%);
    display: block;
}


.lights-off {
    width: 100%;
    height: 100%;
    background-image: url('assets/img/light_off.png');
    background-size: 100%, 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    transform: translateX(0);
}

.lights-on {
    width: 100%;
    height: 100%;
    background-image: url('assets/img/light_on.png');
    background-size: 100%, 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    transform: translateX(0);
}

.lights__wrapper {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;

}