@media only screen and (max-width: 950px) {
    .headline {
        font-size: 48px;
    }
}




@media only screen and (max-width: 700px) {
    .howToPlay {
        font-size: 16px;
    }
}

@media only screen and (max-width: 540px) {
    .button-53 {
        font-size: 14px;
        max-width: 320px;
    }
}


@media only screen and (max-width: 750px) {
    .startScreen {
        width: 100vw;
    }

    canvas {
        width: 100%;
    }

    .endScreenButtons {
        width: 100%;
        left: 0;

    }

    .button-54 {
        font-size: 10px;
    }

    h1 {
        display: none;
    }

    .impressumHeadline {
        display: block;
    }

    .privacyPolicyHeadline {
        display: block;
    }

    #fullscreenToggleOpen {
        display: none;
    }

    #fullscreenToggleClose {
        display: none;
    }

    .touch-right {
        bottom: 84px;
    }

    .touch-left {
        bottom: 155px;
    }

    #orientationPopup.visible {
        height: 480px;
    }

    body {
        justify-content: center;
    }

}


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

    .howToPlay {
        font-size: 12px;
    }

    .button-54 {
        padding: 2px 4px;
    }
}

@media only screen and (max-width: 450px) {
    .legalNotice {
        font-size: 12px;
    }

    #touchControls button {
        padding: 5px;
    }

    .loseButtons {
        bottom: 35px;
    }
}

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

    .endScreenButtons {
        width: 100%;
        left: 0;
    }
}

@media only screen and (max-width: 380px) {
    .button-54 {
        padding: 0px 0px;
    }

    .loseButtons {
        bottom: 20px;
    }
}

@media only screen and (max-height: 840px) {
    .headline {
        font-size: 48px;
        margin-top: 16px;
        margin-bottom: 16px;
    }
}


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

    #fullscreenToggleOpen,
    #fullscreenToggleClose {
        display: none;
    }
}



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

    #touchControls {
        position: fixed;
        top: 244px;
    }
}


@media only screen and (max-width: 800px) and (max-height: 590px) {
    .touch-left {
        flex-direction: column;
    }

    .touch-right {
        flex-direction: column;
    }

    #touchControls {
        top: 60px;
    }
}

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

    #touchControls {
        position: fixed;
        top: 60px;
    }
}



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


    #touchControls {
        position: fixed;
        top: 60px;
    }

    .startScreen {
        width: 100vW;
        height: 100vh;
    }

    body {
        justify-content: center;
    }

    #fullscreenToggleOpen {
        display: none;
    }

    #fullscreenToggleClose {
        display: none;
    }


    #touchControls button {
        font-size: 12px;
    }
}

@media only screen and (max-height: 620px) {
    #touchControls {
        padding: 10px;
    }

    .touch-left {
        padding: 4px 8px;
    }

    .touch-right {
        padding: 4px 8px;
    }
}

@media only screen and (max-height: 430px) {
    .touch-right {
        bottom: 60px;
    }

    .touch-left {
        bottom: 100px;
    }
}