:root {
    /* *============ ПЕРЕМЕННЫЕ ЦВЕТА body ============ */
    --color-font-body: #22009e;
    --color-background-body: #fffacd;
    /* *============================================== */
}

/* *,
*::before,
*::after {
    box-sizing: border-box;
} */

/* ?============================================== */
body {
    font-family: sans-serif;
    line-height: 1.5;
    color: var(--color-font-body);
    background-color: var(--color-background-body);

}

/* ?============================================== */
.section {
    background-color: #e4ffff;
}

.container {
    width: 480px;
    margin: 0 auto;
    padding: 0 15px;
    border: 5px solid tomato;
    outline: 5px dashed #2a2a2a;
}


/*! ---------------------------------------- */
h1,
h2,
p {
    margin: 0;
}

.page-header,
.page-footer,
.hero,
.about,
.features {
    padding-top: 20px;
    padding-bottom: 20px;
}

.page-header {
    background-color: #e0e0e0;
}

.hero {
    background-color: #4caf50;
}

.about {
    background-color: #ffc107;
}

.features {
    background-color: #2196f3;
}

.page-footer {
    background-color: #90a4ae;
}