.bgmain{
    background-color: #85D4EE;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
}
.jaldevidiv{
    position: absolute;
    width: 43%;
    left: 0%;
    top: 3%;
}
.woodcutter{
    position: absolute;
    width: 17%;
    top: 41%;
    left: 82%;
}
.dialogbox{
    position: absolute;
    width: 45%;
    top: 10%;
    left: 30%;
}
.dialogbox1{
    position: absolute;
    width: 52%;
    top: 37%;
    left: 33%;
    height: 30%;
}
.title1{
    position: absolute;
    padding-top: 10%;
    left: 42%;
}
.title2{
    position: absolute;
    padding-top: 23%;
    left: 38%;
    width: 37%;
    text-align: justify;
}
.p1{
    position: absolute;
    padding-top: 10%;
    left: 69.5%;
    font-size: 2vw;
}
.title3{
    position: absolute;
    padding-top: 28%;
    left: 57%;
}
.title4{
    position: absolute;
    padding-top: 27%;
    left: 59%;
}
.title5{
    position: absolute;
    padding-top: 27%;
    left: 61%;
}
.title6{
    position: absolute;
    padding-top: 27%;
    left: 74%;
}
.title7{
    position: absolute;
    padding-top: 33%;
    left: 38%;
}
.title8{
    position: absolute;
    padding-top: 33%;
    left: 68%;
}
.title9{
    position: absolute;
    padding-top: 33%;
    left: 67%;
}
.contenttitle{
    font-size:1.5vw;
}
.punctuation{
    color: #A61C00;
}
.lowertext{
    position: absolute;
    top: 77%;
    width: 100%;
    background-color: #FAF6B3;
    height: 23%;
    border-radius: 16px;
    color:#0B539B;
    font-size: 1.5vw;
    padding-top: 2%;
}
.road{
    position: absolute;
    background-color: #808080;
    width: 100%;
    height: 17%;
    top: 61%;
}
.cyclinggirl{
    position: absolute;
    width: 23%;
    top: 18%;
    left: 75%;
    animation:cycling 3s linear 0s forwards;
}
.cyclinggirl1{
    display: block;
    position: absolute;
    width: 23%;
    top: 18%;
    left: 15%;
}
@keyframes cycling{
    0% {
       left:75%;

    }
    100%{
        left:15%;
    }
}
.eatinggrass{
    position: absolute;
    top: 24%;
    left: 26%;
}

.pushsymbolright{
    position: absolute;
    width: 8%;
    text-align: center;
    top:83%;
    color:#A61C00;
    font-weight: bold;
    animation: pushsymbolrightanim 1s linear 0s forwards;
}
@keyframes pushsymbolrightanim{
    0% {
        left:90%;
    }
    100%{
        left:64%;
    }
}

.pushsymbolright1{
    position: absolute;
    width: 7%;
    text-align: center;
    top:83%;
    color:#A61C00;
    font-weight: bold;
    animation: pushsymbolrightanim1 1s linear 0s forwards;
}
@keyframes pushsymbolrightanim1{
    0% {
        left:90%;
    }
    100%{
        left:58%;
    }
}
.droppable >p {
    bottom:59%;
}
.dropbox1{
    top: 70%;
    left: 28%;
}
.buble1{
    position: absolute;
    width: 10%;
    left: 58%;
    top: 4%;
}
.buble2{
    position: absolute;
    width: 10%;
    top: 4%;
    left: 76%;
}
.buble3{
    position: absolute;
    width: 10%;
    top: 24%;
    left: 49%;
}
.buble4{
    position: absolute;
    width: 10%;
    top: 24%;
    left: 67%;
}
.buble5{
    position: absolute;
    width: 10%;
    top: 24%;
    left: 84%;
}
.punctuationmark{
    color: #A61C00;
}