header {
    background-color: skyblue;
}

form {
    display: grid;
}

#citybtns {
    margin-top: 30px;
    border-top: 2px solid black;
}

#datetime {
    font-size: 2rem;
    display: flex;
}

.flex-row {
    display: flex;
    flex-wrap: wrap;
}

.justify-space-between {
    justify-content: space-between;
}

.btn {
    display: block;
    margin: 20px 0;
}

/* CARDS */
.card {
    display: inline-block;
    background-color: skyblue;
    border: 3px solid var(--dark);
    padding: 48px 63px;
    border-radius: var(--border-radius);
    margin: 52px 22px 23px 58px;
}

.city-card {
    border: 3px solid var(--dark);
    padding: 15px 21px;
    border-radius: var(--border-radius);
    margin: 48px 21px;
}

.favorable {
    color: white;
    background-color: green;
    border-radius: 10px;
}

.moderate {
    color: white;
    background-color: deepskyblue;
    border-radius: 10px;
}

.severe {
    color: white;
    background-color: red;
    border-radius: 10px;
}