form,
input {
    margin: 0;
    padding: 0;
    border: 0;
}

form#searchForm {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    margin: 4px auto;
    padding: 0;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 1px 4px 0 rgb(206, 206, 206), 0 0 0 1px rgb(216, 216, 216);
}

form#search:focus {
    box-shadow: 0 0 4px 2px rgb(206, 206, 206), 0 0 0 1px rgb(216, 216, 216);
}

form#search:focus-within {
    box-shadow: 0 0 4px 2px rgb(206, 206, 206), 0 0 0 1px rgb(216, 216, 216);
}

input#searchWord {
    flex: 1 1 auto;
    width: calc(100% - 80px);
    box-sizing: border-box;
    padding: 8px;
    border: solid 1px rgb(44, 119, 243);
    border-right: 0;
    border-radius: 4px 0 0 4px;
    outline: 0;
    background-color: rgb(247, 247, 255);
    letter-spacing: 0.02em;
    -webkit-appearance: none;
}

input#search-i::placeholder {
    color: rgb(90, 90, 90);
}

input#searchBtn {
    width: 80px;
    box-sizing: border-box;
    border: 0;
    padding: 8px;
    border-radius: 0 4px 4px 0;
    outline: 0;
    background-color: rgb(44, 119, 243);
    color: rgb(249, 249, 249);
    letter-spacing: 0.02em;
    cursor: pointer;
    -webkit-appearance: none;
}

input#search-b:hover {
    background-color: rgb(13, 95, 232);
}

@media screen and (max-width: 768px) {
    form#searchForm {
        display: flex;
        width: 98%;
        box-sizing: border-box;
        margin: 2em auto;
        padding: 0;
        border: 0;
        border-radius: 4px;
        box-shadow: 0 1px 4px 0 rgb(206, 206, 206), 0 0 0 1px rgb(216, 216, 216);
    }
}