body {
    overflow: hidden;
    background-image: url('../images/farmyard.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100vh;
}

.animateBee {
    height: 5vh;
    width: 5vh;
    position: absolute;
    animation: animateBee 20s infinite;

    z-index: 8;
}

@keyframes animateBee {
    to {
        left: 150vw;
    }
}

.catPlant {
    z-index: 8;
}

.rain {
    position: absolute;

    top: 0px; 
    bottom: 0px;
    left: 0px;
    right: 0px;

    z-index: 9;

    height: 100vh;
    width: 100vw;
}

.walker {
    position: absolute;

    top: 0px; 
    bottom: 0px;
    left: 0px;
    right: 0px;

    height: 100vh;
    width: 100vw;
    z-index: 11;
}

.harvest {
    position: absolute;

    top: 0px; 
    bottom: 0px;
    left: 0px;
    right: 0px;

    height: 100vh;
    width: 100vw;
    z-index: 11;
}

.nighttime {
    position: absolute;

    top: 0px; 
    bottom: 0px;
    left: 0px;
    right: 0px;

    z-index: 10;


    height: 100vh;
    width: 100vw;

    opacity: 0;
    transition-timing-function: linear;
    transition: opacity 3s;
}

.bellPeppers {
    clip: rect(0px, 460px, 364px, 230px);
    margin-left: -230px;
}


.chillies {
    clip: rect(0px, 454px, 370px, 227px);
    margin-left: -227px;
}


.melons {
    clip: rect(0px, 904px, 244px, 452px);
    margin-left: -452px;
}


.peas {
    clip: rect(0px, 502px, 314px, 251px);
    margin-left: -251px;
}


.tomatoes {
    clip: rect(0px, 416px, 349px, 208px);
    margin-left: -208px;
}


.cabbage {
    clip: rect(0px, 500px, 135px, 250px);
    margin-left: -250px;
}


.eggPlant {
    clip: rect(0px, 568px, 371px, 284px);
    margin-left: -284px;
}


.melonvine {
    clip: rect(0px, 378px, 349px, 189px);
    margin-left: -189px;
}