.header {
    background-image: url(../images/headerimg.jpg);
    background-size: cover;
    background-position: center;
    background-color: var(--base-dark);
    text-align: center;
    padding: 1em 0;
    position: relative; 
    height: 200px; 
}

.header-image {
    position: absolute;
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    max-width: 100%;
    height: auto;
}

.main-nav {
    background-color: var(--base-color);
    color: white;
    position: relative;
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.main-nav a {
    text-decoration: none;
    color: black;
    font-weight: bold;
    margin: 0.5em;
    transition: all .1s ease-in-out;
}

.main-nav a:hover {
    color: gray;
}

.main-nav a.active {
    color: var(--accent-cool);
}