* {
	box-sizing: border-box;
}

html,
body {
	background-color: #006dfe;
}

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

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

	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);
}

#background {
	position: absolute;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;

	object-fit: cover;
}

@media (max-width: 767.98px) {
	#background {
		object-fit: contain;
		object-position: top;
	}
}