@keyframes draw {
    to {
        stroke-dashoffset: 0;
        fill: var(--ebony-black);
    }
}


#logo_c {
    stroke: #13100D;
    stroke-width: 1;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 1s forwards ease-in-out;
}

header {
    border-bottom: 2px solid black;
}

header,
header ul {
    display:flex;
    justify-content:center;
    align-items:center
}

header li a {
    text-decoration:none;
    color:white;
    display:block;
    text-transform:uppercase;
    letter-spacing:.2em;
    padding: var(--padding-links);
    font-size: 1vw;
    font-weight: 100;
}

header .current a {
    color: var(--sand-gold);
    position: relative;
}




/*mobile portrait*/
@media screen and (max-width: 767px) and (orientation: portrait) {

    header,
    header ul {
        flex-direction: column;
    }

    header ul {
        width: 100%;
    }

    #logo svg {
        width: 70px;
    }

    a[href="#menu"] {
        position: absolute;
        top: 10px;
        right: 10px;
        color: white;
        font-weight: 100;
    }

    [id="menu"] {
        position: absolute;
        top: -380px;
        left: 0;
        right: 0;
        background: var(--ebony-black);
        transition: all 300ms;
    }

    #menu:target {
        display: flex;
        top: 120px;
    }

}


/*tablet landscape & desktop */
@media screen and (min-width: 768px), screen and (orientation: landscape) {

    header,
    header ul {
        flex-direction:row;
    }

    a[href="#menu"] {
        display: none;
    }
        
    header li a:before {
        top: 0px;
    }

    header li a:after {
        bottom: 0px;
    }

    header li a:hover:before,
    header li a:hover:after {
        transform: scaleY(1.0);
    }

    #logo svg {
        width: 100px;
    }


}