header {
    width: var(--all-width);
    position: fixed;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 6px 12px rgba(16, 20, 30, .05), 0 8px 8px rgba(16, 20, 30, .1), 0 0 8px rgba(16, 20, 30, .05);
    backdrop-filter: blur(8px);
    padding: 12px;
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9;
}

.logo {
    width: var(--logo);
}

.searchBar {
    width: var(--searchBar);
    margin: 0 auto;
    margin-left: 5%;
    background-color: #f3f3f4;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
}

#search {
    background-color: transparent;
    height: var(--button);
    flex: 1;
    font-size: 14px;
    text-indent: 1em;
}

#go {
    width: var(--button);
    height: var(--button);
}

#go img {
    transform: scale(.8);
}

nav ul {
    display: flex;
    column-gap: 20px;
}

nav ul a {
    font-size: 14px;
    color: #40434b;
    transition: .4s;
}

nav ul a:hover {
    color: #183dff;
}

.navActive {
    color: #183dff;
}

.peBtn {
    width: var(--button);
    height: var(--button);
    display: none;
}

@media screen and (max-width:769px) {
    header {
        border-radius: 0;
        width: 100%;
        align-items: center;
        row-gap: 8px;
        position: sticky;
        margin: 0;
        justify-content: space-between;
        margin-bottom: 20px;
        z-index: 9999;
        top: 0;
        left: 0;
        transform: none;
        right: 0;
    }

    .peBtn {
        display: block;
    }

    .searchBar,
    nav {
        position: absolute;
        width: 100%;
        height: 100vh;
        background-color: #fff;
        left: 0;
        top: 0;
        transform: translateY(-100%);
        transition: .3s;
        margin: 0;
        border-radius: 0;
        padding: 0 15px;
    }

    .searchBar #go,
    .searchBar #search {
        border-bottom: 1.5px solid #e5e5e5;
        text-indent: 0;
    }

    .head-open {
        transform: translateY(0);
        top: 100%;
    }

    nav ul {
        flex-direction: column;
        gap: 15px;

    }

    nav ul li {
        border-bottom: 1.5px solid #e5e5e5;
        padding-bottom: 5px;
    }

    nav ul a {
        font-size: 14px;
    }
}