*{box-sizing:border-box;
}
body{
    margin:0;
}
.flex{
height:100vh;
width:100vw;
background:lightblue;
display:flex;
justify-content: space-evenly;
align-items:center;
}

.circle{
    background-color:#f7ecdb;
    width: 20vw;
    height:20vw;
    border-radius:100%;
    animation-name:pulse;
    /* animation-duration:2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in; */
animation: pulse 2s infinite alternate;
}

.square-container{
animation:spin 15s infinite linear;
background-color:brown;
padding:30px;
}
.square{
    background-color:#fc7b1f;
    width: 20vw;
    height:20vw;
    animation: pulse 2s infinite alternate;
}
.mover {
    background-color:#4b43b6;
    width:15vw;
    height:3vw;
    position:fixed;
    bottom:0;
    left:0;
    animation: move 4s infinite linear;
}

@keyframes pulse {
    0% {background-color:#f7ecdb;
        transform:scale(1);
        opacity:1}

    100% {background-color:#fc7b1f;
        transform:scale(1.5);
        opacity:0}
}
/* @keyframes spincolor{ */

@keyframes spin{
    0%{ transform:rotate(0);
    background-color:#fc7b1f;}

    100%{ transform:rotate(360deg);
    background-color:#f7ecdb;}
}

@keyframes move {
    0%{
    /* left:-15vw;} */
    transform:translatex(-16vw);}

    100%{
    /* left:110%; */
    transform:translatex(110vw);}
}
/* transform is often encouraged over write in positioning */