header{
    box-shadow: var(--shadow);
    background-color: var(--white);
    width: 100%;
    padding: .5rem 1rem;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
}
header .container{
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
header a{
    margin: 0;
}
header a svg{
    width: 4rem;
    float: left;
}
header nav{
    align-items: center;
}
header nav a{
    margin: 0 1rem;
    text-decoration: none;
}
header nav a:hover{
    color: var(--blue2);
}
header nav a.active{
    color: var(--gold);
}
header nav button{
    margin-left: 1rem;
}
header nav button svg{
    margin-right: .6rem;
    width: 1.5rem;
}
header nav #menubtn{
    display: none;
}
main{
    min-height: 90svh;
    padding-top: 5.125rem;
}
article{
    padding: 2rem 1rem;
}
footer{
    background-color: var(--blue1);
    text-align: center;
}
footer small{
    padding: 1rem;
    display: block;
}
footer nav{
    background-color: var(--blue2);
    text-align: center;
    padding: 2rem 1rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
footer nav a{
    color: var(--gold);
    margin: 0 1rem;
    padding-bottom: 2px;
    text-decoration: none;
    border-bottom: 1px solid var(--gold);
}
footer nav a:hover, footer nav a.active{
    border-bottom: 1px solid transparent;
}

@media only screen and (max-width:1100px){
    footer nav a{
        width: calc(50% - 2rem);
        line-height: 3rem;
    }
}
@media only screen and (max-width:800px){
    header nav button{
        padding: .5rem;
    }
    header nav button svg {
        margin-right: 0rem;
    }
    header nav button b{
        display: none;
    }

}
@media only screen and (max-width:700px){
    header nav a, footer nav a:nth-child(4), footer nav a:last-child{
        display: none;
    }
    header nav #menubtn {
        display: inline-flex;
        width: 1.8rem;
        height: 1.8rem;
        margin-right: .5rem;
        cursor: pointer;
    }
    #hamburger path{
        fill: var(--blue1);
    }
    #hamburgerclose path{
        fill: transparent;
    }
    footer nav a:first-child{
        border-top: 1px solid var(--gold);
    }
    footer nav a{
        width: 100%;
        line-height: 3rem;
    } 
    footer nav a.active, footer nav a:hover{
        border-bottom: 1px solid var(--gold);
    }
    aside#menu{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background-color: var(--white);
        border-top-left-radius: 1.143rem;
        border-top-right-radius: 1.143rem;
        -webkit-box-shadow: var(--shadow2);
        -moz-box-shadow: var(--shadow2);
        box-shadow: var(--shadow2);
        padding: 1rem;
        transform: translateY(100%);
        transition: transform 0.3s ease-out;
    }
    aside#menu .flex{
        flex-flow: column;
    }
    aside#menu .flex a{
        text-decoration: none;
        line-height: 2rem;
    }
    aside#menu .flex a.active{
        color: var(--gold);
    }
    #menubtn.active #hamburger path{
        fill: transparent;
    }
    #menubtn.active #hamburgerclose path{
        fill: var(--blue1);
    }
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
}
@media only screen and (max-width:500px){
    h1 {
    font-size: 2rem;
}
h2 {
    font-size: 1.75rem;
}
h3 {
    font-size: 1.4rem;
}
h4 {
    font-size: 1.25rem;
}
h5 {
    font-size: 1.125rem;
}
h6{
    font-size: 1.025rem;
}
}

@media only screen and (orientation: landscape) {
    aside#menu .flex a{
        line-height: 1.5rem;
    }
}
@media (pointer: coarse) {
    *:hover {
        all: unset !important;
    }
    ::-webkit-scrollbar {
        width: 1px;
        height: 0;
    }
}