/* ===================== */
/* ОБЩИЕ СТИЛИ */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: clacon2;
    color: #e0e0e0;
}

/* ===================== */
/* ОСНОВНАЯ РАЗМЕТКА */
body {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* ===================== */
/* ШАПКА */
#header {
    height: 82px;
    background: #1d1d1d;
    border-bottom: 1px solid #bd9a00;
    box-shadow: 0 0 5px #bd9a00, 0 0 10px #bd9a00;
    font-size: 25px;
    text-align: center;
    line-height: 82px;
}

/* ===================== */
/* ЦЕНТРАЛЬНАЯ ОБЛАСТЬ */
.wrapper {
    display: flex;
    flex: 1;
    min-height: 0; /* важно для корректного overflow */
    border-bottom: 1px solid #bd9a00;
    box-shadow: 0 0 5px #bd9a00, 0 0 10px #bd9a00;
}

/* ОБЩИЕ СТИЛИ КОЛОНОК */
#sidebar,
#content,
#sidebar2 {
    min-height: 0;
    overflow-y: auto; /* прокрутка при переполнении */
    padding: 10px;
    background: #1d1d1d;
}

/* ЛЕВЫЙ САЙДБАР */
#sidebar {
    width: 260px;
    font-size: 24px;
    border-bottom: 1px solid #bd9a00;
    box-shadow: 0 0 5px #bd9a00, 0 0 10px #bd9a00;
}

/* КОНТЕНТ */
#content {
    flex: 1;
    font-size: 25px;
    box-shadow: 0 0 5px #bd9a00, 0 0 10px #bd9a00;
}

/* ПРАВЫЙ САЙДБАР */
#sidebar2 {
    width: 260px;
    border-bottom: 1px solid #bd9a00;
    box-shadow: 0 0 5px #bd9a00, 0 0 10px #bd9a00;
    font-size: 24px;
}

/* ===================== */
/* ФУТЕР */
#footer {
    height: 30px;
    background: #1d1d1d;
    text-align: center;
    line-height: 30px;
    color: #dbdbdb;
    box-shadow: 0 0 5px #bd9a00, 0 0 10px #bd9a00;
}

/* ===================== */
/* ТЕКСТ И ССЫЛКИ */
p, div {
    color: #dbdbdb;
    font-family: 'clacon2', sans-serif;
}

a {
    font-size: 20px;
    color: #dbdbdb;
    text-decoration: none;
    font-family: 'clacon2', sans-serif;
}

a:hover {
    color: #614200;
}

.sites-container {
    display: grid;
    /* Создаем 4 колонки одинаковой ширины (1fr) */
    grid-template-columns: repeat(4, 88px); 
    /* Расстояние между баннерами */
    gap: 5px; 
    /* Отступ сверху от текста */
    margin-top: 5px;
    /* Центрируем сетку, если нужно (опционально) */
    justify-content: start; 
}

.sites-container img {
    display: block;
    /* Убеждаемся, что картинка не вылезает за рамки ячейки */
    width: 88px;
    height: 31px;
}

#hiddenContent {
    display: none; /* Изначально скрытое содержимое */
}

@font-face {
    font-family: 'clacon2';
    src: url('../fonts/clacon2.woff2') format('woff2'),
         url('../fonts/clacon2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}