* {
	box-sizing: border-box;
}

body,
html {
	margin: 0;
	background-color: peachpuff;
	font-family: Arial, Helvetica, sans-serif;
}

.title {
	margin: 24px;
	/* position: absolute; */
	top: 24px;
	left: 24px;
	font-size: 48px;
	font-weight: normal;
	background-color: white;
}

.index {
	width: 100%;
	height: 100vh;
	padding: 0 24px;
	margin: 0;

	display: flex;
	/* justify-content: center; */
	align-content: flex-start;

	flex-wrap: wrap;
	gap: 12px;

	list-style: none;
}

ul {
	padding: 0;
	margin: 0;
}

.index li {
	position: relative;
	padding: 6px 12px;
	background-color: white;
	border-radius: 24px;
	margin: 0;
}

a {
	color: currentColor;
	text-decoration: none;
}

.index a:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

li:hover {
	transform: scale(1.05);
}

.avatar {
	display: inline-block;
	width: 50px;
	height: 50px;
	background-color: white;
	text-align: center;
	font-size: 18px;
	line-height: 50px;
}

.avatar.img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.colophon {
	position: absolute;
	bottom: 24px;
	left: 24px;
	padding: 24px;
	background-color: white;
}

.colophon .caretakers {
	margin-bottom: 24px;
}