:root {
	--bg: #05070d;
	--outer: rgba(9, 16, 31, 0.82);
	--mid: rgba(31, 58, 128, 0.74);
	--bright: rgba(84, 121, 220, 0.68);
	--highlight: rgba(120, 180, 255, 0.42);
}

html,
body {
	margin: 0;
	height: 100%;
	background: radial-gradient(circle at center, rgba(12, 18, 35, 0.8), rgba(5, 7, 13, 1) 60%);
}

body {
	display: grid;
	place-items: center;
	overflow: hidden;
}

.wrapper {
	position: relative;
	width: min(70vmin, 500px);
	aspect-ratio: 1;
	filter: drop-shadow(0 0 10px rgba(88, 122, 255, 0.08));
}

.box {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	height: 90%;
	transform: translate(-50%, -50%);
	background: linear-gradient(135deg, var(--highlight), var(--outer) 30%, var(--mid) 64%, var(--bright) 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.alt {
	background: linear-gradient(135deg, rgba(105, 162, 255, 0.12), rgba(11, 19, 39, 0.82) 26%, rgba(20, 39, 90, 0.9) 62%, rgba(90, 135, 220, 0.62));
	animation: rotate 20s infinite linear;
}

.wrapper .box .box {
	filter: brightness(1.02) saturate(0.75);
}

.wrapper .box .box .box {
	filter: brightness(1.06) saturate(0.83);
}

.wrapper .box .box .box .box {
	filter: brightness(1.1) saturate(0.9);
}

.wrapper .box .box .box .box .box {
	filter: brightness(1.14) saturate(0.96);
	background: #10264d !important;
}

@keyframes rotate {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	50% {
		transform: translate(-50%, -50%) rotate(270deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
}