*{
    box-sizing:border-box;
}

body{
    margin:0;
}

img{
    max-width: 100%;
}

.square{
    background-color:burlywood;
    width:200px;
    height:200px;
    /* animation-name:test;
    animation-duration:4s;
    animation-delay: 2s;
    animation-iteration-count:1;
    animation-direction:alternate;
    animation-timing-function:ease;
    animation-fill-mode:both; */

    animation: test 4s 2s 1 alternate ease-in-out both;
}

@keyframes test {
    0% {
        background-color: red;
        width:200px;
    }

    100%{
        background-color: yellow;
        width:600px;
    }
}

.container{
    background-color:rgb(251, 206, 206);
    height:100vh;
    display:flex;
    justify-content:space-evenly;
    align-items:center;

    position:relative; /*this helps the mover stay positioned at the bottom corner of the container since the mover is absolutely positioned */
    overflow:hidden; /*allows the mover to actually go off page instead of creating scroll bars*/
}

.circle{
    background:rgb(97, 97, 181);
    width:10vw;
    height:10vw;
    border-radius:50%;

    animation-name: pulse;
    animation-duration:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-timing-function:ease-in-out;
}

@keyframes pulse{
    0%{
        background:rgb(97, 97, 181);
        scale:1;
    }

    100%{
        background:rgb(19, 79, 62);
        scale:1.5;
    }
}

.box{
    background:rgb(97, 97, 181);
    width:10vw;
    height:10vw;

    animation:spin;
    animation-duration:4s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}

@keyframes spin{
    0%{
        rotate:0;
    }

    100%{
        rotate:360deg;
    }
}

.mover{
    background:rgb(97, 97, 181);
    width:150px;
    height:50px;
    position:absolute;
    bottom:0;
    left:0;
    animation:move;
    animation-duration: 4s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}

@keyframes move{
    0%{
        left:-150px;
        background:rgb(97, 97, 181);
    }

    40%{
        rotate:0deg;
        background:rgb(97, 97, 181);
    }
    55%{
        rotate:180deg;
        background:rgb(19, 79, 62);
    }

    100%{
        left:100vw;
        rotate:180deg;
        background:rgb(19, 79, 62);
    }
}

.changer{
    background:rgb(97, 97, 181);
    width:10vw;
    height:10vw;
    transition: background 2s, 
                border-radius 1s, 
                rotate 2s; 
}

.changer:hover{
    background:rgb(19, 79, 62);
    border-radius:50%;
    rotate:180deg;
}