* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

html {
    background-image: url('../assets/kenney_rolling_ball_assets/background_brown.png');
    background-repeat: repeat;
}

/* COVER */

div#cover {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -9001;
    background-color: transparent;
    transition: background-color 2s;
}

/* LAND */

div#land {
    position: absolute;
    overflow: hidden;
    height: 200px;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

div#background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 65%,
            rgba(0, 0, 0, 0.15) 100%);
}

div#background {
    position: absolute;
    top: 0;
    left: 0;
    height: 180px;
    width: 100%;
    background-image: url('../assets/kenney_background_elements_redux/backgroundColorForest.png');
    background-repeat: repeat-x;
    background-size: 210px;
}

div#ground {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 40px;
    width: 100%;
    background-image: url('../assets/kenney_simplified_platformer_pack/platformPack_tile025.png');
    background-repeat: repeat-x;
}


/* WATER */

div#water div {
    position: absolute;
    overflow: hidden;
    background-repeat: repeat-x;
    background-size: contain;
}

div#water-front {
    bottom: -45px;
    left: -30px;
    height: 100px;
    width: 150%;
    background-image: url('../assets/kenney_shooting_gallery/water1.png');
    background-position: left -30px bottom -10px;
    animation: swayLeftRight 4s ease-in-out infinite;
    z-index: -1;
}

div#water-back {
    bottom: -70px;
    left: -30px;
    height: 100px;
    width: 150%;
    background-image: url('../assets/kenney_shooting_gallery/water2.png');
    background-position: left -45px bottom 0px;
    animation: swayRightLeft 4s ease-in-out infinite;
}

@keyframes swayLeftRight {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(-30px);
    }
}

@keyframes swayRightLeft {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(30px);
    }
}