header {
    background-color: var(--main-color-green-3);
    height: 5em;
    overflow: hidden;
}

header>nav {
    display: grid;
    grid-template-columns: 1fr 3fr 2fr;
}

header a, header a:visited {
    text-decoration: none;
    color: var(--main-color-black-2) !important;
    margin: .4em;
}

header>nav>a {
    margin-left: .5em;
    display:block;
    width: 3em;
    padding: .7em;
    text-decoration: none;
}

header>nav>a>picture>img {
    height: 2.5em;
    /* height: 3em; */
}

header>nav>form {
    padding-top: .9em;
    height: 1em;
}

header * {
    user-select: none;
}

header>nav>form>div>a {
    display: inline-block;
    padding-left: .2em;
}

header>nav>form>div>span {
    font-weight: normal;
    display:none;
}

header>nav>form>div>span:first-child {
    display:grid;
    grid-template-columns: 9fr 1fr;
    width: 100%;
    height: 2em;
    background-color: var(--main-color-white-4);
    border-radius: .7em;
    /* padding: .2em; */
    /* padding-bottom: .3em; */
    /*border: 1px solid var(--main-color-black-2);*/
}

header>nav>form>div>span>input[type="text"]:focus {
    outline: none;
}

header>nav>form>div>span>input[type="text"] {
    /* height: 2em; */
    padding-left: 1em;
    margin-right: -5px;
    background-color: var(--main-color-white-4);
    border: none;
    border-top-left-radius: .7em;
    border-bottom-left-radius: .7em;
}

header>nav>form>div>span>input[type="submit"]:hover {
    border: 1px solid var(--main-color-white-1);
    cursor: pointer;
}

header>nav>form>div>span>input[type="submit"] {
    height: 2.4em;
    border-radius: 0.2em;
    border-top-right-radius: .7em;
    border-bottom-right-radius: .7em;
    margin-left: 0px;
    /* background-color: var(--main-color-orange-6); */
    background-color: var(--main-color-black-2);
    color: var(--main-color-white-4);
    border: none;
    /* border: 1px solid var(--main-color-white-4); */
    border-left: 1px solid var(--main-color-black-2);
    min-width: 2em;
}

header>nav>div {
    display: flex;
    justify-self: end;
    padding-top: .9em;
    padding-right: .5em;
}

header>nav>div>span {
    padding-top: .3em;
}

header>nav>div>span>a>picture>img {
    height: 2.5em;
}

@media (min-width:0px) {
    header>nav {
        grid-template-columns: 1fr 3fr 4fr;
    }
}
@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ 
    header>nav {
        grid-template-columns: 1fr 2fr 3fr;
    }
}

@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    header>nav {
        grid-template-columns: 2fr 5fr 3fr;
    }
}
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ 
    header>nav>form>div>span {
        display: inline;
    }
    header>nav>a {
        width: 3em;
    }
}

@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }