header {
    padding: 0 .5333rem;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: rgba(3, 0, 20, .08);
    left: 0;
    height: 2.1867rem;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 100;
    border-bottom: 1px solid #a48fff1f;
}

.head-cen {
    width: var(--all-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: .5333rem 0;
}

.logo a {
    color: #fff;
    font-family: 'Gulkave-Regular';
    text-transform: uppercase;
    font-weight: 400;
    font-size: .8533rem;
}

nav {
    margin: auto;
}

nav ul {
    display: flex;
    background-color: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 26.64rem;
    padding: .2667rem .5333rem;
}

nav ul a {
    font-size: .4rem;
    font-weight: 500;
    color: #ffffffE6;
    display: block;
    margin: 0 .32rem;
}

nav ul a:hover {
    color: #ffffff99;
}

.searchBar {
    width: var(--searchBar);
    display: flex;
}

#search {
    flex: 1;
    height: var(--button);
    border-radius: 2.64rem 0 0 2.64rem;
    padding: 0 1em;
    font-size: .4rem;
    background: linear-gradient(180deg, rgba(60, 8, 126, 0) 0%, rgba(60, 8, 126, .42) 100%), rgba(113, 47, 255, .24);
    box-shadow: inset 0 -7px 11px #a48fff1f;
    background-color: transparent;
    color: #fff;
}

#search::placeholder {
    color: #ffffffE6;
}

#go {
    height: var(--button);
    padding: 0 .4rem;
    border-radius: 0 2.64rem 2.64rem 0;
    background: linear-gradient(180deg, rgba(60, 8, 126, 0) 0%, rgba(60, 8, 126, .42) 100%), rgba(113, 47, 255, .24);
    box-shadow: inset 0 0 12px #bf97ff70;
    color: #f4f0ff;
    font-size: .4rem;
}

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

@media screen and (max-width:769px) {
    header {
        padding: 0;
        position: relative;
        height: auto;
        z-index: 9999999999;
    }

    .peBtn {
        display: block;
    }

    .logo {
        display: flex;
        align-items: center;
    }

    .head-cen {
        padding: .2133rem;
        row-gap: .2667rem;
        align-items: center;
        justify-content: space-between;
        z-index: 99;
    }

    nav,
    .searchBar {
        width: 100vw;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        background: #000;
        padding: 50px 3px 0;
        transform: translateY(-100%);
        transition: .3s;
    }

    .peOpen {
        transform: translateY(0);
    }

    .closeSearchBtn,
    .closeMenuBtn {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    nav ul {
        width: 100%;
        flex-direction: column;
        gap: 20px;
    }

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