:root {
	--c-comet-top: #18679b;
	--c-comet-bottom: #1eb0fd;
	--c-purple: #961289;
	--c-white: #fff;
}

* {
	box-sizing: border-box;
}

body  {
	margin: 0;
	height: 100vh;
	background: linear-gradient(135deg, #121022, #32243f);
}

.comet, 
.comet__body,
.comet__glow,
.particle,
.core,
.core__beam {
	position: absolute;
}

.comet {
	height: 70vh;
	width: 250px;
	background: linear-gradient(var(--c-comet-top), var(--c-comet-bottom), var(--c-comet-bottom), var(--c-comet-bottom));
	left: 250px;
	position: absolute;
	animation: shake-vertical 10s infinite, shake-horizontal 15s infinite;
}

.comet__body {
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background-color: var(--c-comet-bottom);
	bottom: -125px;
}

.comet__glow {
	background-color: rgba(96, 12, 89, 0.3);
	border-radius: 50%;
	left: -20px;
	top: -20px;
	width: 290px;
	height: 290px;
	animation: pulse 15s infinite;
}

.core {
	background-color: var(--c-purple);
	border-radius: 50%;
	width: 210px;
	height: 210px;
	left: 20px;
	right: 20px;
	bottom: 20px;
}

.particle {
	background-color: var(--c-white);
	border-radius: 50%;
}

.particle.-s {
	width: 7px;
	height: 7px;
}

.particle.-l {
	width: 10px;
	height: 10px;
}

.particle.-m {
	width: 15px;
	height: 15px;
}

.particle:nth-child(1) {
	bottom: 45px;
	left: 35px;
	animation: shining 17s infinite, particle-move 20s infinite;
}

.particle:nth-child(2) {
	bottom: 100px;
	left: -15px;
	animation: shining 43s infinite, particle-move 20s infinite reverse;
}

.particle:nth-child(3) {
	bottom: 220px;
	left: 10px;
	animation: shining 27s infinite, particle-move 10s infinite reverse;
}

.particle:nth-child(4) {
	bottom: 30px;
	right: 65px;
	animation: shining 40s infinite, particle-move3 15s infinite;
}

.particle:nth-child(5) {
	bottom: 130px;
	right: 0px;
	animation: shining 25s infinite, particle-move 30s infinite reverse;
}

.particle:nth-child(6) {
	bottom: 60px;
	right: 0px;
	animation: shining 10s infinite, particle-move2 10s infinite reverse;
}

.particle:nth-child(7) {
	bottom: 90px;
	right: 30px;
	animation: shining 3s infinite, particle-move3 15s infinite reverse;
}

.core__beam.-outer {
	background-color: var(--c-purple);
	width: 25px;
}

.core__beam.-inner {
	background-color: var(--c-comet-bottom);
	width: 20px;
}

.core__beam.-outer:before {
	content: "";
	display: block;
	
	position: absolute;
	height: 25px;
	width: 25px;
	border-radius: 50%;
	top: -10px;
	background-color: var(--c-purple);
}

.core__beam.-inner:before {
	content: "";
	display: block;
	
	position: absolute;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	bottom: -10px;
	background-color: var(--c-comet-bottom);
}

.core__beam.-outer:nth-child(1) {
	height: 400px;
	bottom: 70px;
	left: 25px;
	animation: beam-outer-move-1 10s infinite;
}


.core__beam.-outer:nth-child(3) {
	height: 600px;
	bottom: 70px;
	left: 70px;
	animation: beam-outer-move-2 10s infinite;
}

.core__beam.-outer:nth-child(5) {
	height: 280px;
	bottom: 50px;
	left: 115px;
	animation: beam-outer-move-3 10s infinite;
}

.core__beam.-outer:nth-child(7) {
	height: 500px;
	bottom: 70px;
	left: 160px;
	animation: beam-outer-move-4 10s infinite;
}

.core__beam.-inner:nth-child(2) {
	height: 350px;
	bottom: 160px;
	left: 50px;
	animation: beam-inner-move 10s infinite;
}

.core__beam.-inner:nth-child(4) {
	height: 350px;
	bottom: 190px;
	left: 95px;
	animation: beam-inner-move-2 10s infinite;
}

.core__beam.-inner:nth-child(6) {
	height: 350px;
	bottom: 140px;
	left: 140px;
	animation: beam-inner-move-3 10s infinite;
}

@keyframes shining {
	0% {opacity: 1;}
	50% {opacity: .2;}
	100% {opacity: 1;}
}


@keyframes particle-move {
	0% {
	transform: translate(0) scale(1);
	}

	25% {
	transform: translate(30px, -40px) scale(.3);
	}

	50% {
	transform: translate(-20px, -20px) scale(.6);
	}

	75% {
	transform: translate(40px, 50px) scale(1.4);
	}

	100% {
	transform: translate(0) scale(1);
	}
}

@keyframes particle-move2 {
	0% {
	transform: translate(0) scale(1);
	}

	25% {
	transform: translate(-30px, 40px) scale(.3);
	}

	50% {
	transform: translate(20px, 20px) scale(1);
	}

	75% {
	transform: translate(-40px, -50px) scale(.7);
	}

	100% {
	transform: translate(0) scale(1);
	}
}


@keyframes particle-move3 {
	0% {
	transform: translate(0) scale(1);
	}

	25% {
	transform: translate(10px, 15px) scale(.6);
	}

	50% {
	transform: translate(25px, -20px) scale(1);
	}

	75% {
	transform: translate(40px, -50px) scale(.7);
	}

	100% {
	transform: translate(0) scale(1);
	}
}

@keyframes pulse {
	0% {transform: scale(1);}
	50% {transform: scale(1.2);}
	100% {transform: scale(1);}
}

@keyframes shake-horizontal {
	0% {left: 250px;}
	25% {left: 220px;}
	50% {left: 240px;}
	75% {left: 260px;}
	100% {left: 250px;}
}

@keyframes shake-vertical {
	0% {transform: translateY(0);}
	25% {transform: translateY(-20px);}
	50% {transform: translateY(40px);}
	75% {transform: translateY(20px);}
	100% {transform: translateY(0);}
}


@keyframes beam-outer-move-1 {
	0% {height: 400px;}
	25% {height: 500px;}
	50% {height: 470px;}
	75% {height: 530px;}
	100% {height: 400px;}
}

@keyframes beam-outer-move-2 {
	0% {height: 600px;}
	25% {height: 550px;}
	50% {height: 470px;}
	75% {height: 530px;}
	100% {height: 600px;}
}

@keyframes beam-outer-move-3 {
	0% {height: 280px;}
	25% {height: 270px;}
	50% {height: 330px;}
	75% {height: 300px;}
	100% {height: 280px;}
}

@keyframes beam-outer-move-4 {
	0% {height: 500px;}
	25% {height: 470px;}
	50% {height: 430px;}
	75% {height: 490px;}
	100% {height: 500px;}
}

@keyframes beam-inner-move {
	0% {bottom: 160px;}
	25% {bottom: 170px;}
	50% {bottom: 130px;}
	75% {bottom: 150px;}
	100% {bottom: 160px;}
}

@keyframes beam-inner-move-2 {
	0% {bottom: 190px;}
	25% {bottom: 200px;}
	50% {bottom: 160px;}
	75% {bottom: 170px;}
	100% {bottom: 190px;}
}

@keyframes beam-inner-move-3 {
	0% {bottom: 140px;}
	25% {bottom: 150px;}
	50% {bottom: 120px;}
	75% {bottom: 150px;}
	100% {bottom: 140px;}
}