<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">#mainHeader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 99;
    background-color: var(--color-darken);
    transform: translateY(-100%);
    transition: transform .3s ease-out;
}
/* STYLES ON SHRINK */
#mainHeader.shrink {
    transform: translateY(0);
}


#mainHeader img {
    width: 210px;
    position: relative;
    z-index: 2;
}
#mainHeader nav {
    width: 100%;
    padding: 30px 5%;
    display: flex;
    justify-content: flex-end;
}
#mainHeader ul {
    width: calc(50% - 105px);
    text-align: right;
}
#mainHeader ul  li {
    display: inline-block;
}
#mainHeader ul li:not(:last-of-type) {
    margin-right: 20px;
}
#mainHeader ul li a {
    padding: 8px;
    font-size: 1.5rem;
}
#mainHeader div {
    width: calc(50% + 105px);
    text-align: right;
}



@media screen and (max-width:1024px) {
    #mainHeader nav {
        justify-content: space-between;
    }
    #mainHeader div {
        width: 50%;
        text-align: left;
    }
    #mainHeader ul {
        width: 50%;
    }
    #mainHeader ul li:not(:last-of-type) {
        margin-right: 10px;
    }
}</pre></body></html>