body {
	background-image: url(./assets/background.jpg);
	background-position: center;
	background-size: cover;
	display: grid;
	grid-template-columns: 1fr min(80vh, 80vw) 1fr;
	grid-template-rows: 1fr min(80vh, 80vw) 1fr;
	height: 100vh;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}

body > div {
	font-size: 2em;
	color: #fff;
	background-color: #0003;
	border-radius: 50%;
	height: 2em;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2em;
}

#xii {
	grid-column: 2;
	justify-self: center;
	align-self: flex-end;
}

#iii {
	align-self: center;
	grid-column: 3;
	grid-row: 2;
	justify-self: flex-start;
}

#vi {
	justify-self: center;
	grid-column: 2;
	grid-row: 3;
}

#ix {
	align-self: center;
	justify-self: flex-end;
	grid-column: 1;
	grid-row: 2;
}

main {
	grid-column: 2;
	grid-row: 2;
	height: min(80vh, 80vw);
	position: relative;
	width: min(80vh, 80vw);
}

main > div {
	height: min(80vh, 80vw);
	position: absolute;
	width: min(80vh, 80vw);
	display: flex;
	justify-content: center;
}

main > div > img {
	max-height: 53%;
	position: absolute;
}

#right-leg > img {
	padding-left: 5em;
}

#left-leg > img {
	padding-right: 5em;
}

#body > img {
	max-height: 55%;
}

#body > img:first-child {
	z-index: 1;
}

noscript {
	color: #fff;
	font-size: 2em;
	grid-column: 1/3;
}
