#search{
    border-radius: 1em;
    border: 1px solid #888888;
    display: inline-flex;
    background-color: #ffffff;
    min-width: 10em;
    max-width: 20em;
    transition: all .25s ease-in-out;
}
#search:has(>input:focus){
    min-width: 15em;
    max-width: 30em;
}
#search>*{
    flex-grow: 0;
    border-radius: 1em;
    align-items: stretch;
    border: none;
}
#search>input{
    flex-grow: 1;
    padding: .125em .25em;
}
.header{
    display: flex;
    background-color: #aaddff;
    flex-wrap: wrap;
    box-shadow: 0 .125em 1em #aaddff;
    justify-content: flex-end;
}
.header>div{
    flex-grow: 0;
    padding: .25em;
    font-size: 1.25em;
    box-shadow: 0 0 0 #888888;
    transition: box-shadow .25s ease-in-out;
}
.header>div:hover{
    box-shadow: 0 .125em 1em #888888;
}
.header>div:first-child{
    flex-grow: 1;
}
.header a{
    color: black;
}