body {
    font-size: 7.5vh;
	width: 100vw;
	margin: 0;
}

.circle span {
    display: block;
    width: fit-content; height: fit-content;
}

.footer {
	font-size: 2.5vh;
}

.unfinished {
	opacity: 25%;
}

@media only screen and (min-width: 650px) {
    .circle-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
    }

	.circle {
		position: relative;
		--rad: min(75vw, 75vh);
		width: var(--rad);
		height: var(--rad);
		/* border: dashed 1px; */
		border-radius: 50%;
	}

	.circle span {
		position: absolute;
		top: 50%; left: 50%;
	}

	.circle img { display: block; height: min(45vh, 45vw); }
	.center { transform: translate(-50%, -50%); }
	.circle div > * {
		--count: 12;
		--radius: min(40vh,40vw);
		--angle: calc(255deg + (360deg / var(--count) * var(--i)));
		transform: rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle))) translate(-50%, -50%);
	}
	.circle div > *:nth-child(1)  { --i: 0; }
	.circle div > *:nth-child(2)  { --i: 1; }
	.circle div > *:nth-child(3)  { --i: 2.125; }
	.circle div > *:nth-child(4)  { --i: 3.0625; }
	.circle div > *:nth-child(5)  { --i: 3.9375; }
	.circle div > *:nth-child(6)  { --i: 4.875; }
	.circle div > *:nth-child(7)  { --i: 6; }
	.circle div > *:nth-child(8)  { --i: 7; }
	.circle div > *:nth-child(9)  { --i: 8.125; }
	.circle div > *:nth-child(10) { --i: 9.0625; }
	.circle div > *:nth-child(11) { --i: 9.9375; }
	.circle div > *:nth-child(12) { --i: 10.875; }
	
	.footer {
		position: absolute;
		bottom: 0.25em;
		left: 0.25em;
	}
}
	
@media only screen and (max-width: 650px) {
    .circle .center { width: 100%; margin-top: 0.25em; }
	.circle img { display: block; width: 90vw; margin: 0 auto }

    .circle div {
        width: 100vw;
        display: grid;
        grid-template-columns: repeat(auto-fit, 175px);
        row-gap: 0.25em;
        margin: 0 auto;
        justify-content: space-around;
        justify-items: center;
    }

	.footer {
		text-align: center;
		margin: 0.25em 0;
	}
}