body{
    background-color: rgb(208, 142, 142);
}


.box{
    width: 100px;
    height: 100px;
    background-color: rgb(177, 16, 16);
    position: relative;
    animation-name: box;
    animation-duration: 4s;
    animation-iteration-count: infinite;

}
/*---------------------IM GOING FERAL I WANT CEREAL-------------------------*/ 
@keyframes box {
   0%{
    background-color: 
    rgb(177, 16, 16);
    width: 100px;
    height: 100px;
    left: 0px;
    top: 0px;
}
   25%{
    background-color: 
    beige;
    width: 30px;
    height: 100px;
    left: 200px;
    top: 0px;
}
26%{
    background-color: black;
    width: 500000px;
    height: 5000000px;
}
27%{
    background-color: 
    beige;
    width: 30px;
    height: 100px;
    left: 200px;
    top: 0px;
}


75%{
    background-color: 
    rgb(177, 16, 16);
    width: 35px;
    height: 100px;
    left: 400px;
    top: 0px;
}

100%{
    background-color: beige;
    width: 100px;
    height: 100px;
    left:800px;
    top:100px;
}

}




.circle{

}
@keyframes circle {
    50%{
    background-color: beige;
    width: 30px;
    height: 100px;
    }

    100%{
        background-color: black;
        width: 60000px;
        height: 60000px;
    }

}