:root {
	--eye-width: 20em;
	--eye-height: 7em;

	--eye-open-clip-path: ellipse(calc(var(--eye-width) * 0.5) calc(var(--eye-height) * 0.5) at 50% 50%);
	--eye-close-clip-path: ellipse(calc(var(--eye-width) * 0.5) 0 at 50% 50%);
}

@keyframes blink {
	0% { clip-path: var(--eye-open-clip-path) }
	50% { clip-path: var(--eye-open-clip-path) }
	52% { clip-path: var(--eye-close-clip-path) }
	53% { clip-path: var(--eye-open-clip-path) }
	55% { clip-path: var(--eye-close-clip-path) }
	57% { clip-path: var(--eye-open-clip-path) }
	98% { clip-path: var(--eye-open-clip-path) }
	100% { clip-path: var(--eye-close-clip-path) }
}

@keyframes move {
	0% { left: 70%; top: 60%; }
	48% { left: 60%; top: 60%; }
	50% { left: 20%; top: 30%; }
	55% { left: 20%; top: 30%; }
	80% { left: 20%; top: 30%; }
	100% { left: 30%; top: 40%; }
}

body {
	background-color: #000;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

#wrapper {
	display: flex;
	gap: calc(var(--eye-width) * 0.75);
}

.eye {
	background-color: #ffffef;
	width: var(--eye-width);
	height: var(--eye-height);
	position: relative;

	animation-name: blink;
	animation-duration: 14s;
	animation-iteration-count: infinite;
	animation-direction: alternate;

	box-shadow: inset 0 0 calc(var(--eye-height) * 0.5) #0005;
	border-radius: 50%;
}

.iris {
	box-sizing: border-box;
	background-color: rgb(136, 110, 89);
	height: calc(var(--eye-height) * 0.75);
	width: calc(var(--eye-height) * 0.75);
	border-radius: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	box-shadow: inset 0 0 1em rgba(39, 35, 35, 0.5);

	display: flex;
	justify-content: center;
	align-items: center;

	animation-name: move;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.iris::after {
	content: "";
	height: calc(var(--eye-height) * 0.5);
	width: calc(var(--eye-height) * 0.5);
	border-radius: 50%;
	background-color: #111;
	box-shadow: inset 0 0 1em #000;
}

#text {
	position: fixed;
	opacity: 0.15;
	color: #fff;
	user-select: none;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	text-align: justify;
	font-family: monospace;
	font-size: max(1vw, 1vh);
}

#chickens, #demons {
	position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-size: 2em;
	left: 50%;
}

#demons {
	color: #f46;
	top: 21vh;
	user-select: none;
}

#chickens {
	color: #fff;
	top: 20vh;
}