styles.css

header {
    padding: 10px 20px; /* Внутренние отступы */
    display: flex; /* Располагаем элементы в один ряд */
    justify-content: space-between; /* Распределяем элементы по краям */
    align-items: center; /* Центрируем по вертикали */
    margin-left: -20px; /* Компенсация отступа страницы */
    }
    header img {
        max-width: 50px; /* Максимальная ширина логотипа */
        vertical-align: middle; /* Выравнивание по вертикали */
    }
    nav {
        display: flex; /* Располагаем ссылки в один ряд */
    }
    nav a {
        color: #FFFFFF; /* Белый цвет ссылок */
        text-decoration: none; /* Убираем подчеркивание ссылок */
        margin-left: 20px; /* Отступ между ссылками */
        font-size: 18px; /* Размер текста ссылок */
    }
    nav a:first-child {
        margin-left: 0; /* Убираем отступ слева у первой ссылки */
    }
    nav a:hover {
        text-decoration: underline; /* Подчеркивание при наведении */
    }

body {
    background: url("img/wallpaper-1.webp");
    background-size: cover; /* Растягивать изображение на всю область фона */
    background-repeat: no-repeat; /* Не повторять изображение */
    background-attachment: fixed; /* Фон остаётся зафиксированным при прокрутке */

    font-family: "Roboto", sans-serif;
    font-size: 1rem;
    color: #ffffff;
    background-color: black;
    margin: 0;
}
footer {
    background-color: #333333; /* Темный фон для футера */
    color: #FFFFFF; /* Белый цвет текста */
    text-align: center; /* Центрирование текста */
    padding: 5px 0; /* Отступы сверху и снизу */
}
a{
    color: #dfe4f2
}
a:hover{
    color: #cfdafc
}

.social-icons {
    display: flex; /* Располагаем иконки в ряд */
    justify-content: center; /* Центрируем их по горизонтали */
    align-items: center; /* Центрируем по вертикали */
    margin-top: 10px; /* Отступ над иконками */
}
.social-icons a {
    display: inline-block; /* Размещаем иконки в строку */
    margin: 0 10px; /* Отступы между иконками */
}
.social-icons img {
    width: 30px; /* Ширина иконок */
    height: 30px; /* Высота иконок */
}

.center-hor{
    display: grid;
    place-items: center; /* Центрирование по горизонтали и вертикали */
    flex: 1; /* Заполняет доступное пространство */
}

.margin-b{
    margin-bottom: 0
}

p, h1, h2, h3, h4, h5, h6, img{
    margin-left: 20px;
    margin-right: 20px;
}

@media (max-width: 768px) {
    header, footer {
    padding: 10px;
    flex-direction: column;
    align-items: center;
    }
    nav {
        flex-direction: column;
        align-items: center;
    }
    nav a {
        margin: 10px 0;
    }
    iframe {
         width: 100%;
         margin: 10px 0;
    }
    }

@media (max-width: 480px) {
    header img {
        max-width: 40px;
    }
    nav a {
        font-size: 16px;
    }
    iframe {
        height: 250px;
    }
}