* {
    box-sizing: border-box;
}

body {
    box-sizing: border-box;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: .9rem;
}

/* NAV */

header {
    color: #006AEC;
    font-size: .75rem;
    max-width: 90%;
    margin: 0 auto;
}

nav > * {
    float: left;
    width: 33.3333%;
    text-align: center;
    font-weight: 600;
}

nav form {
    margin-top: 5px;
}

::placeholder {
    color: #006AEC;
    font-weight: 600;
}

nav form input {
    background-image: url("img/magnifying-glass.svg");
    background-color: #F0F1F2;
    background-repeat: no-repeat;
    background-position: right;
    border: none;
}

nav form select {
    margin-right: 10px;
    border: none;
    color: #006AEC;
}

.input-container {
    background-color: #F0F1F2;
    border-radius: 5px;
    padding: 5px;
}

.logo {
    width: 35%;
}

nav ul {
    list-style: none;
    margin: 0;
}

nav ul li {
    float: left;
    margin: 8px 1rem 0;
}

/* HERO */

.hero {
    max-width: 80%;
    margin: 0 auto;
    padding-top: 60px;
    clear: both;
}

.hero div {
    float: left;
    width: 50%;
    padding: 0 .5rem;
}

.hero img {
    width: 100%;
}

h1 {
    font-family: "Source Serif Pro", "Noto Serif", serif;
    font-weight: 600;
    font-size: 2.25rem;
}

.results {
    text-decoration: underline;
    text-decoration-color: #00cca3;
    text-underline-offset: 10px;
}

button {
    background-color: #006AEC;
    color: whitesmoke;
    border: none;
    padding: 8px 0;
    border-radius: 5px;
    font-size: .7rem;
    width: 65px;
    margin-right: 5px;
}