* {
    box-sizing: border-box;
}

body {
margin:0;
background-color: rgb(0, 0, 0);
}


.flex {
    display:flex;
    width:100vw;
    height:100vh;
    align-items:center; 
    justify-content:space-around;
}

.h1 {
color: plum;
}

.circle {
    width:200px;
    height: 200px;
    background-color: rgb(183, 0, 0);
    border-radius:50%;
    
    box-shadow:  0 0 60px 30px #fff,  /* inner white */
    0 0 100px 60px #f0f, /* middle magenta */
    0 0 140px 90px rgb(26, 41, 250); /* outer cyan */;
    animation: pulse 4s infinite alternate ease-in-out;
    
}

.circle2 {
    width:300px;
    height: 300px;
    background-color: rgb(183, 0, 0);
    border-radius:50%;
    box-shadow:  0 0 60px 30px #fff,  /* inner white */
    0 0 100px 60px #f0f, /* middle magenta */
    0 0 140px 90px rgb(26, 41, 250); /* outer cyan */;
    animation: pulse 4s infinite alternate ease-in-out;
    
}

.square {
    width:300px;
    height: 300px;
    background-color: rgb(143, 5, 5);
    animation: spin 4s infinite linear
    
}

.mover {
    width: 200px;
    height: 50px;
    background-color: red;
    position:fixed;
    bottom:0;
    left:0;

    animation: move 4s infinite;
}

@keyframes pulse {
    0% {
        background-image: radial-gradient(circle, #1e00ff 0%, #000000 100%);
        transform:scale(.5)
        translateY(0)
    }

    100% {
        background-image: radial-gradient(circle, #e20000 0%, #110270 100%);
        transform:scale(1.5)
        translateY(100%)
        
    }
}