/* Основные стили для body */
body {
    background: #0a0a0a; /* Темный фон */
    color: #fff; /* Белый текст */
    font-family: 'Bahnschrift', sans-serif; /* Основной шрифт */
    text-align: center; /* Выравнивание текста по центру */
    margin: 0;
    padding: 0;
    min-height: 100vh; /* Минимальная высота на весь экран */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Стили для заголовка h1 */
h1 {
    font-family: 'Century Gothic', sans-serif;
    font-weight: bold;
    font-size: 6rem;
    text-transform: uppercase;
    color: #ff5200; /* Оранжевый цвет */
    margin-bottom: 20px;
    animation: glow 2s infinite alternate; /* Анимация свечения */
}

@keyframes glow {
    0% {
        text-shadow: 0 0 3px #ff5200, 0 0 6px #cc4100; /* Меньше свечения */
    }
    100% {
        text-shadow: 0 0 6px #ff5200, 0 0 12px #cc4100; /* Больше свечения */
    }
}

/* Стили для навигационных кнопок */
.nav-buttons {
    margin-bottom: 20px; /* Отступ снизу */
    display: flex;
    gap: 10px; /* Расстояние между кнопками */
}

.nav-button {
    background: #ff5200; /* Оранжевый цвет */
    color: #fff; /* Белый текст */
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-family: 'Bahnschrift', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease; /* Плавные переходы */
    text-decoration: none; /* Убираем подчеркивание */
}

.nav-button:hover {
    background: #cc4100; /* Темно-оранжевый цвет */
    transform: scale(1.05); /* Увеличение размера */
}
.text-block, .downloads-container {
background: rgba(20, 20, 20, 0.9);
padding: 30px;
border-radius: 10px;
width: 90%; 
max-width: 1200px; 
margin: 20px;
box-shadow: 0 0 15px rgba(255, 140, 66, 0.3);
box-sizing: border-box; 
}

.sub-block, .download-item {
background: rgba(30, 30, 30, 0.8); 
padding: 15px;
border-radius: 8px;
margin: 15px 0;
box-shadow: 0 0 10px rgba(255, 140, 66, 0.2);
transition: box-shadow 0.3s ease; 
position: relative;
width: 100%; 
display: flex;
align-items: center;
overflow: hidden; 
box-sizing: border-box; 
}

.sub-block::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px; 
background: #ff5200;
}

/* Стили для текстовых блоков и контейнеров */
.text-block, .downloads-container {
    background: rgba(20, 20, 20, 0.9); /* Темный фон блока */
    padding: 30px;
    border-radius: 10px;
    width: 90%; /* Блок занимает 90% ширины экрана */
    max-width: 1200px; /* Максимальная ширина блока */
    margin: 20px;
    box-shadow: 0 0 15px rgba(255, 140, 66, 0.3);
    box-sizing: border-box; 
}
.sub-block p, .download-item p {
font-size: 1.1rem;
line-height: 1.6;
margin: 0;
padding-left: 20px; 
text-align: left; 
z-index: 1; 
}

.sub-block:hover, .download-item:hover {
box-shadow: 0 0 15px rgba(255, 140, 66, 0.5);
}

.download-item {
display: flex;
justify-content: space-between;
align-items: center;
}

.download-button {
background: #ff5200; 
color: #fff; 
padding: 10px 20px;
border: none;
border-radius: 5px;
font-family: 'Bahnschrift', sans-serif;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease; 
text-decoration: none; 
}

.download-button:hover {
background: #cc4100; 
transform: scale(1.05); 
}

/* Стили для подблоков */
.sub-block {
    background: rgba(30, 30, 30, 0.8); /* Фон подблоков */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 0 10px rgba(255, 140, 66, 0.2);
    transition: box-shadow 0.3s ease; /* Плавное изменение тени */
    width: 100%; /* Ширина подблока */
    display: flex;
    flex-direction: column; 
    align-items: flex-start; 
    box-sizing: border-box; 
}

/* Стили для заголовка в подблоке */
.sub-block h2 {
    color: #FF8C42;
    margin-bottom: 15px;
    font-size: 1.5em;
    text-align: left; /* Выравниваем заголовок по левому краю */
    width: 100%; /* Занимает всю ширину */
    display: block; /* Заголовок занимает всю ширину */
    padding: 0; /* Убираем внутренние отступы */
}

/* Стили для описания в подблоке */
.sub-block p {
    color: #E0E0E0;
    font-size: 1em;
    line-height: 1.5;
    text-align: left; /* Выравниваем описание по левому краю */
    margin-top: 15px; /* Отступ сверху */
    width: 100%; /* Занимает всю ширину */
    padding: 0; /* Убираем внутренние отступы */
}




.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; 
margin-bottom: 20px;
}

.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
}

/* Стили для кнопки "Back: Tutorials" */
.back-button {
margin: 20px 0;
text-align: center;
}

.back-button .nav-button {
background-color: #ff5200;
color: #1E1E1E;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
}

.back-button .nav-button:hover {
background-color: #cc4100;
}


footer {
width: 100%;
padding: 10px 0;
background: rgba(20, 20, 20, 0.9); 
border-top: 1px solid #ff5200; 
text-align: center;
font-size: 0.9rem;
color: #ccc; 
margin-top: auto; 
}

footer a {
color: #ff5200; 
text-decoration: none; 
transition: color 0.3s ease; 
}

footer a:hover {
color: #cc4100; 
}


.tutorials-container {
display: grid;
grid-template-columns: repeat(2, 1fr); 
gap: 20px; 
max-width: 800px; 
margin: 20px auto; 
padding: 0 20px; 
}


.tutorial-category {
position: relative; 
overflow: hidden; 
text-decoration: none;
color: #fff;
border-radius: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
aspect-ratio: 1 / 1; 
}

.tutorial-category:hover {
transform: scale(1.05); 
box-shadow: 0 0 15px rgba(255, 140, 66, 0.5); 
}


.tutorial-category img {
width: 100%;
height: 100%; 
object-fit: cover; 
}


.tutorial-category span {
position: absolute; 
bottom: 0; 
left: 0;
right: 0;
padding: 15px;
text-align: center;
background: rgba(30, 30, 30, 0.7); 
font-size: 1.2rem;
font-weight: bold;
}


@media (max-width: 600px) {
.tutorials-container {
grid-template-columns: 1fr; 
}
}