@media only screen and (max-width: 720px) {
    canvas {
        width: 100%;
    }

    .canvas-content {
        width: 100%;
    }
}

@media only screen and (max-height: 560px) and (orientation: landscape) {
    canvas {
        height: 100vh;
        width: 100%;
    }

    .game-end-title {
        font-size: 88px;
    }

    .bubble {
        width: 121px;
    }

    .title {
        width: 215px;
    }

    .buttons-container {
        top: -28px;
    }

    .impressum-tab-container {
        top: 40px;
    }

    .controls-tab-container {
        top: 40px;
    }

    .canvas-content {
        width: 100%;
    }
}

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

@media only screen and (max-height: 360px) and (orientation: landscape) {
    .canvas-wrapper {
        height: 100vh;
        width: auto;
        max-width: 100vw;
        aspect-ratio: auto;
        margin: 0 auto;
    }

    #canvas {
        height: 100vh;
        width: 100%;
        display: block;
        margin: 0 auto;
    }

    .main-menu-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .canvas-content {
        width: 100%;
    }
}

@media only screen and (max-height: 320px) and (orientation: landscape) {
    .canvas-wrapper {
        height: 100vh;
        width: auto;
        max-width: 100vw;
        aspect-ratio: auto;
        margin: 0 auto;
    }

    #canvas {
        height: 100vh;
        width: 100vw;
        display: block;
        margin: 0 auto;
    }

    .main-menu-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .buttons-container {
        top: -66px;
    }

    .title {
        width: 142px;
    }

    .volume-slider-container {
        left: 18%;
    }

    .canvas-content {
        width: 100%;
    }

    .controls-tab-container {
        top: 12px;
    }

    .impressum-tab-container {
        top: 12px;
    }
}