:root {
    --theme-color1: #F0F0E7; /* canvas */
    --theme-color2: #1c5842; /* primary */

    --theme-color3: #FDF8F0; /* inactive nav */
    --theme-color4: #5e6f75; /* header/footer bg */
}

header { border-bottom: 1px solid rgba(234, 222, 212, 0.9); }

header, footer { 
    background-color: var(--theme-color3); 
    color: initial;
}

.custom_button,
.custom_button:hover, 
.custom_button:active {
    background-color: var(--theme-color2);
}

#identity { 
    color: var(--theme-color2); 
    font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
}

.sidebar h1, .page h1 { color: black }

.mobile-button { color: white; }

.page:has(.boxes .box) {
  padding: 0;
  background-color: initial;
}

body.is_frontpage .page .copy,
.page:has(.boxes .box) .copy { color: var(--theme-color4) }

.boxes .box .box-hero {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-bottom: 0;
}

.is_frontpage #PhotoBox,
.boxes .box .box-hero-image { aspect-ratio: 2; }

.boxes .box .content {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: white;
    padding: 1em;
}

footer .wrapper > div:has(h3:only-child) { display: none; }

@media screen and (min-width: 767px) {
    nav ul { 
        display: flex; 
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.5em;
        margin: 1em 0;
    }

    nav > ul > li > a {
        color: var(--theme-color4);
        padding: 0.5em 1em;
        border-radius: 100px;
        opacity: 1;
    }

    nav > ul > li:not(.current) > a:hover { background-color: rgba(0, 0, 0, 0.1); }
}