nav {
    position: fixed;
    top: 0;
   
    background-color: hsl(from var(--primary) h s 0.1 / 0.7);
    backdrop-filter: blur(30px);
    width: 100vw;

    .navwrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-inline: 2em;
        padding-block: 4px;
        max-width: 1200px;
        margin-inline: auto;
    }
}

.navlogo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    * {
        margin-block: 0;
    }

    p {
        font-size: 0.7em;
    }
}

.navmenu {

    ul {
        list-style-type: none;
        display: flex;
        gap: 1em;
        align-items: center;
    }
}


@media screen and (max-width: 386px) {
    .navlogo {
        p {
           display: none;
        }
}
}