.light-circle-red {
	z-index: -100;
    overflow: hidden;
	background: #6c1a1daf;
	border-radius: 50%;
	filter: blur(6em);
}

.light-circle-purple {
    z-index: -100;
    overflow: hidden;
	background: #471a6c9a;
	border-radius: 50%;
	filter: blur(6em);
}

.lc-top {
    position: absolute;
    width: 270px;
	aspect-ratio: 1 / 1;
	top: 650px;
    left: 15px;
}

.lc-bottom {
    position: absolute;
    width: 270px;
	aspect-ratio: 1 / 1;
	top: 1650px;
    left: 15px;
}

@media screen and (min-width: 320px){

    .lc-top {
        top: 650px;
        left: 25px;
    }

    .lc-bottom {
        top: 1600px;
        left: 25px;
    }
}

@media screen and (min-width: 326px){

    .lc-top {
        top: 755px;
        left: 30px;
    }

    .lc-bottom {
        top: 1900px;
        left: 30px;
    }
}

@media screen and (min-width: 330px){

    .lc-top {
        top: 735px;
        left: 30px;
    }

    .lc-bottom {
        top: 1860px;
        left: 30px;
    }
}

@media screen and (min-width: 340px){

    .lc-top {
        top: 735px;
        left: 30px;
    }

    .lc-bottom {
        top: 1820px;
        left: 30px;
    }
}

@media screen and (min-width: 350px){

    .lc-top {
        top: 735px;
        left: 40px;
    }

    .lc-bottom {
        top: 1800px;
        left: 40px;
    }
}

@media screen and (min-width: 356px){

    .lc-top {
        top: 735px;
        left: 40px;
    }

    .lc-bottom {
        top: 1770px;
        left: 40px;
    }
}

@media screen and (min-width: 366px){

    .lc-top {
        width: 300px;
        top: 820px;
        left: 40px;
    }

    .lc-bottom {
        width: 300px;
        top: 1690px;
        left: 40px;
    }
}

@media screen and (min-width: 371px){

    .lc-top {
        width: 300px;
        top: 820px;
        left: 40px;
    }

    .lc-bottom {
        width: 300px;
        top: 1650px;
        left: 40px;
    }
}

@media screen and (min-width: 390px){

    .lc-top {
        width: 300px;
        top: 820px;
        left: 50px;
    }

    .lc-bottom {
        width: 300px;
        top: 1620px;
        left: 50px;
    }
}

@media screen and (min-width: 419px){

    .lc-top {
        width: 300px;
        top: 820px;
        left: 60px;
    }

    .lc-bottom {
        width: 300px;
        top: 1590px;
        left: 60px;
    }
}

@media screen and (min-width: 426px){

    .lc-top {
        width: 350px;
        top: 900px;
        left: 35px;
    }

    .lc-bottom {
        width: 350px;
        top: 1650px;
        left: 35px;
    }
}

@media screen and (min-width: 456px){

    .lc-top {
        width: 350px;
        top: 900px;
        left: 60px;
    }

    .lc-bottom {
        width: 350px;
        top: 1560px;
        left: 60px;
    }
}

@media screen and (min-width: 501px){

    .lc-top {
        width: 375px;
        top: 980px;
        left: 70px;
    }

    .lc-bottom {
        width: 375px;
        top: 1600px;
        left: 70px;
    }
}

@media screen and (min-width: 540px){

    .lc-top {
        width: 375px;
        top: 980px;
        left: 85px;
    }

    .lc-bottom {
        width: 375px;
        top: 1570px;
        left: 85px;
    }
}

@media screen and (min-width: 565px){

    .light-circle-red {
        
        display: none;
    }
    
    .light-circle-purple {
        
        display: none;
    }

    .lc-top {
        display: none;
    }

    .lc-bottom {
       
        display: none;
    }
}