* {
    box-sizing: border-box;
}
body {
    font: 18px/1.5em 'Roboto', Arial, Helvetica, Sans-Serif;
    background: #fff;
    padding: 0;
    margin: 0;
}
p {
    margin: 0 0 1em;
}
input[type=submit],
input[type=text] {
    border: none;
    margin: 0;
    padding: 0;
    text-decoration: none;
    background: transparent;
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
}
input[type=submit] {
    padding: 1em 1.666em;
    margin: 0 0 1em;
    background: #000;
    background-image: linear-gradient(180deg, hsl(0, 0%, 20%) 0%, hsl(0, 0%, 0%) 100%);
    border-radius: .333em;
    color: #ccc;
    cursor: pointer;
    text-transform: uppercase;
    text-align: center;
}
input:hover[type=submit] {
    background: #333;
    background-image: linear-gradient(180deg, hsl(0, 0%, 40%) 0%, hsl(0, 0%, 20%) 100%);
    color: #fff;
}
input[type=text] {
    padding: calc(1em - 2px);
    border: 1px solid #999;
    margin: 0 .5em 1em 0;
}
#search-result {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1em;
}
.label {
    font-weight: bold;
}

@media (max-width: 640px) {
    input[type=submit],
    input[type=text] {
        width: 100%;
        margin: 0 0 1em;
    }
}