header {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
    background-image: linear-gradient(to bottom, #875fb3, #4f317c);
    padding: 0 20px;
    display: flex;
    align-items: center;
}

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

nav {
    margin: 0 auto;
}

nav ul {
    display: flex;
}

nav a {
    color: #fff;
    display: block;
    padding: 16px 30px;
    font-size: 15px;
}

.searchBar {
    width: var(--searchBar);
    display: flex;
    overflow: hidden;
    border-radius: 3px;
}

#go {
    width: var(--button);
    height: var(--button);
    background-color: rgba(255, 255, 255, 0.15);
}

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

#search {
    flex: 1;
    height: var(--button);
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    text-indent: 8px;
}

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

nav a:hover {
    background-color: rgba(255, 255, 255, 0.116);
}

@media screen and (max-width:769px) {
    header {
        flex-direction: column;
        padding: 8px 0;
        row-gap: 8px;
    }

    nav {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    nav a {
        padding: 8px 16px;
    }

    .searchBar {
        padding: 0 4px;
    }
}