#header{
    height:var(--nav-bar);
    background-color: #373737;
    display: flex;
    justify-content: center;
    align-items: center;
}

#title{
    display: flex;
    align-items: center;
    width: min(100% - 1.309em,1140px);
}

.logo{max-height: 52px}

@media(max-width:767px){
    .logo{
        width: min(45%,190px);
        width: clamp(170px,45%,190px)
    }
}

main+footer{
    background-color:#ced3d4;
    display: flex;
    justify-content: center;
    padding:1.618em 1em
}

main+footer div{
    width: min(100%,1140px);
    text-align: center
}

main+footer .logo{
    filter: brightness(0);
}

/**/
#stats{
    border-color: rgba(0,91,187,.5);
    padding: 1em;
}

#stats li{margin-top:0}

#stats .h3{
    display: block;
    font-family: 'roboto flex';
    line-height: .85;
    font-weight: 700;
    font-stretch: 34%;
    text-transform: uppercase;
}

#stats .h3{
    white-space: nowrap;
    color: #005BBB}

#stats sup{
    font-stretch: 100%;
}

#stats .small{
    display: block;
    text-wrap:balance;
    color: #555;
    font-size: .618em;
    line-height: 1.1
}

#stats ul{
    grid-template-columns: repeat(auto-fit, minmax(13ch, 1fr));
    gap:.618em;
}

#stats li{
    border: 1px solid rgba(0,91,187,.5);
    border-radius: .236em;
    padding: 1ch;
}

@media(min-width:calc(100ch + 2em)){
    
    #stats{
        float: right;
        width: calc(38ch - 2.618em);
        width:calc(var(--ch-unit)*32.66);
        margin-left: 2.618em
    }
}

:where(main>:last-child) {
    padding-bottom: 4.236em;
}