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

    .start-button {
        width: 200px;
        height: 80px;
        border: 4px solid rgb(5, 45, 22);
        border-radius: 5px;
    }

    .start-button h2 {
        font-size: 22px;
        letter-spacing: 1.5px;
    }
}

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

    .start-button {
        width: 150px;
        height: 45px;
        border: 3px solid rgb(5, 45, 22);
        border-radius: 4px;
    }

    .start-button h2 {
        font-size: 15px;
        letter-spacing: 1px;
    }
}

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

    canvas {
        height: 100vh;
    }

    canvas {
        width: 100%;
    }

    h1 {
        display: none;
    }

    canvas {
        outline: none;
    }

    .how-to-play {
        display: none;
    }
}

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

    .start-img-wrapper {
        width: 60%;
        max-height: 250px;
        overflow-y: auto;
        padding: 30px 5px 30px 5px;
    }
}

@media (max-width: 720px) {

    canvas {
        width: 100%;
    }
}

@media (max-width: 800px) {

    h2 {
        display: block;
        font-size: 1.3em;
        margin-block-start: 0.5em;
        margin-block-end: 0.5em;
    }

    .impressum-wrapper {
        font-size: 20px;
    }

    .text-impressum {
        padding: 0px, 5px, 0px, 5px;
    }

    .game-instructions {
        letter-spacing: 1px;
        overflow-y: scroll;
        overflow-x: hidden;
        padding: 10px 5px 5px 5px;
        border-radius: 5px;
        scrollbar-color: rgba(5, 45, 22, 0) rgba(109, 142, 35, 0);
        scrollbar-width: thin;
        margin-top: 16px;
    }

    .game-instructions:hover {
        overflow-y: scroll;
        scrollbar-color: rgb(5, 45, 22) rgb(109, 142, 35);
        scrollbar-width: thin;
    }
}

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

    .game-instructions {
        letter-spacing: 1px;
        overflow-y: scroll;
        overflow-x: hidden;
        padding: 10px 5px 5px 5px;
        border-radius: 5px;
        scrollbar-color: rgba(5, 45, 22, 0) rgba(109, 142, 35, 0);
        scrollbar-width: thin;
        margin-top: 16px;
    }

    .game-instructions:hover {
        overflow-y: scroll;
        scrollbar-color: rgb(5, 45, 22) rgb(109, 142, 35);
        scrollbar-width: thin;
    }

    .button-wrapper {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        margin: 16px 0px 16px 0px;
    }

    .start-button {
        background-color: rgb(109, 142, 35);
        width: 130px;
        height: 40px;
        box-shadow: inset 0px 0px 5px 2px rgb(5, 48, 24);
        border: 3px solid rgb(5, 45, 22);
        border-radius: 3px;
        cursor: pointer;
    }

    .start-button h2 {
        color: white;
        font-family: Bang;
        font-size: 12px;
        text-shadow: #fc0 1px 0 10px;
        letter-spacing: 1.5px;
        margin-block-start: 0em;
        margin-block-end: 0em;
        font-weight: normal;

    }
}

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

    canvas {
        width: 100%;
    }

    canvas {
        outline: none;
    }

    h1 {
        display: none;
    }

    .how-to-play {
        display: none;
    }

    .sound-icon-container {
        display: none;
    } 
}