.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	padding: 20px;
}

.gallery img {
	max-width: 300px;
	margin: 10px;
	border-radius: 10px;

	cursor: pointer;
}

#lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background: rgba(0, 0, 0, 0.5);

	flex-direction: column;
	justify-content: center;
	align-items: center;

	overflow: hidden;

	z-index: 6;
}

#close-btn {
	position: fixed;
	top: 20px;
	right: 20px;

	min-width: 50px;
	max-width: 7vw;
	transition-duration: 0.3s;
	border-radius: 50%;

	z-index: 5;
	cursor: pointer;
}

#lightbox-img-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

#lightbox-img {
	max-width: 70%;
	max-height: 80vh;
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
	border-radius: 10px;
}

#prev-btn,
#next-btn {
	max-width: 10%;

	transition: 0.3s;
	border-radius: 50%;

	cursor: pointer;
}

#prev-btn {
	margin-right: 3%;
}

#next-btn {
	margin-left: 3%;
}

#prev-btn:hover,
#next-btn:hover,
#close-btn:hover {
	background-color: #2229;
	scale: 1.1;
}

/* Styles for thumbnails */
#thumbnail-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.thumbnail {
	min-width: 70px;
	max-width: 8vw;

	margin-top: 40px;
	margin-left: 5px;
	margin-right: 5px;

	border: 2px solid var(--article-bg-color);
	transition-duration: 0.1s;
	filter: drop-shadow(0px 0px 25px rgba(0, 0, 0, 0.8));
	border-radius: 10px;

	cursor: pointer;
}

.thumbnail:hover,
.thumbnail.active-thumbnail {
	opacity: 0.7;
}