/* basic layout */
body{
    background:#111;
    color:#fff;
    font-family:Arial,sans-serif;
    margin:0;
    overflow-x:hidden;
}

nav{
    text-align:center;
    margin:20px;
}

nav a{
    color:#ccc;
    margin:0 14px;
    text-decoration:none;
    font-size:18px;
    font-family:Georgia,serif;
}

nav a.active{
    color:#fff;
    font-weight:bold;
}

/* contact container */
#contactContainer {
    width: 90%;
    margin: auto;
    text-align: justify;
    font-family:Georgia,serif;
    color: #ccc;
    line-height: 1.6;
}

#contactContainer .contact-text {
    margin-bottom: 20px;
    font-size: 18px;
}

#contactEmail a {
    color: #f5f5f5;
    text-decoration: none;
    font-size: 18px;
}

/* gallery container */
#galleryContainer {
	position: relative;
	width: 90%;
	margin: 20px auto;
}

/* thumb wrapper */
#galleryContainer .thumb {
	position: absolute;
	overflow: hidden;
	background: rgba(255,255,255,0.05);
	cursor: pointer;
}

/* thumbnail image */
#galleryContainer .thumb img {
	width: 100%;
	display: block;

	opacity: 0;
	transform: translateY(20px) scale(1);

	transition:
		opacity 0.6s ease,
		transform 0.6s ease,
		box-shadow 0.3s ease;
}

/* badge inside of thumb */
.thumb-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 5;
    font-family: Georgia, serif;
    letter-spacing: 0.02em;
}

/* fade-in state */
#galleryContainer .thumb img.loaded {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* hover effect (only zoom, no jump) */
#galleryContainer .thumb:hover img {
	transform: translateY(0) scale(1.05);
	box-shadow: 0 10px 25px rgba(255,255,255,0.15);
}

/* skeleton loading */
.thumb.skeleton {
	background: rgba(255,255,255,0.08);
	animation: skeletonPulse 1.4s ease-in-out infinite;
}

@keyframes skeletonPulse {
	0%   { opacity: 0.6; }
	50%  { opacity: 0.9; }
	100% { opacity: 0.6; }
}

/* overlay */
#overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.95);
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:100;
}
#overlayImg{max-width:95%;max-height:80vh;}
#overlayTitle{
    margin-top:18px;
    text-align:center;
    max-width:70%;
    font-family:Georgia,serif;
}
#overlayTitle div:nth-child(1){font-size:16px;letter-spacing:.04em;}
#overlayTitle div:nth-child(2){font-size:13px;color:rgba(255,255,255,.65);}
#overlayTitle div:nth-child(3){font-size:12px;font-style:italic;color:rgba(255,255,255,.45);}

/* overlay controls */
.overlay-controls span{
    pointer-events:auto;
    opacity:0.75;
    transition:opacity .25s ease;
}
.overlay-controls span:hover{opacity:1;}

#closeBtn{
    position:fixed;
    top:18px;
    left:20px;
    font-size:26px;
    font-family:Georgia,serif;
    cursor:pointer;
}

#leftArrow,
#rightArrow{
    position:fixed;
    top:50%;
    transform:translateY(-50%);
    font-size:42px;
    cursor:pointer;
}

#leftArrow{ left:18px; }
#rightArrow{ right:18px; }

/* mobile, no arrows */
@media (max-width: 800px) {
    #leftArrow, #rightArrow { display: none; }
}