#score {
    font-family: 'Bangers', cursive;
    color: #000000;
    font-size: 5em;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Catamaran', sans-serif;
    overflow: hidden;
}

.game_container {
    display: flex;
    justify-content: center;
    align-content: center;
    padding-bottom: 2%;
}

#defaultCanvas0 {
    margin-left: 36%;
    margin-top: -20%;

}

#overlay {
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: rgb(40, 55, 27, 0.5);
    display: none;
}

#gameOver {

    position: absolute;
    width: 10%;
    top: 40%;
    left: 45%;
    padding: 20px;
    background-color: #96f249;
    border-radius: 3%;
}

#gameOver h1 {
    text-align: center;
}

#score2 {
    text-align: center;
    width: 100%;
    margin-left: 45%;
    padding: 10px 0px;
    font-size: 2em;
    font-family: 'Bangers', cursive;
}

#btns {
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

.btn {
    margin-right: 10px;
    text-decoration: none;
    color: #000;
    background-color: #7ECB3E;
    padding: 10px;
    border-radius: 5%;

}

.titlee {
    font-family: 'Bangers', cursive;
    text-align: center;
    font-size: 4em;
    padding: 1.5em 0;
}

.playcontent {
    text-align: center;
}

.play-btn {
    font-family: 'Bangers', cursive;
    font-size: 2em;
    border: #000 2px solid;
    margin-right: 10px;
    text-decoration: none;
    color: #000;
    background-color: #faa535;
    padding: 10px;
    border-radius: 5%;
}

.play-btn:hover {
    background-color: #d18828;
}

.sky {
    background-color: #8EE8F9;
}

.sky2 {
    background-color: #8EE8F9;
    height: 27em;

}

.sun {
    position: absolute;
    width: 10em;
    border-radius: 100%;
    background-color: #FBAF70;
    height: 10em;
    left: 80%;
    top: 2em;
}

.ground {
    background-color: #89D74B;
    height: 17em;
}

.ground2 {
    background-color: #89D74B;
    height: 19em;
    margin-top: 20.5%;
}

@media screen and (max-width : 768px) {
    section {
        background: url("../img/768px.png");
        background-repeat: no-repeat;
    }

    .sky {
        background-color: transparent;
    }

    .sky2 {
        background-color: transparent;
        height: 27em;

    }

    #gameOver {
        width: 20%;
    }

    .sun {
        position: unset;
        width: 0em;
        border-radius: 0%;
        background-color: transparent;
        height: 0em;
        left: 0%;
        top: 0em;
    }

    .ground {
        background-color: transparent;
        height: 17em;
    }

    .ground2 {
        background-color: transparent;
        height: 0em;
        margin-top: 0%;
    }
}

@media screen and (max-width : 426px) {
    section {
        background: url("../img/425px.png");
        background-repeat: no-repeat;
    }

    .sky {
        background-color: transparent;
    }

    .sky2 {
        background-color: transparent;
        height: 27em;

    }

    .sun {
        position: unset;
        width: 0em;
        border-radius: 0%;
        background-color: transparent;
        height: 0em;
        left: 0%;
        top: 0em;
    }

    .ground {
        background-color: transparent;
        height: 17em;
    }

    .ground2 {
        background-color: transparent;
        height: 0em;
        margin-top: 0%;
    }
}

@media screen and (max-width : 375px) {
    section {
        background: url("../img/375px.png");
        background-repeat: no-repeat;
    }

    .sky {
        background-color: transparent;
    }

    .sky2 {
        background-color: transparent;
        height: 27em;

    }

    .sun {
        position: unset;
        width: 0em;
        border-radius: 0%;
        background-color: transparent;
        height: 0em;
        left: 0%;
        top: 0em;
    }

    .ground {
        background-color: transparent;
        height: 17em;
    }

    .ground2 {
        background-color: transparent;
        height: 0em;
        margin-top: 0%;
    }
}

@media screen and (max-width : 320px) {
    section {
        background: url("../img/320px.png");
        background-repeat: no-repeat;
    }

    .sky {
        background-color: transparent;
    }

    .sky2 {
        background-color: transparent;
        height: 27em;

    }

    .sun {
        position: unset;
        width: 0em;
        border-radius: 0%;
        background-color: transparent;
        height: 0em;
        left: 0%;
        top: 0em;
    }

    .ground {
        background-color: transparent;
        height: 17em;
    }

    .ground2 {
        background-color: transparent;
        height: 0em;
        margin-top: 0%;
    }
}

@media screen and (max-width : 1439px) {
    .sky {
        height: 27em;
    }

    .ground {
        height: 17em;
    }

    .titlee {
        font-size: 4em;
    }

    .play-btn {
        font-size: 2em;
        padding: 10px;
    }
}

@media screen and (min-width : 1700px) {
    .sky {
        height: 40em;
    }

    .sky2 {
        height: 42em;
    }

    .ground {
        background-color: #89d74b;
        height: 33em;
    }

    .ground2 {
        background-color: #89d74b;
        height: 32em;
    }

    .play-btn {
        font-size: 5em;
        padding: 30px;
    }

    .titlee {
        font-size: 8em;
    }

    #defaultCanvas0 {
        margin-left: 40%;
        margin-top: -15%;
        width: 500px;
        height: 500px;
    }
}