.special_options-container {
    width: 14%;
    height: auto;
    aspect-ratio: 3.5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 2%;
    left: 1.5%;
    opacity: 0;
    transition: opacity 0.5s;
}

.leave_game-container {
    width: 14%;
    height: auto;
    aspect-ratio: 3.5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 2%;
    right: 1.5%;
    opacity: 0;
    transition: opacity 0.5s;
}

.sound_on_off-container,
.fullscreen_switch-container,
.pause-container,
.screen-container,
.reload-container,
.go_to_menu-container {
    --outline_color: #766299f5;
    --outline_width: 0.35;
    --plus_ow: calc(var(--outline_width) * min(0.5vw, min(0.5vw, 1vh)));
    --plus_ow: calc(var(--outline_width) * min(0.5vw, 1vh));
    --minus_ow: calc(var(--outline_width) * min(-0.5vw, -1vh));
    width: min(4vw, 8vh);
    height: auto;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #8a8ae9ad, #8a8ae9);
    border: min(0.275vw, 0.55vh) solid white;
    border-radius: 50%;
    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.225vw, 0.45vh) #8055b9, min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) min(0.3vw, 0.6vh) 0 #443858c2;
    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.225vw, 0.45vh) #8055b9, min(0.15vw, 0.3vh) min(0.15vw, 0.3vh) min(0.3vw, 0.6vh) 0 #443858c2;
    /* transform: skewX(-3deg); */
    cursor: pointer;
    transition: filter 0.2s, translate 0.1s, box-shadow 0.2s;
}

.webview .leave_game-container {
    /* .rotate-container {
        visibility: visible;
    } */
}

.webview .fullscreen_switch-container {
    visibility: hidden;
}

@media (any-hover: hover) {
    .sound_on_off-container:hover,
    .fullscreen_switch-container:hover,
    .pause-container:hover,
    .screen-container:hover,
    .reload-container:hover,
    .go_to_menu-container:hover {
        filter: brightness(110%);
        .sound_on_off,
        .fullscreen_switch,
        .pause,
        .reload,
        .go_to_menu {
            color: gold;
        }
    }
}

.sound_on_off-container:active,
.fullscreen_switch-container:active,
.pause-container:active,
.screen-container:active,
.reload-container:active,
.go_to_menu-container:active {
    translate: 5% 5%;
    box-shadow: inset 0 0 min(0.05vw, 0.1vh) min(0.225vw, 0.45vh) #8055b9, 0 0 0 0 #443858c2;
}

.sound_on_off,
.screen,
.reload,
.fullscreen_switch,
.pause,
.go_to_menu {
    font-size: min(1.8vw, 3.6vh);
    color: white;
    text-shadow: var(--plus_ow) var(--plus_ow) 0 var(--outline_color),
        var(--minus_ow) var(--minus_ow) 0 var(--outline_color),
        var(--plus_ow) var(--minus_ow) 0 var(--outline_color),
        var(--minus_ow) var(--plus_ow) 0 var(--outline_color);
    transition: color 0.2s;
}