:root {
	--text-color: #272932;
	--bg-color: #b6c2d9;
	--bg-color-2: rgba(158, 144, 162, 0.4);
	--btn-color: #4d7ea8;
}

body {
	background: var(--bg-color);
	height: 100%;
	margin: 0;
	font-size: 100%;

	overflow: hidden;
}

h1, h2, h3, h4, h5, p, a, i, li {
	color: var(--text-color);
	font-family: 'Roboto Slab',  serif;
}

ul {
	text-align: left;
	list-style-position: inside;
}

hr {
	border: 2px solid var(--text-color);
	border-radius: 10px;
	background: var(--text-color);
}

button {
	border: none;
	padding: 10px;
	border-radius: 5px;
	background: var(--btn-color);

	color: var(--text-color);
	font-family: 'Roboto Slab',  serif;
}

button:not(:hover) {
	animation: mouseout;
	animation-duration: 0.4s;
}

button:hover {
	animation: mouseover;
	animation-duration: 0.4s;
	filter: brightness(1.4);
}

/* Begin Classes */

.separator {
	display: inline-block;
	width: 10px;
	height: 10px;

	border-radius: 10px;
	background: var(--text-color);
}

.text {
	overflow-y: scroll;
}

.painting {
	width: 40vw;
	height: 35vh;
	object-fit: scale-down;
}

.painting-container {
	border: 2px solid var(--text-color);
}

/* Begin IDs */

#carousel-img-container {
	width: 100%;
	height: 50vh;
	overflow: hidden;
}

#carousel-img {
	width: 100%;
	height: 100%;
	object-fit: contain;

	opacity: 1;
	transition: opacity 0.5s; 
}

#carousel-img.fade {
	opacity: 0;
}

#background-img {
	filter: blur(9px) grayscale(10%);
	-webkit-filter: blur(9px) grayscale(10%);

	width: 100vw;
	height:  100vh;
}

#content-container {
	border-radius:  3px;
	border: 2px solid var(--text-color);
	background-color: var(--bg-color-2);

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 80%;
	height: 90%;

	padding: 20px;
	text-align: center;
}

@media (max-height: 650px) {
	#content-container {
		overflow-y: scroll;
	}
}

#carousel {
	border-radius:  3px;
	border: 2px solid var(--text-color);
}

#display-block {
	z-index: 3;
	backdrop-filter: blur(5px);
	position: absolute;
	top: 0;
	left: 0;

	width: 100vw;
	height: 100vh;
}

#block-bg {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
}

#popup {
	background: var(--bg-color);
	border-radius: 3px;
	border: 2px solid var(--text-color);
	overflow-x: auto;
	overflow-y: auto;
	width: fit-content;
	height: fit-content;
	text-align: center;

	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

#display-img {
	max-height: 80vh;
	max-width: 80vw;
	padding: 5px;
	border-radius: 8px;
}

/*
Animations
 */

@keyframes showWindow {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes hideWindow {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes mouseover  {
	from {
		filter: brightness(1.0);
	}
	to {
		filter: brightness(1.4);
	}
}

@keyframes mouseout {
	from {
		filter: brightness(1.4);
	}
	to {
		filter: brightness(1.0);
	}
}