:root {
--light-blue: #0f2a3a;
--blue: #1e88c8;
--dark-blue: #e6f4ff;
--card-blue: #163a52;
}


* {
box-sizing: border-box;
}




body {
  background:
    /* blurred background trees */
    linear-gradient(
      rgba(255,255,255,0.9),
      rgba(255,255,255,0.9)
    ),
    url("pictures/gift1.png") repeat,
    
    
    /* base snow gradient */
    linear-gradient(180deg, #fdfefe 0%, #f6fff8 60%, #ffffff 100%);

  background-size:
    cover,
    140px 140px,
    60px 60px,
    cover;

  background-position:
    center,
    30px 50px,
    0 0,
    center;

  color: var(--dark-blue);
}

.header {
text-align: center;
padding: 1.4rem 1rem 1rem;
background: linear-gradient(135deg, #0b2434, #143f5c);
box-shadow: 0 6px 18px rgba(0,0,0,0.45);

}


.header h1 {
margin: 0.6rem 0 0;
font-size: 1.6rem;
letter-spacing: 0.5px;
}


.back-link {
text-decoration: none;
color: var(--blue);
font-size: 0.95rem;
}


.top-nav a.active {
background-color: #1e88c8;
font-weight: bold;
}


.top-nav {
display: flex;
overflow-x: auto;
gap: 0.75rem;
padding: 0.75rem 1rem;
background-color: #102f44;
}


.top-nav a {
flex: 0 0 auto;
text-decoration: none;
background-color: var(--card-blue);
color: #e6f4ff;
padding: 0.6rem 1rem;
border-radius: 999px;
font-size: 0.95rem;
white-space: nowrap;
transition: transform 0.15s ease, background-color 0.15s ease;
}


.top-nav a:active {
transform: scale(1.08);
}


.top-nav a.active {
background-color: #1e88c8;
font-weight: bold;
}


.top-nav {
display: flex;
overflow-x: auto;
gap: 0.75rem;
padding: 0.75rem 1rem;
background-color: #102f44;
}


.top-nav a {
flex: 0 0 auto;
text-decoration: none;
background-color: var(--card-blue);
color: #e6f4ff;
padding: 0.6rem 1rem;
border-radius: 999px;
font-size: 0.95rem;
white-space: nowrap;
transition: transform 0.15s ease, background-color 0.15s ease;
}


.top-nav a:active {
transform: scale(1.08);
}


.top-nav a.active {
background-color: #1e88c8;
font-weight: bold;
}


.menu-image-wrapper {
padding: 0.5rem;
}


.menu-image-wrapper img {
width: 100%;
height: auto;
border-radius: 20px;
box-shadow: 0 12px 28px rgba(0,0,0,0.45);
animation: fadeIn 0.4s ease-in-out;
}


/* Mobile-first, enhance for larger screens */
@media (min-width: 768px) {
.top-nav {
justify-content: center;
}


.menu-image-wrapper {
max-width: 640px;
margin: 1.5rem auto 0;
}
}


.footer {
margin-top: 2rem;
padding: 1.5rem 1rem 2rem;
background: linear-gradient(180deg, #0f2a3a, #0b2434);
color: #e6f4ff;
text-align: center;
box-shadow: 0 -6px 18px rgba(0,0,0,0.45);
}


.footer-content {
display: flex;
flex-direction: column;
gap: 0.6rem;
font-size: 0.9rem;
}


.footer a {
color: #42a5e6;
text-decoration: none;
font-weight: 500;
}


.footer a:hover {
text-decoration: underline;
}


@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}


.top-nav a {
flex: 0 0 auto;
text-decoration: none;
background-color: var(--card-blue);
color: #e6f4ff;
padding: 0.6rem 1rem;
border-radius: 999px;
font-size: 0.95rem;
white-space: nowrap;
transition: transform 0.15s ease, background-color 0.15s ease;
}


.top-nav a:active {
transform: scale(1.08);
}


.top-nav a.active {
background-color: #1e88c8;
font-weight: bold;
}


.menu-image-wrapper {
max-width: 750px;
margin: 0 auto;
}