*,
*::after,
*::before {
    box-sizing: inherit;
    padding: 0;
    margin: 0;
}

html {
    font-size: 62.5%;
}

body {
    box-sizing: border-box;
    color: #333333;
    font-family: Arial, Helvetica, sans-serif;
    max-width: 65rem;
    margin: 0 auto;
    padding: 0 1.6rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    color: #888888;
    border-top: 1px solid #eee;
    margin-top: 1.6rem;
    padding: 1.6rem 0;
}

header {
    margin-top: 1.6rem;
    margin-bottom: 4.8rem;
}

h1 {
    font-size: 6.4rem;
    margin-bottom: 1.6rem;
}

header a {
    color: #888;
    margin-right: 1.6rem;
    text-decoration: none;
    font-size: 1.6rem;
}

.main {
    flex-grow: 1;
}

.portrait {
    width: 25rem;
}

.weather-form-title {
    font-size: 1.6rem;
}

.search-form {
    margin: 1rem 0;
}

.message-0 {
    margin-bottom: 0.2rem;
}

input {
    border: solid 1px #ccc;
    padding: 8px;
}

button {
    cursor: pointer;
    border: solid 1px #888;
    background: #888;
    color: white;
    padding: 0.8rem;
    border-radius: 5px;
}

.about-text {
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
}