sorting.css

/* transition for sorting bars in heading starts here */

.heading:hover{
    cursor: pointer;
}
.myanimation{
    display: inline-block;
    width:2em;
    /* transition: 1s ease-in-out; */
    margin-left: 25px;
}
@keyframes bar-shorting{
    from{
        transform: translateX(0em);
    }
    to{
        transform: translateX(1em); 
    }
}
.myanimation1{
    display: inline-block;
    height: 30px;
    width: 7%;
    border-radius: 10px;
    background-color: rgb(54, 127, 168);
    animation: bar-shorting 1s ease-in-out 0.5s infinite alternate;
}
.myanimation2{
    display: inline-block;
    height: 15px;
    width: 7%;
    border-radius: 10px;
    background-color: rgb(54, 127, 168);
    
    /* background-color: darkgoldenrod */
}
.myanimation3{
    display: inline-block;
    height: 25px;
    width: 7%;
    border-radius: 10px;
    background-color: rgb(54, 127, 168);
}
/* transition for sorting bars in heading ends here*/

.mybdy{
    background-color:#E8F6EF;
}
.mybtn{
    margin:2px;
    transition: 1s ease-in-out;
}   
.mybtn:hover{
    transform:scale(1.2);
}
.heading{
    margin-left: 15px;
    font-family: 'Praise', cursive;
    margin-right: 50px;
    /* font-size: 250%; */
    display: inline-block;
}
.bars{
    margin: 5% auto;
    padding: auto 10px;
    width:95%;
}

.speed-size{
    margin:4px 10%;
}
.speed{
    display: inline-block;
}
.size{
    display: inline-block;
}
/* #b3edeee0 */