*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #000000;
	min-height: 100vh;
	width: 100vw;
}

ol {
	all: unset;
	aspect-ratio: 1 / 1;
	container-type: inline-size;
	display: grid;
	width: 100%;
}

li {
	grid-area: 1 / 1;
	place-self: center;

	border: 1px dashed #fffa;
	border-radius: 50%;
	display: grid;
	aspect-ratio: 1 / 1;
	width: var(--d, 2cqi);
}

li::after {
	animation: rotate var(--t, 3s) linear infinite;
	aspect-ratio: 1 / 1;
	background: var(--b, hsl(0, 0%, 50%));
	border-radius: 50%;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
	content: '';
	display: block;
	offset-path: content-box;
	width: var(--w, 2cqi);
}


@keyframes rotate {
	to {
		offset-distance: 100%;
	}
}

.sun {
	--b: radial-gradient(circle, #f9d71c 0%, #f9a825 50%, #f9a825 100%);
	--w: 8cqi;
	--d: 10cqi;
	border: 0;
}

.sun::after {
	animation: none;
	offset-path: none;
	place-self: center;
}

.mercury {
	--b: radial-gradient(circle, #c2c2c2 0%, #8a8a8a 100%);
	--w: 2.0526cqi;
	--d: 15cqi;
	--t: 2105.26ms;
}

.venus {
	--b: radial-gradient(circle, #f4d03f 0%, #c39c43 100%);
	--w: 2.6053cqi;
	--d: 25cqi;
	--t: 4210.53ms;
}

.earth {
	--b: radial-gradient(circle, #3a82f7 0%, #2f93ee 80%, #1a5e20 100%);
	--w: 3.1579cqi;
	--d: 35cqi;
	--t: 6315.79ms;
}

.mars {
	--b: radial-gradient(circle, #e57373 0%, #af4448 100%);
	--w: 3.7105cqi;
	--d: 45cqi;
	--t: 8241.05ms;
}

.jupiter {
	--b: radial-gradient(circle, #d4a373 0%, #b36d32 50%, #f4e7d3 100%);
	--w: 4.8158cqi;
	--d: 60cqi;
	--t: 12631.58ms;
}

.saturn {
	--b: radial-gradient(circle, #e6dba0 0%, #c2a13e 100%);
	--w: 5.3864cqi;
	--d: 75cqi;
	--t: 14736.84ms;
}

.uranus {
	--b: radial-gradient(circle, #7de3f4 0%, #3ba0b5 100%);
	--w: 4.2632cqi;
	--d: 84.5cqi;
	--t: 10526.32ms;
}

.neptune {
	--b: radial-gradient(circle, #4c6ef5 0%, #1b3b8c 100%);
	--w: 6cqi;
	--d: 94cqi;
	--t: 20000ms;
}