@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");

:root {
    --color-main: #fdf1b9;
    --color-green: #3e3e12;
    --color-font: #565655;
    --color-blue: #003679;
    --color-brown: #78715B;
    --color-gold: #a69f89;
    --color-red: #91001b;
}

body {
    background-color: var(--color-main);
    color: var(--color-font);
    font-size: 1rem;
}

html, body, div, p, h1, h2, h3, h4, ul, ol, span, a, table, td, form, img, li {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
}

h1 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.2rem;
}

td {
    padding: 0.3rem;
}

.topnav {
    font-size: 0.9rem;
}

.wrapper {
    background: #fff;
    border: 1px solid  var(--color-gold);
}

nav.mainnav {
    background-color: #ebebeb;
    padding: 1rem;
}

.nav-elem {
    width: 229px;
    padding: 5px;
    background-color: white;
    color: white;
    position: relative;
}

.nav-elem > a > div:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 1;
    background: rgba(255, 255, 255, 0.6);
    transition: opacity 0.3s ease-out;
}

.nav-elem.is-active > a > div:after, .nav-elem:hover > a > div:after, .nav-elem:focus > a > div:after {
    opacity: 0;
}

.nav-elem a, .site-green .nav-elem a,  .site-red .nav-elem a {
    color: white !important;
}

.nav-elem img {
    margin:auto;
    width: 219px;
}

.bg-nav-2 {
    background-color: var(--color-blue);
}

.bg-nav-3 {
    background-color: var(--color-red);
}

.bg-nav-4 {
    background-color: var(--color-green);
}

footer {
    background: #ebebeb;
    padding: 10px;
    color: #000;
    font-size: 0.9rem;
}

footer > div > span {
    display: block;
    padding: 0 1rem;
}



#subnav > a {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
    background-color: var(--color-main);
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
}

h1, h2, a {
    color: var(--color-blue) !important;
}

#subnav > a:hover {
    color: white !important;
    background-color: var(--color-blue);
}


.site-green h1,.site-green  h2,.site-green  a {
    color: var(--color-green) !important;
}

.site-green #subnav > a:hover {
    color: white !important;
    background-color: var(--color-green);
}

.site-red h1,.site-red  h2,.site-red  a {
    color: var(--color-red) !important;
}

.site-red #subnav > a:hover {
    color: white !important;
    background-color: var(--color-red);
}

@media screen and (min-width: 1200px) {
    footer > div > span {
        border-left: 1px solid #565655;
    }

    footer > div > span:first-child {
        border-left: none;
        padding-left: 0;
    }
}

@media screen and (max-width: 991px) {
    .subnav-wrapper {
        background-color: var(--color-main);
    }

    #subnav > a:first-child {
        padding-left:calc(var(--bs-gutter-x)* .5);
    }
}

@media screen and (min-width: 992px) {
    #subnav > a {
        padding: 0.5rem 1rem 0.5rem 3rem;
        display: block;
    }
}