:root {
--bg-a: #081226;
--bg-b: #06304a;
--accent: #00d4ff;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body {
margin: 0;
font-family: Inter, Arial, sans-serif;
background: linear-gradient(180deg, var(--bg-a), var(--bg-b));
color: var(--accent);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 32px 20px;
}

.occasion-label {
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
opacity: 0.8;
margin-bottom: 1rem;
}

.occasion-item {
display: flex;
flex-direction: column;
align-items: center;
animation: fadeIn 0.8s ease both;
}

.occasion-flier {
width: 100%;
max-width: 640px;
border-radius: 16px;
border: 1px solid rgba(0, 212, 255, 0.15);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
object-fit: contain;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.occasion-flier:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(2, 6, 23, 0.6);
border-color: rgba(0, 212, 255, 0.35);
}

.occasion-caption {
margin-top: 1rem;
font-size: 0.95rem;
color: #cdeffc;
text-align: center;
max-width: 640px;
opacity: 0.85;
}

.back-link {
margin-top: 1.5rem;
font-size: 0.85rem;
}

.back-link a {
color: var(--accent);
}

@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to   { opacity: 1; transform: none; }
}