body {
    background-color: #fff;
}

.page {
    display:flex;
    flex:1;
    flex-direction:column;
    height:100vh;
    justify-content:space-between;
    gap:0;
}
#hio-top-navbar {
    border-bottom: 1px dotted #6B38B2;
}
.hio-stripes {
}

    .hio-stripes .hio-stripe-brown {
        margin: .1rem 0;
        border-bottom: 6px dotted #59331D;
    }

    .hio-stripes .hio-stripe-green {
        margin: .1rem 0;
        margin-left: 1px;
        border-bottom: 6px dotted #4C7031;
    }

    .hio-stripes .hio-stripe-purple {
        margin: .1rem 0;
        border-bottom: 6px dotted #f8f7f6;
    }

    .hio-stripes .hio-stripe-yellow {
        margin: .1rem 0;
        margin-left: 1px;
        border-bottom: 6px dotted #FFE984;
    }

    .hio-stripes .hio-stripe-blue {
        margin: .1rem 0;
        border-bottom: 6px dotted #AFDBFF;
    }
.site-content {
    margin-bottom: 1rem;
    padding:0 .5rem;
}
    .site-content .page-header {
        margin-bottom:2rem;
    }

    .site-content .page-header h1 {
        margin-bottom: 1rem;
        font-weight: 600;
        color: var(--light-text);

    }

    .site-content h2 {
        font-size: .8rem;
        font-weight: 500;
        color: var(--light-text);
        font-family: var(--sans-serif-font);
        margin-bottom: 0;
    }

dl dt {
    margin-top:1rem;
    font-size:1.1rem;
    text-transform:uppercase;
    font-weight:500;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
}
nav {
    height: 80px;
}

.navbar {
    display: flex;
    flex: 1;
    flex-wrap:wrap-reverse;
    justify-content: space-between;
    align-items:center;
    gap: .5rem;
    padding:1rem;
}
    .navbar .brand {
        display: flex;
        gap: 1rem;
        align-items: center;
    }

    .navbar .brand img {
        max-height:30px;
    }

    .navbar .icon img {
        max-height: 40px;
        border: 1px solid #ccc;
        border-radius: 20px;
    }

    .navbar .navbar-controls {
        display: flex;
        gap: 1.5rem;
        justify-content:end;
    }
    .navbar .navbar-controls a {
        display: flex;
        gap:.25rem;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        text-decoration:none;
    }

@media (max-width: 768px) {
    nav {
        height: 50px;
    }
    .navbar .brand img {
        max-height: 17px;
    }
    .navbar .navbar-controls a {
        font-size:.9rem;
    }


}

    a .hio-icon svg {
        fill:var(--link-color);
    }
    a:hover .hio-icon svg {
        fill: var(--link-hover-color);
    }
main {
    padding: 2rem 0;
    flex: 1;
}
footer {
    border-top: 1px dotted #6B38B2;
    padding-top: 1rem;
    padding-bottom: 2rem;
}
.footer-content {
    font-size: 1.2rem;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
    flex-wrap:wrap;
}

.footer-links {
    display: flex;
    gap: 2rem;
}

@media (max-width: 768px) {
    .footer-content {
        font-size: .9rem;
    }

    .footer-links {
        gap: 1rem;
    }
}
.front-search-box h4 {
    color:var(--light-text);
    margin-bottom:.5rem;
    font-weight:400;

}