.header {
    font-family: "Josefin Sans", sans-serif;
    text-align: center;
    position: sticky;
    top: 0;
    width: auto;
    height: 10vh;
    /* backdrop-filter: blur(2px); */
    z-index: 999;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    background-color: #222;
    backdrop-filter: blur(2px);
    /* background: linear-gradient(to left,rgba(28, 46, 2, 0.538), rgba(57, 70, 17, 0.839), rgba(85, 117, 4, 0.892), rgb(22, 39, 3)); */
    /* cursor: none; */
    /* overflow: hidden; */
    transition: background-color 0.3s ease;
}


.active {
    background-color: #000000;
}

.header>h1 {
    z-index: 1000;

    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: 0.1em;
    /* margin-top: 30px; */
    font-weight: normal;
    /* text-align: left; */
    font-size: 30px;
    /* width: fit-content; */
    color: #ffffffe2;
    margin-left: 20px;
    margin-block: auto;
    /* border: 1px solid red; */
}


nav {
    position: relative;
    margin-right: 20px;
    z-index: 999;

    /* border: 1px solid red; */
    /* padding-right: 20px; */
}

nav>ul {
    height: 100%;
    list-style-type: none;
    /* width: 100%; */
    display: flex;
    flex-direction: row;
    /* align-items: stretch;  */
    justify-content: flex-start;
    gap: 20px;
}


.nav {
    font-weight: normal;
    font-family: "Josefin Sans", sans-serif;
    font-size: 15px;
    /* border: 1px solid red; */
    margin: auto;
}

.nav a {
    color: #ffffff;
    /* cursor: none; */
    /* height: 100%; */
    /* border: 1px solid red; */
}

.sep {
    height: 100%;
    transform: rotate(20deg);
    background-color: #aaa;
    width: 1px;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    /* mix-blend-mode: difference; */
}


.link {
    text-decoration: none;
    color: maroon;
}

a {
    color: #333;
    text-decoration: none;
    color: rgb(75, 72, 72)
}

a:hover {
    text-decoration: overline;
    color: #b5b5b5;
}

nav a:hover {
    text-decoration: none;
    color: #b8f688
}


@media screen and (max-width: 648px) {
    .header {
        flex-direction: column;
        height: 15vh;
        justify-content: center;
        align-items: center;
        /* gap: 1px; */
        >h1 {
            margin-inline: 0;
        }
        >nav {
            margin-bottom: 10px;
        width: fit-content;
        margin-inline: 0;
    }
    }
    
    
}