@media (max-width: 1200px) {
    .startImg {
        max-width: 900px;
    }
}

@media (max-width: 1050px) {
    .startImg {
        width: 90%;
    }

    .startText {
        width: 32%;
    }
}

@media (max-width: 940px) {
    .startImg {
        width: 100%;
    }

    .startText {
        width: 40%;
    }
}

@media (max-width: 840px) {
    .startImg {
        margin-top: 120px;
        max-height: 600px;
    }

    canvas {
        border: none;
        border-radius: unset;
        margin-top: 10svh;
    }

    .panelUnderCanvas {
        width: 95%;
    }

    h1 {
        display: none;
    }

    .startText {
        font-size: 3.5em;
        height: 7.5svh;
    }
}

@media (max-width: 700px) {
    .description {
        width: 95%;
    }

    .startText {
        font-size: 3em;
    }

    .startImg {
        max-height: 500px;
    }
}

@media (max-height: 750px) {
    .overlay {
        justify-content: flex-start;
    }

    .startText {
        margin-block: 0;
        margin-top: -10svh;
    }

    .startImg {
        margin-top: 0;
    }

    .legalNoticeAndPrivacyPolicyContainer {
        position: absolute;
        top: 1svh;
        padding-top: 0;
    }

    .description {
        position: absolute;
        bottom: 0px;
    }

    .descriptionImgSpacebar {
        width: 52px;
    }

    h1 {
        display: none;
    }

    canvas {
        height: 80svh;
    }

    .panelUnderCanvas {
        padding-right: 15%;
    }

    .overlayLose {
        background-color: unset;
    }

    .overlayLoseImg {
        height: 100svh;
        border-radius: unset;
        width: 100vw;
        margin-top: 0;
    }

}

@media only screen and (orientation: landscape) and (max-width: 828px) {
    .description {
        display: none;
    }

    canvas {
        width: 100vw;
        margin: 0;
    }

    .startImg {
        width: 100%;
        height: 100svh;
        margin-top: 0;
    }

    .startText {
        font-size: 3.5em;
        height: 7.5svh;
        min-height: 56px;
        min-width: 280px;
        position: absolute;
        margin-top: 0;
        bottom: 1svh;
        margin-block: 0;
    }

    .legalNoticeAndPrivacyPolicyContainer {
        position: absolute;
        top: 1svh;
        padding-top: 0;
    }

    .panelUnderCanvas {
        display: none;
    }

    .overlay {
        z-index: 2;
    }

    .mobileButtonsPauseAndSound {
        display: flex;
        gap: 5px;
        align-items: center;
    }

    .pauseGame {
        margin-left: 4px;
        margin-right: 6px;
    }

    .mobileButtonsMove {
        display: flex;
        gap: 20px;
        align-items: center;
    }
}

@media only screen and (max-height: 552px) {
    canvas {
        height: 100svh;
    }

    .mobileButtons {
        height: 40px;
    }

    .disableSound,
    .enableSound {
        height: 35px;
        width: 35px;
    }

    .unpauseGame {
        height: 40px;
        width: 40px;
        margin-right: 0px;
    }

    .pauseGame {
        height: 32px;
        width: 32px;
        margin-left: 3.5px;
        margin-right: 4px;
    }

    .arrowLeftMobile,
    .arrowRightMobile,
    .jumpMobile,
    .throwBottleMobile {
        height: 40px;
        width: 40px;
        margin-bottom: 10px;
    }

    .startText {
        font-size: 2.5em;
        height: 6svh;
        min-height: 46px;
        min-width: 220px;
        position: absolute;
        margin-top: 0;
        bottom: 1svh;
        margin-block: 0;
    }
}

@media (pointer: coarse) and (orientation: landscape) {
    .mobileButtons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 95%;
        height: 40px;
        position: absolute;
        bottom: 0svh;
        z-index: 1;
        gap: 50px;
    }

    .description {
        display: none;
    }

    .panelUnderCanvas {
        display: none;
    }
}

@media only screen and (orientation: portrait) and (pointer: coarse) {
    .gameScreenContainer {
        display: none;
    }

    .overlay {
        display: none;
    }

    body::before {
        text-align: center;
        height: 100svh;
        width: 100%;
        background-image: url("img/5_background/background_behind_canvas.svg");
    }

    .msgTurnDevice {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 3em;
        z-index: 999;
        text-align: center;
    }
}

@media only screen and (orientation: landscape) and (min-height: 750px) {
    .mobileButtons {
        bottom: 10svh;
        height: 60px;
    }

    .mobileButtons img {
        height: 50px;
        width: 50px;
    }

    .mobileButtonsPauseAndSound {
        display: flex;
        align-items: center;
    }

    .mobileButtonsPauseAndSound img {
        height: 60px;
        width: 60px;
    }

    .pauseGame {
        height: 48px !important;
        width: 48px !important;
        margin-right: 6px;
        margin-left: 4px;
    }

    .startImg {
        max-height: unset;
        height: 90svh;
    }

    .startText {
        margin-block: 0;
        margin-top: -12svh;
    }
}


@media only screen and (orientation: landscape) and (min-width: 900px) {
    .gameScreenContainer {
        display: flex;
    }

    .overlay {
        display: flex;
    }

    .msgTurnDevice {
        display: none;
    }

    .startImg {
        max-width: unset;
    }
}

@media only screen and (orientation: landscape) and (min-height: 1000px) {
    .mobileButtons {
        bottom: 18svh;
        gap: 100px;
    }

    .mobileButtons img {
        width: 65px;
        height: 65px;
    }

    .mobileButtonsPauseAndSound {
        width: 70px !important;
        height: 70px !important;
    }
}