.mobile {
    display: none;
}


@media only screen and (max-width: 720px) {
    body {
        height: 100%;
        background-image: url('img/background/phoneRotate.png');
        background-position: top center;
        overflow: hidden;
    }

    .moveButtons {
        display: flex;
        cursor: pointer;
    }

    canvas {
        display: none !important;
        /* need it so canvas doesn#t overlay on "Please turn your mobile screen" */
        border-radius: none;
        border: none;
        box-shadow: none;
    }

    h1,
    p {
        display: none;
    }

    .start-screen,
    .end-screen .end-screen-win {
        width: 100%;
        height: 100%;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

    .start-screen,
    .end-screen {
        display: none;

    }


}

/* Smartphones */

@media only screen and (max-height: 480px) {
    .audioInGame {
        display: none;
    }

    body {
        overflow: hidden;
        margin: 0;
    }

    .mobile {
        display: flex;
        justify-content: unset;
        align-items: center;
        margin-top: -50px;
        position: fixed;
        bottom: 10px;
        z-index: 99;
        margin-left: 23px;
        gap: 181px;
    }

    .moveButtons-widthHeight {
        width: 58px;
    }
    
    .moveButtons {
        display: flex;
    }
    
    .jump_and_throw {
        display: flex;
    }

    .start-screen,
    .end-screen,
    .end-screen-win {
        width: 100%;
        height: 100vh;
        background-color: none;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

    canvas {
        height: 100vh;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;


        background-color: black;
        border-radius: 0;
        border: none;
        box-shadow: none;
        overflow: hidden;
    }

    h1,
    p {
        display: none;
    }

    .d-none {
        display: none;
    }

}