.search-bar {
    width: 17.0rem;
    height: 2.0rem;
    padding: 0.3rem;
    color: var(--color-text);
    background-color: var(--color-parts);
}
@media (min-width: 500px) {
    .search-bar{
        height: 2.5rem;
        width: 27.0rem;
    }
}


.search-bar::placeholder {
    font-size: 0.65rem;
    color: var(--color-text);
}
@media (min-width: 500px) {
    .search-bar::placeholder{
        font-size: 0.9rem;
    }
}

.search-bar:focus {
    outline: none;
}

.search-button{
    background: var(--color-parts);
    text-align: center;
    width: 4.0rem;
    height: 2.0rem;
    line-height: 1;
    padding: 0.3rem 0.5rem;
    border: 0.1rem solid var(--color-parts-border);
}
@media (min-width: 500px) {
    .search-button{
        height: 2.5rem;
    }
}

.search-button:hover{
    background: var(--color-parts-hover);
}