<!-- Inspired by a video from @appliedesoterics https://www.instagram.com/appliedesoterics/ -->
    <section class="main">
        <div class="main__content">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </section>

// Global Styles

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
     overflow: hidden; 
}

// Placeholders
%flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

// Main Styles

.main {
    width: 100%;
    height: 100%;
    @extend %flex-center;

    &__content {
        width: 100%;
        height: 100%;
        background: #161616;
        @extend %flex-center;
    }
}

.main__content {
    
        div {
        position: absolute;
        border-top : 2rem solid #161616;
        border-right : 2rem solid #161616;
        border-bottom : 2rem solid slateblue;
        border-left : 2rem solid slateblue;
        box-shadow: 2px 8px 40px rgba($color: #000, $alpha: .5);

        &:nth-child(1) {
            width: 20rem;
            height: 20rem;
            border-radius: 20rem;
            animation: cycleAnimation 24s linear forwards infinite;
            animation-delay: .1s
        }

        &:nth-child(2) {
            width: 16rem;
            height: 16rem;
            border-radius: 16rem;
            animation: cycleAnimation 12s linear forwards infinite;
        }
        
        &:nth-child(3) {
            width: 12rem;
            height: 12rem;
            border-radius: 12rem;
            animation: cycleAnimation 8s linear forwards infinite;
        }

        &:nth-child(4) {
            width: 8rem;
            height: 8rem;
            border-radius: 8rem;
            animation: cycleAnimation 6s linear forwards infinite;
        }

        &:nth-child(5) {
            width: 4rem;
            height: 4rem;
            border-radius: 4rem;
            animation: cycleAnimation 4s linear forwards infinite;
        }

        &:nth-child(6) {
            width: 0rem;
            height: 0rem;
            border-radius: 4rem;
            animation: cycleAnimation 2s linear forwards infinite;
        }
    }
}

@keyframes cycleAnimation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}