header {
    background-color: #000;
}

.logo {
    padding: 8px 0;
    border-bottom: 2px solid #fff;
}

.logo a {
    width: var(--logo);
    display: block;
}

nav {
    display: flex;
    gap: 5%;
}

nav ul {
    display: flex;
    flex: 1;
    gap: 20px;
}

nav ul a {
    color: #fff;
    font-size: 14px;
    display: block;
    text-align: center;
    padding: 15px 0 10px;
    border-bottom: 5px solid transparent;
}

nav ul a:hover {
    border-color: #fff;
}

nav ul li {
    flex: 1;
}

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

.searchBar #search {
    flex: 1;
    height: var(--button);
    border-radius: 3px 0 0 3px;
    border: 1px solid #dddcdc;
    font-size: 16px;
    text-indent: 1em;
}

.searchBar #go {
    width: var(--button);
    height: var(--button);
    background-color: #ff44cb;
    border-radius: 0 3px 3px 0;
}

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

@media screen and (max-width:769px) {
    nav {
        flex-direction: column;
        gap: 10px;
    }

    .logo a {
        margin: auto;
    }

    header .center {
        padding-bottom: 10px;
    }
}