/* Limit the size of the carousel image container on all view sizes */
#image-container {
	max-width: 700px;
	max-height: 60vw;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 768px) {
	#image-container {
		max-width: 100vw;
		max-height: 50vw;
	}
}
@media (max-width: 480px) {
	#image-container {
		max-width: 100vw;
		max-height: 45vw;
	}
}
.content {
	padding: 1rem;
}
body {
	margin: 8 !important;
}

@media (max-width: 988px) {
	.themed-container {
		width: 100%;
	}
}

@media (min-width: 988px) {
	.themed-container {
		width: 100%;
	}
}


.container {
	background: #222;
}


#image-container {
	overflow: hidden;
	transition: height 0.25s, opacity 0.25s;
	/* display: flex; */
	justify-content: center;
	align-items: center;
	height: auto;
}

#image-container img { 
	max-width: 80%;
	height: 100%;
	transition: transform 0.25s;
	border-radius: 1rem;
	box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}

#image-container.shrunk {
	height: 0 !important;
	opacity: 0;
	pointer-events: none;
}

.fade-scroll {
	transition: opacity 0.5s cubic-bezier(.4, 0, .2, 1);
	will-change: opacity;
}
.themed-container {
	background: var(--themed-bg, rgba(255, 255, 255, 0.95));
	box-shadow: 0 8px 32px 0 var(--themed-shadow1, rgba(31, 38, 135, 0.15)), 0 1.5px 6px 0 var(--themed-shadow2, rgba(0, 0, 0, 0.08));
	border-radius: 1rem;
}

[data-bs-theme="dark"] .themed-container {
	--themed-bg: rgba(30, 34, 40, 0.97);
	--themed-shadow1: rgba(0, 0, 0, 0.45);
	--themed-shadow2: rgba(0, 0, 0, 0.18);
}

[data-bs-theme="light"] .themed-container {
	--themed-bg: rgba(255, 255, 255, 0.95);
	--themed-shadow1: rgba(31, 38, 135, 0.15);
	--themed-shadow2: rgba(0, 0, 0, 0.08);
}

#back-to-home {
	top: 1rem;
	left: 1rem;
	z-index: 1000;
}