:root {
	--border: 3vmin;
	--color: hsl(0,0%,46%);
	--bg: black;
}
body {
	margin: 0;
	padding: 0;
	display: flex;
	height: 100vh;
	width: 100vw;
	transition: background-color 2s ease-out;
	background-color: var(--bg);
}

h1 {
	position: absolute;
	left: -11111em;
}
div {
	box-sizing: border-box;
	border: var(--border) solid var(--color);
	width: 90vmin;
	height: 90vmin;
	border-radius: 100%;
	position: relative;
	margin: auto;
	transition: 2s ease-out;
}


div::before {
	content: '';
	width: var(--border);
	height: calc(45vmin - 1px);
	background: var(--color);
	display: block;
	left: calc(50% - (var(--border)/2));
	position: absolute;
	bottom: 50%;
	transform-origin: 50% 100%;
	transition: 10s;
	transform: rotate(-.5turn) scaleY(.5);
	transition: 2s ease-out;
}
.leet {
	background-color: black;
}
.leet div::before {
	background: limegreen;
}
.leet div {
	border-color: limegreen;
}

/* For screenreaders */

button, [role="alert"] {
	position: absolute;
	left: -1111em;
	top: 0;
}
button {
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	color: transparent;
	border: none;
	width: 100vw;
}