/* Media-Query for max-width: 820px --------- */

@media (max-width: 820px) {

    /* Start screen --------- */

    #startScreen {
        width: 100%;
    }

    #gameScreenWrapper {
        height: 100%;
    }

    /* End screen --------- */

    #endScreen {
        width: 100%;
    }

}


/* Media-Query for max-width: 720px --------- */

@media (max-width: 720px){

    /* Start screen --------- */

    .icon-container {
        height: 50px;
    }

    .start-button {
        font-size: 12px;
        width: 100px;
        height: 40px;
    }

    .info-container {
        width: 550px;
        height: 340px;
    }

    /* Canvas and game screen --------- */

    canvas {
        width: 100%;
    }

}


/* You can only play the game in portrait-mode, when the width is bigger than 600px --------- */

@media (orientation: portrait) and (max-width: 600px) {

    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #f6bb62;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

/* Landscape-mode with a height under 600px, there is no title --------- */

@media (orientation: landscape) and (max-height: 600px){

    h1 {
        display: none;
    }

    .icon-container {
        height: 50px;
    }

    .start-button {
        font-size: 12px;
        width: 100px;
        height: 35px;
    }


/*  Landscape-mode, when the height is smaller than the normal height of the canvas --------- */

@media (orientation: landscape) and (max-height: 480px) {

    body {
        height: 100vh;
    }

    /* Canvas and game screen --------- */

    #gameScreenWrapper {
        height: 100vh;
    }

    canvas {
        height: 100vh;
    }

    /* End screen --------- */

    #endScreen {
        height: 100vh;;
    }
}

}