* {
    box-sizing: border-box;
}

body {
    margin:0;
    background: rgb(2,0,36);
        background: linear-gradient(342deg, rgba(2, 0, 36, 0.46) 0%, rgba(9,9,121,0.46682422969187676) 35%, rgba(0, 213, 255, 0.5) 100%);
    animation: colorshift 10s infinite alternate ease-out;
}

.flex {
    height: 100vh;
    width: 100vw;
    display:flex;
    justify-content: space-evenly;
    align-items: flex-end;
    overflow:hidden;
}

.container1 {
    height: 100vh;
    width: 100vw;
    display:flex;
    justify-content: space-evenly;
    align-items: flex-end;
    overflow:hidden;
    flex-direction: row;
}

.circle {
    animation: spin 10s infinite linear;
    background-color: transparent;
    width: 2vw;
    height:2vw;
    border-radius:100%;
    border:3px dotted;
    border-color:white
}

.firework {
    animation: spin 10s infinite linear;
    background-color: transparent;
    width: 20vw;
    height:20vw;
    border-radius:100%;
    border:3px dotted;
    border-color:white
}

.smaller_circle {
    animation: spin 8s infinite linear;
    background-color: transparent;
    width: 1.5vw;
    height:1.5vw;
    border-radius:100%;
    border:2px dotted;
    border-color:white;
}

.circle_container {
    background-color: transparent;
    width: 2vw;
    height:2vw;
    border-radius:100%;
    animation: pulse 5s infinite alternate ease-out;
}

.shooting {
    display:flex;
    justify-content: center;
    align-items: center;
    animation: shooting 5s infinite alternate ease-out;
}

.mover2{
    background-color: transparent;
    width:15vw;
    height:2.2vw;
    border:2px dotted;
    border-color:transparent;
    position:fixed;
    bottom:0;
    left:0;
    animation: move 5s infinite ease-out;
    display:flex;
    justify-content: space-evenly;
    align-items: flex-end;
}
.mover {
    background-color: transparent;
    width:10vw;
    height:1vw;
    border:2px dotted;
    border-color:white;
    position:fixed;
    bottom:0;
    left:0;
    animation: move 5s infinite ease-out;
}

.rolling {
    animation: roll 30s infinite
}
@keyframes pulse {
    0% {
        transform:scale(0.1);
        opacity:0;
    }
    100% {
        transform:scale(1);
        opacity:1;
    }
}

@keyframes colorshift {
    0% {
        background: rgb(2,0,36);
        background: linear-gradient(342deg, rgba(2, 0, 36, 0.46) 0%, rgba(9,9,121,0.46682422969187676) 35%, rgba(0, 213, 255, 0.5) 100%);
        opacity:1;

    }

    75% {
        opacity: 0.75;;
    }
    100% {
        background: rgb(2,0,36);
        background: linear-gradient(342deg, rgba(2, 0, 36, 0.46) 0%, rgba(9,9,121,0.46682422969187676) 35%, rgba(0, 213, 255, 0.5) 100%);
        opacity:0;
    }
}

@keyframes spin {
    0%{
        transform:rotate(0);
    }
    100%{
        transform:rotate(360deg);
    }
}

@keyframes move {
    0% {
        /* left:-16vw; */
        transform:translateX(-16vw)
    }
    100% {
        /* left:110%; */
        transform:translateX(110vw)
    }
}

@keyframes roll {
    0% {
        /* left:-16vw; */
        transform:translateX(0vw)
    }
    100% {
        /* left:110%; */
        transform:translateX(100vw)
    }
}

@keyframes shooting {
    0% {
        transform: translateY(5vh)
    }
    100% {
        transform: translateY(-80vh)
    }
}