.northern-lights {
    position: relative;
    z-index: 0;

    .container {
        position: relative;
    }

    .aurora-borealis {
        position: absolute;
    }

    &--right {
        .aurora-borealis {
            &:first-child {
                right: 12%;
            }

            &:last-child {
                right: 5%;
            }
        }
    }

    &--left {
        .aurora-borealis {
            &:first-child {
                left: 12%;
            }

            &:last-child {
                left: 5%;
            }
        }
    }
}

.aurora-borealis {
    width: 50px;
    height: 50px;
    position: static;

    &::before {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%) rotate(-53.34deg);
    }

    &--big::before {
        width: 825px;
        height: 50px;
        filter: blur(35px);
        border-radius: 100%;
        opacity: 0.07;
    }

    &--middle::before {
        width: 602px;
        height: 73px;
        filter: blur(35px);
        border-radius: 602px;
        opacity: 0.09;
    }

    &--thin::before {
        width: 582px;
        height: 11px;
        filter: blur(12px);
        border-radius: 50%;
        opacity: 0.2;
    }

    &--blue::before {
        background: #1e88e5;
    }

    &--green::before {
        background: #43a047;
    }

    &--pink::before {
        background: #ab60b8;
    }

    &--white::before {
        background: #fff;
    }
}
