@media only screen and (max-width: 1400px) {

    .controls {
        display: none !important;
    }

    #instruction {
        display: none !important;
    }
    #mb-hud_sec{
        display: flex !important;
    }

}

@media only screen and (max-width: 1200px) {

    h1 {
        display: none;
    }

    .controls {
        display: none !important;
    }

    #instruction {
        display: none !important;
    }

    #mb-hud_sec{
        display: flex !important;
    }

    /*FULLSCREEN*/

    #fullScreenEnter{
        display: none;
    }
    
    #fullScreenExit{
        display: none;
    }

    canvas {
        height: 100vh !important;
        width: 100% !important;
    }

    .mb-canvas{
        height: 100vh !important;
        width: 100% !important;
    }
    
    #start-screen {
        height: 100vh !important;
        width: 100% !important;
    }

    #lost-screen {
        height: 100vh !important;
        width: 100% !important;
    }
}

@media only screen and (max-width: 720px) {

    h1 {
        display: none;
    }

    canvas {
        height: 100vh !important;
        width: 100% !important;
    }

    .mb-canvas{
        height: 100vh !important;
        width: 100% !important;
    }
    
    #start-screen {
        height: 100vh !important;
        width: 100% !important;
    }

    #lost-screen {
        height: 100vh !important;
        width: 100% !important;
    }

    .controls {
        display: none !important;
    }

    #instruction {
        display: none !important;
    }
 
    #fullScreenEnter {
        display: none !important;
    }

    #fullScreenExit {
        display: none !important;
    }

    #mb-hud_sec{
        display: flex !important;
    }
}

@media only screen and (max-height: 480px) {

    h1 {
        display: none;
    }

    .mb-canvas{
        height: 100vh !important;
        width: 100% !important;
    }

    canvas {
        height: 100vh !important;
        width: 100% !important;
    }

    #start-screen {
        height: 100vh !important;
        width: 100% !important;
    }

    #lost-screen {
        height: 100vh !important;
        width: 100% !important;
    }

    .controls {
        display: none !important;
    }

    #instruction {
        display: none !important;
    }

    #fullScreenEnter {
        display: none !important;
    }

    #fullScreenExit {
        display: none !important;
    }

    #mb-hud_sec{
        display: flex !important;
    }
}

/*POSITIONS_FULLSCREEN*/

.mb-canvas_fs{
    width: 100%;
    height: 100%;
    display: flex;
}

.mb-btn_sec {
    background: transparent;
    width: 100%;
    height: 100%;
    aspect-ratio: auto 720 / 480;
    position: absolute;
}