/*
 * PureCSS.com
 * https://purecss.com/examples/css-art/
 * An orbiting solar system drawn and animated entirely with CSS.
 */

.demo-css-art {
	display: flex;
	align-items: center;
	justify-content: center;
}

.demo-css-art .solar-system {
		position: relative;
		width: 280px;
		height: 280px;
	}

.demo-css-art .star {
		position: absolute;
		border-radius: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 36px;
		height: 36px;
		background: radial-gradient(circle at 35% 35%, var(--yellow), #ff9040);
		box-shadow:
			0 0 12px 4px rgba(255, 212, 68, 0.5),
			0 0 40px 10px rgba(255, 212, 68, 0.15);
		animation: star-pulse 3s ease-in-out infinite;
	}

.demo-css-art .orbit {
		position: absolute;
		border-radius: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border: 1px dashed rgba(255, 255, 255, .1);
		animation: orbit-spin linear infinite;
	}

:is(.demo-css-art .orbit) .planet {
			position: absolute;
			border-radius: 50%;
			top: 50%;
			left: 0;
		}

.demo-css-art .orbit-1 {
		width: 90px;
		height: 90px;
		animation-duration: 4s;
	}

:is(.demo-css-art .orbit-1) .planet {
			width: 10px;
			height: 10px;
			background: radial-gradient(circle at 35% 35%, var(--sky), #0055aa);
			margin-top: -5px;
			margin-left: -5px;
			box-shadow: 0 0 6px rgba(56, 189, 248, .6);
		}

.demo-css-art .orbit-2 {
		width: 156px;
		height: 156px;
		animation-duration: 8s;
	}

:is(.demo-css-art .orbit-2) .planet {
			width: 14px;
			height: 14px;
			background: radial-gradient(circle at 35% 35%, var(--coral), #991111);
			margin-top: -7px;
			margin-left: -7px;
			box-shadow: 0 0 8px rgba(255, 107, 107, .5);
		}

.demo-css-art .orbit-3 {
		width: 224px;
		height: 224px;
		animation-duration: 14s;
	}

:is(.demo-css-art .orbit-3) .planet {
			width: 11px;
			height: 11px;
			background: radial-gradient(circle at 35% 35%, var(--violet), #550099);
			margin-top: -5.5px;
			margin-left: -5.5px;
			box-shadow: 0 0 7px rgba(192, 132, 252, .5);
		}

.demo-css-art .orbit-4 {
		width: 272px;
		height: 272px;
		animation-duration: 22s;
	}

:is(.demo-css-art .orbit-4) .planet {
			width: 8px;
			height: 8px;
			background: radial-gradient(circle at 35% 35%, var(--teal), #006644);
			margin-top: -4px;
			margin-left: -4px;
			box-shadow: 0 0 6px rgba(87, 217, 163, .5);
		}

.demo-css-art .star-field {
		position: absolute;
		inset: 0;
		border-radius: 50%;
		pointer-events: none;
	}

:is(.demo-css-art .star-field)::before,:is(.demo-css-art .star-field)::after {
			content: "";
			position: absolute;
			border-radius: 50%;
			background: white;
		}

:is(.demo-css-art .star-field)::before {
			width: 2px;
			height: 2px;
			top: 20%;
			left: 15%;
			box-shadow:
				40px -10px 0 0 rgba(255,255,255,.4),
				80px 30px 0 0 rgba(255,255,255,.3),
				-20px 60px 0 0 rgba(255,255,255,.5),
				110px -20px 0 0 rgba(255,255,255,.3),
				-30px -10px 0 0 rgba(255,255,255,.4),
				120px 70px 0 0 rgba(255,255,255,.2);
		}

:is(.demo-css-art .star-field)::after {
			width: 1px;
			height: 1px;
			top: 60%;
			left: 70%;
			box-shadow:
				-40px 20px 0 0 rgba(255,255,255,.4),
				20px -30px 0 0 rgba(255,255,255,.3),
				-80px -10px 0 0 rgba(255,255,255,.5),
				30px 40px 0 0 rgba(255,255,255,.2);
		}

@keyframes orbit-spin {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes star-pulse {
	0%, 100% {
		box-shadow:
			0 0 12px 4px rgba(255, 212, 68, 0.5),
			0 0 40px 10px rgba(255, 212, 68, 0.15);
	}
	50% {
		box-shadow:
			0 0 18px 8px rgba(255, 212, 68, 0.7),
			0 0 60px 20px rgba(255, 212, 68, 0.25);
	}
}