/* Общие настройки */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    background: linear-gradient(180deg, #333333, #1a1a1a); /* Тусклый темно-серый градиент */
    color: #ff7200; /* Оранжевый текст */
    font-family: 'Roboto', sans-serif; /* Модерновый шрифт */
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
    padding: 20px;
    background-image: url('forge-background.jpg'); /* Добавьте фоновое изображение кузни */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-blend-mode: multiply; /* Смешивание фона с градиентом */
    background-color: #333333; /* Темно-серый фон в случае отсутствия изображения */
    color: #ff7200; /* Оранжевый текст */
}

/* Навигация */

/* Таблицы */
table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0, 0, 0, 0.8); /* Полупрозрачный черный фон */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Эффект объема */
}

    table th, table td {
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #555555; /* Серая линия между строками */
        color: #ff7200; /* Оранжевый текст в таблицах */
    }

/* Заголовки */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Bebas Neue', cursive; /* Шрифт для заголовков */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Тень для эффекта глубины */
    color: #ff7200; /* Оранжевый цвет */
}

/* Параграфы */
p {
    color: #ff7200; /* Оранжевый текст */
}

/* Контейнер */
.container {
    background: rgba(0, 0, 0, 0.8); /* Полупрозрачный черный фон */
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Эффект объема */
    color: #ff7200; /* Оранжевый текст внутри контейнера */
}

/* Футер */
footer {
    background: linear-gradient(180deg, #333333, #1a1a1a); /* Тусклый темно-серый градиент для футера */
    padding: 20px 0;
    text-align: center;
    border-top: 2px solid #ff7200; /* Оранжевая полоса */
    color: #ff7200; /* Оранжевый текст */
}

    footer a {
        color: #ff7200; /* Оранжевый цвет ссылок */
        font-weight: bold;
        text-decoration: none;
        transition: color 0.3s ease;
    }

        footer a:hover {
            color: #ffffff; /* Белый цвет при наведении */
        }

/* Контакты */
.contact-info {
    background: rgba(0, 0, 0, 0.9); /* Темный фон для блока контактов */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    color: #ff7200; /* Оранжевый текст */
}

    .contact-info h2 {
        margin-bottom: 20px;
        color: #ff7200; /* Оранжевый цвет заголовка */
    }

    .contact-info p {
        margin-bottom: 10px;
        color: #ff7200; /* Оранжевый цвет параграфов */
    }

    .contact-info a {
        color: #ff7200; /* Оранжевый цвет ссылок */
        font-weight: bold;
        text-decoration: none;
        transition: color 0.3s ease;
    }

        .contact-info a:hover {
            color: #ffffff; /* Белый цвет при наведении */
        }

.img-fixed {
    width: 100%; /* адаптивная ширина */
    max-width: 300px; /* ограничение по ширине */
    height: 200px; /* одинаковая высота */
    object-fit: cover; /* обрезает фото без искажения */
    border-radius: 8px; /* скругленные углы (по желанию) */
}