body {
	height : 100vh;
}

#avatar-top {
	width : 6em;
}

.flex > div {
	margin : 0.5em 0.5em;
}

.work-audio {
	margin : 0;
	padding : 0;
	width : 20em;
	max-width : 75vw;
}

:root {
	--checker-blend : rgba(200, 200, 200, 0.75);
}

:root.dark-mode {
	--checker-blend : rgba(100, 100, 100, 0.85);
}

.work {
	--scale : 10em;
	margin : 0;
	padding : 0;
	display : inline-block;
	height : var(--scale);
	width : var(--scale);
	max-width : 50vw;
	max-height : 50vw;
	background-image :
			/* checker pattern */
			linear-gradient(to right, var(--checker-blend), var(--checker-blend)),
			linear-gradient(to right, black 50%, white 50%),
			linear-gradient(to bottom, black 50%, white 50%);
	background-blend-mode : normal, difference, normal;
	background-size : 2vh 2vh;
	border-radius : 0.5em;
	overflow : hidden;
}

.work div {
	transition : all 0.5s;
	width : 100%;
	height : 100%;
	background-image : var(--img);
	background-position : center;
	background-size : cover;
	--angle : 0deg;
}

.work:hover div,
.work:focus div {
	transform : scale(1.2) rotate(var(--angle));
}

.work-caption {
	font-size : 0.75em;
	font-family : var(--font-mono);
	margin-top : 0;
	padding-top : 0;
}

#index > div {
	padding-top : 15px;
}

#index > div * {
	font-family : var(--font-mono);
}

#index span {
	display : inline-block;
	width : 100px;
	text-align : left;
}

#index span:first-of-type {
	width : 25px;
	text-align : right;
}