* {
    box-sizing: border-box;
}

body {
    margin:0;
}
img {
    max-width:100%
}

.container {
    background:whitesmoke;
    height:100vh; /*vh stands for viewport height*/
    display:flex;
    align-items:center;
    justify-content:center; /*to align you can also use space-evenly, space-around*/
    gap:20vw;
    position:relative;
    overflow:hidden;
}

.circle {
    background:red;
    width:15vw; /*vh stands for viewport width*/
    height:15vw;
    border-radius:50%;
    opacity:100% ;
    position:fixed;
    bottom: 400px;
    left: 650px;

    animation-name: spin;
    animation-duration: 10s;
    animation-delay:0s;
    animation-iteration-count:infinite;
    animation-direction:normal;
    animation-timing-function:ease-in-out;
    animation-fill-mode:both;

    animation: pulse  5s infinite 
    alternate ease-in-out both;
}

.circle2 {
    background:rgb(39, 238, 39);
    width:15vw;
    height:15vw;
    z-index: 1;
    border-radius:50%;
    opacity:100%;
    position:fixed;
    bottom:260px;
    left:555px;
    

    animation-name:spin;
    animation-duration: 10s;
    animation-delay:0s;
    animation-iteration-count:infinite;
    animation-direction:normal;
    
    animation: pulse2  5s infinite alternate ease-in-out both;

}

.circle3 {
    background:blue;
    width:15vw;
    height:15vw;
    border-radius:50%;
    opacity:100%;
    position:fixed;
    bottom:260px;
    left:735px;

    animation-name:spin;
    animation-duration: 10s;
    animation-iteration-count:infinite;
    animation-direction:normal;

    animation: pulse3 5s infinite alternate ease-in-out both;


}

@keyframes pulse {
    0% {
        background:red;
        transform: scale(1);
    }
    100% {
        background:red;
        transform: scale(3);
        opacity: 20%
    }
}

@keyframes pulse2 {
    0% {
        background:rgb(39, 238, 39);
        transform: scale(1);
    }
    100% {
        background:rgb(39, 238, 39);
        transform: scale(3);
        opacity: 20%
    }
}

@keyframes pulse3 {
    0% {
        background:blue;
        transform: scale(1);
    }
    100% {
        background:blue;
        transform: scale(3);
        opacity: 20%
    }
}