#fullscreen-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	align-items: center;
	justify-content: center;
	flex-direction: column;
	z-index: 15;
	display: none;
}

#fullscreen-img {
	max-width: 90%;
	max-height: 80%;
}

#image-counter {
	color: white;
	margin-top: 20px;
}

.arrow {
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 3em;
	color: grey;
	/* Darker color for the arrows */
	z-index: 1000;
	user-select: none;
	/* Prevents text selection */
}

#left-arrow {
	left: 10px;
}

#right-arrow {
	right: 10px;
}

.arrow:hover {
	color: #fff;
	/* Light color on hover for better visibility */
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
	/* Optional: Adds a glow effect on hover */
}