html,
body {
	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;

	background-color: #000000ff;
}

header {
	width: 100%;
	height: 7.5%;

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

main {
	width: 75%;
	height: 92.5%;

	margin: 0 12.5%;
}

section.section-art {
	width: 50%;
	height: 100%;

	float: left;

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

section.section-bio {
	width: 50%;
	height: 100%;

	float: left;

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

div.div-art-container {
	width: 80%;

	overflow-x: auto;
	display: flex;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
}

div.div-art {
	width: 100%;

	float: left;

	opacity: 0.2;

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

	flex-shrink: 0;
	scroll-snap-align: center;

	transition: 200ms;
}

div.div-art[data-active] {
	opacity: 1;
	z-index: 1;
}

div.div-pagin {
	height: 5%;
}

div.div-arrow {
	margin: 1.25%;

	width: 7.5%;
	aspect-ratio: 1 / 1;

	color: #ffffffff;
	font-size: 2vh;
	font-family: "Inter", sans-serif;
	font-weight: 400;
	text-align: center;

	border-radius: 50%;

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

	transition: 250ms;

	cursor: pointer;
	user-select: none;
}

div.div-arrow:hover {
	background-color: #ffffff3f;
}

img.img-art {
	width: 100%;
	height: auto;

	object-fit: cover;
}

p.p-name {
	margin: 0;

	color: #ffffffff;
	font-size: 10vh;
	font-family: "Inter", sans-serif;
	font-weight: 400;
	text-align: center;
}

p.p-desc {
	margin: 0;

	color: #ffffffff;
	font-size: 2vh;
	font-family: "Inter", sans-serif;
	font-weight: 200;
	text-align: center;
}

a.a-link {
	margin: 0 2%;

	color: #ffffffff;
	font-size: 1.5vh;
	font-family: "Inter", sans-serif;
	font-weight: 400;
	text-align: center;
	text-decoration: underline;
}

::-webkit-scrollbar {
	display: none; /* Safari and Chrome */
}