@font-face {
    font-family: headerFont;
    src: url(/static/fonts/EBGaramond-VariableFont_wght.ttf);
}

:root {
    --font-p: 1.1em/1.9 'Open Sans', 'DejaVu Sans', FreeSans, Helvetica, sans-serif;
    --font-h: 1.1em/1.7 'headerFont', serif;
    --cfg: #433;
    --cbg: #ead8d8;
    --cdark: #a6a5a5;
    --clight: #b2b2b2;
    --cmed: #ffffff;
    --clink: #055b2d;
    --cemph: rgb(49, 226, 0);
    --cemphbg: #0881;
}

.feather{
    /* mask-image: linear-gradient(black, black, transparent); */
    mask-image:
        linear-gradient(0deg, rgba(0, 0, 0, 1) 94%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 1) 94%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 1) 94%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(270deg, rgba(0, 0, 0, 1) 94%, rgba(0, 0, 0, 0) 100%);
    mask-composite: intersect;
}

.logo-header {
    height: 6ex;
}

@media screen and (min-width: 40rem) {
    :root {
        --width: 70%;

    }

    nav ul {
        display: flex;
        align-items: center;
    }

    .col {
        margin: 0 1rem;
    }
}

@media screen and (max-width: 40rem) {
    :root {
        --width: 90%;

    }

    nav ul:first-child>li {
        display: flex;
        align-items: center;
    }

    nav ul:first-child>li:first-child:after {
        padding-left: 1em;
        font-size: large;
    }

    .mobile-reversed {
        flex-direction: column-reverse;
    }
}