*{
    margin: 0;
}
main{
    display: block;
    width: 95vw;
    height: 95vh;
}
div {
	position: absolute;
	width: 56%;
	height: 27%;
	background: radial-gradient(#183f23, #59a39a, #610101);
	border-style: dashed;
	border-top-style: dotted;
	border-bottom-right-radius: 100%;
	filter: drop-shadow(1px 58px 283px #fc0707) blur(40px) hue-rotate(0deg);
	mix-blend-mode: hard-light;
	border-left-style: outset;
}
#one{
    top:0px;
    left:0px;
	border: 185.8px #bbdd45;
	border-style: dashed;
	border-top-style: dotted;
    border-left-style: outset;

    animation: animate 9s ease-out infinite;

}
#two{
    top:0px;
    right:0px;
	border: 185.8px #45cedd;
	border-style: dashed;
	border-top-style: dotted;
    border-left-style: outset;
    transform: scale(-1,1);    
    animation: animate 12s ease-in infinite;
}
#three{
    bottom:0px;
	border: 185.8px #7a45dd;
	border-style: dashed;
	border-top-style: dotted;
    border-left-style: outset;
    left:0px;
    animation: animate 13s ease infinite;
}
#four{
    bottom:0px;
	border: 185.8px #dd4552;
	border-style: dashed;
	border-top-style: dotted;
    border-left-style: outset;
    right:0px;
    transform: scale(1,-1);    
    animation: animate 10s ease-in-out infinite;
}


@keyframes animate{
    0%{
        filter: drop-shadow(1px 58px 283px #c5c5c5) blur(40px) hue-rotate(0deg);
    }
    25%{
        filter: drop-shadow(1px 18px 23px #370d0d) blur(120px) hue-rotate(50deg);
    }
    50%{
        filter: drop-shadow(1px 128px 83px #c5c5c5) blur(30px) hue-rotate(120deg);
    }
    75%{
        filter: drop-shadow(1px 18px 183px #2f0909) blur(120px) hue-rotate(70deg);
    }
    100%{
        filter: drop-shadow(1px 58px 283px #c5c5c5) blur(40px) hue-rotate(0deg);
    }
    
}