/* Minimal styling for Meme Now */
.simple { background: #fff; height: 100vh; display:flex; align-items:center; justify-content:center; overflow: hidden; }
.center-wrap { max-width: 920px; width: 100%; padding: 24px; box-sizing: border-box; }

/* Keep the title visible at top: absolute so it stays while memes change */
.meme-title {
	position: absolute center;
	top: 12px; /* small gap from top */
	background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.6));
	backdrop-filter: blur(4px);
	z-index: 10;
	display: block;
	/* Removed margin-bottom since absolute positioning uses top/left/right/bottom for spacing */
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 30px;
	color: #111827;
	font-weight: 600;
	text-align: center;
}

/* Ensure the media below the sticky title doesn't get hidden */
.content-area { padding-top: 8px; display: flex; flex-direction: column; align-items: center; }

/* Constrain the photo so it always fits in the viewport (no vertical scroll)
	subtract a little space for title + padding; adjust as needed */
#photo { display:block; width:100%; height:auto; max-height: calc(100vh - 140px); object-fit: contain; border-radius:10px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); opacity: 1; transition: opacity 280ms ease; }
.instruction { text-align:center; margin-top:12px; color:#6b7280; font-size:14px; }
.instruction.loading { color: #9ca3af; }

/* fade/hide state applied while the user scrolls */
.meme-title.hidden {
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 220ms ease, transform 220ms ease;
	pointer-events: none;
	will-change: opacity, transform;
}