@media (max-width: 992px) and (max-height: 488px) {
    body {
        overflow-y: hidden;
    }
}

@media (max-width: 992px) {



    h1,
    .game-settings {
        display: none;
    }

    .mobile-nav-buttons {
        display: flex;
    }
}

@media (max-width: 768px) {

    canvas,
    .overlay {
        width: 100%;
        min-width: 667px;
    }

    .overlay {
        height: 100%;
    }

    .game-explain {
        box-sizing: border-box;
        width: 100%;
        padding: 0 16px;
    }

    .game-settings {
        width: 100%;
        padding: 0 16px;
    }
}

@media (max-width: 720px) {
    .game-explain {
        width: 100%;
    }
}

@media (max-width: 666px) {
    .responsive-overlay {
        display: flex;
    }

    nav,
    h1,
    .game-container,
    .game-explain,
    .mute-button {
        display: none;
    }
}

@media (min-width: 992px) {
    .touch-nav-visible {
        display: flex;
    }
}