.mainimage{
    position: absolute;
    top: 24%;
    left: 28%;
    width: 52%;
}
.punctuationsymbol1{
    width: 8%;
    position: absolute;
    top: 19%;
    left: 8%;
}
.query1{
    right: 78.4%;
    top: 68%;

}
.query2{
    left: 19%;
    top: 68%;

}
.query3{
    top: 77%;
    right: 70%;

}
.dropbox1{
    top: 65%;
    left: 15%;
}
.im3image{
    transform:rotateY(180deg)
}
.subquery1{
    top: 68%;
}
.subquery2{
    right: 39%;
}
.text1{
    text-align: center;
    padding-top: 2%;
}
.commaanim{
    color: #A61C00;
    position: absolute;
    opacity: 0;
    animation: comani 3s linear 1s forwards;
    -webkit-animation: comanim 3s linear 1s forwards;
    animation-delay: 15s;
}
.commaanim1{
    color: #A61C00;
    position: absolute;
    opacity: 0;
    animation: comani 3s linear 1s forwards;
    -webkit-animation: comanim 3s linear 1s forwards;
    animation-delay: 4s;
}

@keyframes comanim {
    0%{
        opacity: 0;
        transform: translateY(400%);
    }
    100%{
        opacity: 1;
        transform: translateY(0%);
    }
}
.droppable >p {
    bottom:58%;
}
.punctutationtopic{
    padding:2%;
}
.lowertext{
    top:82%;
}