/* 
    Created on : Oct 25, 2026, 4:24:32 PM
    Author     : jay
*/

body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #1a1a1a;
	overflow: hidden;
	font-family: sans-serif;
}

/* Main image container */
.main-view {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 80vh; /* Leaves space for thumbnails at bottom */
	width: 100%;
}

.main-view img {
	max-height: 90%;
	max-width: 90%;
	box-shadow: 0 0 30px rgba(0,0,0,0.5);
	border-radius: 8px;
	transition: transform 0.3s ease;
}

/* Thumbnail strip at the bottom */
.thumbnail-strip {		
	position: static; /* fixed, static, relative */
	/*bottom: 0;*/
	width: 100%;
/*	height: 20vh;	*/
/*	background: rgba(0, 0, 0, 0.8);*/
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 10px;
	overflow-x: auto;
/*	border-top: 1px solid #333;*/
}

.thumbnail-strip img {
	height: 80px;
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 4px;
	transition: border 0.2s;
	padding-bottom: 8px;
}

.thumbnail-strip img:hover {
	border-color: #007bff;
}

.thumbnail-strip img.active {
	border-color: #007bff;
	transform: scale(1.1);
}