/* customize navigation bar */
#nav{
    grid-row: 1/2;
    grid-column: 1/-1;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #fafafa;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
    display: grid;
    grid-auto-flow: column;
}
#nav #searchBar input{
    height: 40px;
    width: 240px;
    outline: none;
    border: none;
    background-color: #e9e9e9;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 0px 4px;
}
#nav #searchBar button img{
    width: 44px;
    margin: 3px -5px;
}

/* left direction */

#nav.dirLeft #logo{
    grid-column: 1/2;
    grid-row: 1/-1;
    height: 70px;
    place-self: center start;
    margin-left: 20px;
}
#nav.dirLeft #searchBar{
    height: 40px;
    place-self: center end;
    margin-right: 50px;
    display: grid;
    place-items: center start;
    grid-template-columns: 40px max-content;
    grid-auto-flow: column;
}
#nav.dirLeft #searchBar button{
    height: 40px;
    width: 40px;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: #e9e9e9;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

/* right direction */

#nav.dirRight #logo{
    grid-column: 2/-1;
    grid-row: 1/-1;
    height: 70px;
    place-self: center end;
    margin-left: 20px;
}
#nav.dirRight #searchBar{
    grid-column: 1/2;
    grid-row: 1/-1;
    height: 40px;
    place-self: center start;
    margin-right: 50px;
    display: grid;
    place-items: center start;
    grid-template-columns: 40px max-content;
    grid-auto-flow: column;
}
#nav.dirRight #searchBar button{
    height: 40px;
    width: 40px;
    cursor: pointer;
    outline: none;
    border: none;
    background-color: #e9e9e9;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* media queries */

@media screen and (max-width: 450px) {
    #nav #logo{
        height: 50px !important;
        margin: 0 10px !important;
    }
    #nav #searchBar{
        grid-template-columns: 30px max-content !important;
        margin: 0 10px !important;
    }
    #nav #searchBar input{
        height: 30px !important;
        width: 160px !important;
    }
    #nav #searchBar button{
        height: 30px !important;
        width: 30px !important;
    }
    #nav #searchBar button img{
        height: 33px !important;
        margin-top: -2px !important;
        margin-right: -3 !important;
    }
}
@media screen and (max-width: 270px) {
    #nav #searchBar input{
        width: 115px !important;
    }
}