* {
    box-sizing: border-box;
}

body {
    margin: 0;
    /* отключить стандартные отступы браузера */
    font-family: Arial, sans-serif;
    line-height: 1.5;
    color: #1f2933;
    background: #f5f7fa;
}

.container {
    max-width: 900px;
    margin: 0;
    /* внешний отступ */
    padding: 0 16px;
    /* внутренний отступ */
}

header {
    background: #2b6a8a;
    color: #fff;
    padding: 16px 0;
}

main {
    padding: 20px 0;
}

section,
.article-block {
    background: #fff;
    border: 1px solid #d6dee6;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 14px;
}

h1,
h2 {
    margin: 0 0 10px;
}

.nav-list {
    list-style: none;
    /* убрать маркеры */
    padding: 0;
    margin: 0;
    display: flex;
    /* флексбокс для горизонтального расположения */
    flex-wrap: wrap;

    gap: 8px;
    /* расстояние между элементами */
}

.nav-list a,
a.inline-link {
    color: #0b5f8a;
    text-decoration: none;
}

.nav-list a:hover,
a.inline-link:hover {
    text-decoration: underline;
}

.city-image {
    width: 100%;
    max-width: 460px;
    display: block;
    margin: 10px 0;
    border: 1px solid #ccd6e0;
}

table {
    width: 100%;
    border-collapse: collapse;
    /* объединение границ таблицы */
}

th,
td {
    border: 1px solid #c9d3de;
    padding: 8px;
    text-align: left;
}

th {
    background: #eaf1f7;
}

.positive {
    color: #0d7a3a;
    font-weight: 700;
}

.negative {
    color: #b02a2a;
    font-weight: 700;
}

footer {
    padding: 12px 0 20px;
}

@media (max-width: 640px) {
    .nav-list {
        flex-direction: column;
        /* вертикальное расположение */
    }
}