/* 1. ФОН СТРАНИЦЫ — ЧЁРНЫЙ */
body {
    color: #9E9E9E;
    background-color: #000000;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;   /* Оставляем только центрирование по горизонтали */
    min-height: 100vh;
    align-items: flex-start;  /* ← Прижимаем к верху */
    font-family: 'Verdana', fantasy, cursive;


}

/* 2. КОНТЕЙНЕР С ТВОЕЙ КАРТИНКОЙ И ОСТРЫМИ КРАЯМИ */
.container {
    max-width: 700px;
    width: 100%;
    padding: 40px;
    
    /* ТВОЯ КАРТИНКА КАК ФОН */
    background-image: url('fon2.jpg');
    background-size: cover;
    background-position: center;
    
    /* 🔲 ОСТРЫЕ КРАЯ (без скругления) */
    border-radius: 0;
    
    /* Затемнение, чтобы текст читался */
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
    
    /* Тень для красоты */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}




/* три КВАДРАТНЫЕ КНОПКИ СВЕРХУ ПО СЕРЕДИНЕ */
.top-menu {
    display: flex;
    justify-content: center;   /* выравнивание по центру */
    gap: 20px;                /* расстояние между кнопками */
    margin-bottom: 30px;      /* отступ от заголовка */
}

.top-menu a {

    display: flex;            /* чтобы выровнять текст по центру внутри кнопки */
    align-items: center;
    justify-content: center;
    width: 400px;             /* ширина кнопки (квадрат) */
    height: 70px;            /* высота кнопки (квадрат) */
    
    background: rgba(0, 0, 0, 0.9);   /* полупрозрачный чёрный фон */
    border: 3px solid rgba(255, 255, 255, 0.2);
    color: #E0E0E0;
    text-decoration: none;
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
    transition: all 0.1s ease;   /* плавность */
    
    border-radius: 0;            /* ОСТРЫЕ УГЛЫ (квадратные) */
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ */
.top-menu a:hover {
    transform: translateY(-5px);        /* сдвиг вверх */
    border-color: #8F0000;              /* красная рамка */
    color: #8F0000;                     /* красный текст */

}



/* ------------------------------------------------ */
/* ОБЩИЙ СТИЛЬ ДЛЯ ВСЕХ КОНТЕНТ-БОКСОВ */
.content-box {
    background-color: #000000; /* Фон бокса чуть-чуть светлее/темнее основного фона */
    border: 2px solid #595959; /* Тонкая серая рамка в 1 пиксель */
    padding: 20px;             /* Внутренние отступы, чтобы текст не прилипал к рамке */
    margin-bottom: 20px;       /* Внешний отступ снизу, чтобы боксы не слипались друг с другом */
    
    text-align: left;          /* Текст по умолчанию выровнен по левому краю */
}



/* Заголовок внутри бокса */
.box-title {
    font-size: 10px;
    font-weight: bold;
    color: #636363;            /* Золотисто-песочный цвет заголовка */ 
    margin-bottom: 12px;       /* Отступ от заголовка до текста */
    letter-spacing: 1px;
}

/* Текст внутри бокса */
.box-text {
    font-size: 15px; 
    line-height: 1.6;          /* Красивое расстояние между строками */
    color: #cccccc;            /* Мягкий белый/серый цвет текста */
}

/* ------------------------------------------------ */
/* СПЕЦИАЛЬНЫЙ СТИЛЬ ДЛЯ БОКСА ПРЕДУПРЕЖДЕНИЙ (warning) */
.content-box.warning {
    border: 1px solid #5a1a1a;  /* Меняем рамку на КРАСНУЮ */
    background-color: rgba(0, 0, 0, 0.7);  /* Делаем фон с легким красным оттенком */

}

/* Красный заголовок для предупреждения */
.content-box.warning .box-title {
    color: #ff3333;             /* Ярко-красный цвет */
    text-align: center;         /* Выравниваем заголовок по центру */
    font-size: 20px;
    letter-spacing: 2px;
}

/* Дополнительные утилиты для текста */
.text-center {
    text-align: center;         /* Быстрое выравнивание текста по центру */
}

.highlight {
    color: #ff6666;
    font-weight: bold;
    margin-top: 15px;           /* Отступ сверху для важного абзаца */
}

.my-image {
    display: block;          /* чтобы работали отступы */
    margin-right: auto;      /* прижимает картинку влево */
    margin-left: 0;          /* явно убираем центрирование */
    width: 300px;            /* задай нужную ширину */
    height: auto;
}
/* ВСЕ ССЫЛКИ ПРИ НАВЕДЕНИИ СТАНОВЯТСЯ КРАСНЫМИ */
a:hover {
    color: #8F0000 !important;
}


.gif-image {
    width: 100%;          /* растянуть на всю ширину контейнера */
    max-width: 500px;     /* но не больше 500 пикселей */
    height: auto;         /* сохранить пропорции */
    display: block;       /* убрать лишние отступы */
    margin: 20px auto;    /* центрировать */
}

/* Только для этой гифки */
.my-gif {
    width: 200px;          /* ← меняй размер */
    height: auto;
    display: block;
    margin: 20px auto;     /* ← центрирование */
}

/* ===== КНОПКА КАК В МЕНЮ (ДЛЯ СОЦСЕТЕЙ) ===== */
.social-btn {
    display: inline-block;
    padding: 12px 30px;
    background: rgba(0, 0, 0, 0.9);
    border: 3px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    text-decoration: none;
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    transition: all 0.1s ease;
    border-radius: 0;
    text-align: center;
}

.social-btn:hover {
    transform: translateY(-5px);
    border-color: #8F000;
    color: #ff3333;
}



/* ===== ВЕРТИКАЛЬНЫЕ КНОПКИ ДЛЯ СОЦСЕТЕЙ ===== */
.social-btn-vertical {
    display: block;              /* ← каждая с новой строки */
    width: 100%;                /* ← на всю ширину родителя */
    max-width: 140px;           /* ← но не шире 300px */
    margin-bottom: 10px;        /* ← отступ между кнопками */
    margin-left: 0;             /* ← прижимаем влево */
    margin-right: auto;
    text-align: center;
}





/* ------------------------------------------------ */
/* СТРОКА ДЛЯ КНОПКИ И ОПИСАНИЯ */
.social-item-row {
    display: flex;         /* Включаем Flexbox: элементы внутри встанут в одну строку */
    align-items: center;   /* Выравниваем элементы по центру по вертикали */
    gap: 25px;             /* Расстояние между кнопкой и текстом-описанием */
    margin-bottom: 18px;   /* Отступ между строками с соцсетями */
    flex-wrap: wrap;       /* Если экран узкий, текст перенесется под кнопку */
    justify-content: flex-start; /* Прижимаем всё к левому краю */
}

/* ТЕКСТ-ОПИСАНИЕ СПРАВА ОТ КНОПКИ */
.social-item-description {
    color: #aaaaaa;       /* Более светлый серый для хорошей читаемости */
    font-size: 14px;
    line-height: 1.6;
    flex-grow: 1;         /* Этот текст займёт всё оставшееся место справа */
}

.my-image2 {
    width: 200%;
    height: auto;
    display: block;
    margin-left: -44px;    /* ← теперь есть px! */
    margin-right: auto;
}



/* Эта магия делает картинки послушными на мобилках */
img {
    max-width: 112% !important; 
    height: auto !important;
    display: block;
}


.audio-wrapper {
    text-align: left;          /* ← плеер слева */
}

.custom-audio {
    max-width: 400px;          /* ← максимальная ширина */
    width: 100%;
    background: transparent;   /* ← без фона */
    border: none;              /* ← без рамки */
    outline: none;
    display: inline-block;
}



/* ================================================= */
/* СТИЛИ ДЛЯ ОКНА ПРОКРУТКИ МУЗЫКИ (SCROLLBOX) */

.music-scrollbox {
    max-height: 220px;          /* высота окна */
    overflow-y: auto;           /* прокрутка */
    padding-right: 10px;
    border: 1px dashed #333333;
    padding: 15px;
    background-color: #050505;
}

/* СТИЛИЗАЦИЯ СКРОЛЛБАРА */

.music-scrollbox::-webkit-scrollbar {
    width: 6px;
}

.music-scrollbox::-webkit-scrollbar-track {
    background: #0a0a0a;
    border-radius: 0;
}

.music-scrollbox::-webkit-scrollbar-thumb {
    background: #474747;
    border-radius: 0;
}

.music-scrollbox::-webkit-scrollbar-thumb:hover {
    background: #6B6B6B;
}

/* ОФОРМЛЕНИЕ ТРЕКОВ */

.track-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #222222;
    flex-wrap: wrap;
}

.track-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.track-info {
    flex: 1;
    min-width: 150px;
}

.track-title {
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    font-family: 'Helvetica Neue Interface';
}

.track-author {
    display: block;
    color: #888888;
    font-size: 13px;
    font-family: 'Verdana', sans-serif;
}

/* ПЛЕЕР ВНУТРИ ТРЕКА */
.audio-player {
    max-width: 300px;
    width: 100%;
    background: transparent;
    border: none;
}

/* АДАПТИВ ДЛЯ ТЕЛЕФОНОВ */
@media (max-width: 600px) {
    .track-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .audio-player {
        max-width: 100%;
    }
}




.content-box {
    position: relative; /* 👈 ЭТО САМОЕ ВАЖНОЕ */
    background-color: #000000;
    border: 2px solid #595959;
    padding: 20px;
    margin-bottom: 20px;
}
.my-sticker {
    position: absolute;   /* 👈 "отрывает" стикер и заставляет его прилипнуть к родителю */
    top: -20px;           /* 💡 Двигай вверх/вниз (минус — вверх, плюс — вниз) */
    right: -20px;         /* 💡 Двигай вправо/влево (минус — правее, плюс — левее) */
    width: 100px;         /* Размер стикера */
    z-index: 10;          /* Чтобы он был поверх текста */
    pointer-events: none; /* Чтобы можно было кликать на текст под ним */
}


.sticker {
    position: absolute;   /* 👈 "отрывает" стикер и заставляет его прилипнуть к родителю */
    top: -930px;           /* 💡 Двигай вверх/вниз (минус — вверх, плюс — вниз) */
    right: -30px;         /* 💡 Двигай вправо/влево (минус — правее, плюс — левее) */
    width: 100px;         /* Размер стикера */
    z-index: 10;          /* Чтобы он был поверх текста */
    pointer-events: none; /* Чтобы можно было кликать на текст под ним */
}

.sticker2 {
    position: absolute;   /* 👈 "отрывает" стикер и заставляет его прилипнуть к родителю */
    top: -930px;           /* 💡 Двигай вверх/вниз (минус — вверх, плюс — вниз) */
    right: -30px;         /* 💡 Двигай вправо/влево (минус — правее, плюс — левее) */
    width: 100px;         /* Размер стикера */
    z-index: 10;          /* Чтобы он был поверх текста */
    pointer-events: none; /* Чтобы можно было кликать на текст под ним */
}



/* ===== ГОРИЗОНТАЛЬНАЯ ГАЛЕРЕЯ ===== */
.gallery-scroll {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    padding: 10px 5px 20px 5px;
    max-width: 630px;          /* ширина контейнера под 2 картинки */
    margin: 0 auto;
    scrollbar-width: thin;
    scrollbar-color: #5a1a1a #0a0a0a;
}

.gallery-scroll::-webkit-scrollbar {
    height: 8px;
}

.gallery-scroll::-webkit-scrollbar-track {
    background: #0a0a0a;
}

.gallery-scroll::-webkit-scrollbar-thumb {
    background: #5a1a1a;
}

/* КАРТИНКИ (ШИРОКИЕ) */
.gallery-img {
    flex-shrink: 0;
    width: 300px;              /* ← ширина картинки */
    height: 150px;             /* ← УМЕНЬШИЛ ВЫСОТУ (было 200px) */
    object-fit: cover;         /* чтобы картинка заполняла блок без искажений */
    border: 1px solid #333;
}