html{
    background-color: #e9efe6;
    font-family: Arial, sans-serif;
}

div.content {
    background-color: #ffffff;
    padding: 20px;
    margin: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

div.footer {
    background-color: #ffffff;
    padding: 20px;
    margin: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

div.warn {
    background-color: #90c87c;
    color: #333333;
    padding: 10px;
    margin: 10px;
}

p.invisible {
    display: none;
}

#showwarn.visible {
    display: block;
}

a {
    color: #000000;
}

/* Navigation styles */
.navbar {
    margin-top: 8px;
}
.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
    align-items: center;
}
.nav-item a {
    padding: 6px 8px;
    display: inline-block;
    color: #000;
}
.has-submenu { position: relative; }
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border: 1px solid #ccc;
    list-style: none;
    padding: 6px 0;
    margin: 6px 0 0 0;
    display: none;
    min-width: 140px;
    z-index: 50;
}
.submenu-item a {
    display: block;
    padding: 6px 12px;
    color: #000;
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
    display: block;
}

/* Small adjustments for the header image + nav */
.menu { display: flex; gap: 16px; align-items: center; padding: 10px; }

/* Top row inside header to keep logo and hamburger aligned */
.menu-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }

/* Header image sizing */
.menu img { height: auto; max-height: 170px; width: auto; }

/* Toggle button for small screens */
.menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    font-size: 24px;
    cursor: pointer;
}

/* class-based control for submenu open state */
.has-submenu.submenu-open > .submenu {
    display: block;
}

/* Responsive behaviour */
@media (max-width: 720px) {
    /* Stack header items vertically so nav appears below, but keep top row aligned */
    .menu { padding: 8px; flex-direction: column; align-items: stretch; }
    .menu-top { padding: 4px 0; }
    .menu-toggle { display: inline-block; }
    .menu-top img { max-width: 250px; height: auto; margin: 0; }
    .nav-list {
        flex-direction: column;
        gap: 0;
        background: #fff;
        border: 1px solid #ddd;
        display: none;
        width: 100%;
        margin-top: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    .nav-list.show { display: flex; }
    .nav-item { width: 100%; }
    .nav-item a { padding: 12px 16px; border-bottom: 1px solid #eee; }
    .submenu { position: static; border: none; box-shadow: none; padding-left: 12px; }
    /* Larger header image on small screens and keep it proportional (reduced 15px) */
    .menu img { max-height: 135px; max-width: 90%; }
}