body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #121212;
            color: #f5f5f5;
        }

        header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 20px;
            background-color: #1f1f1f;
            border-bottom: 1px solid #333;
        }

        .logo img {
            height: 50px;
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 20px;
            padding: 0;
            margin: 0;
        }

nav ul li a {
    color: #f5f5f5;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 16px;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
}

nav ul li a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 2px;
    background: linear-gradient(145deg, #00c6ff, #0072ff);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
}

nav ul li a:hover::before {
    opacity: 1;
}

nav ul li a:hover {
    color: #00c6ff;
    transform: scale(1.05);
}

        .main-section {
            display: flex;
            min-height: 50vh;
			min-width: 1400px;
			margin: 0 auto; /* Центрируем секцию по горизонтали */
			width: 100%; /* Убедитесь, что секция занимает всю ширину */
        }

        .sidebar {
            width: 300px;
            background-color: #1a1a1a;
            padding: 20px;
            border-right: 1px solid #333;
        }

        .sidebar ul {
            list-style: none;
            padding: 0;
        }

        .sidebar button {
            display: block;
            width: 100%;
            background: none;
            color: #f5f5f5;
            border: none;
            text-align: left;
            padding: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .sidebar button:hover {
            background-color: #2a2a2a;
        }

        .content {
            flex-grow: 1;
            padding: 40px;
        }

.class-selector {
    display: block;
    padding: 10px;
    border-radius: 8px;
    margin-top: 40px; /* Увеличиваем отступ сверху */
    transition: opacity 0.3s ease;
}

#guide-skills {
    margin-top: 40px; /* Увеличиваем отступ снизу от блока скиллов */
}

/* Активное состояние — появление */
.class-selector.visible {
    opacity: 1;
    transform: translateY(0);
}

        select {
            padding: 10px;
            background-color: #1a1a1a;
            border: 1px solid #555;
            color: #f5f5f5;
        }
		.class-selector select {
    background: #111;
    color: #fff;
    border: 1px solid #ffc107;
    padding: 8px;
    font-size: 16px;
    border-radius: 6px;
    box-shadow: 0 0 10px #ffeb3b80;
    transition: box-shadow 0.4s ease, transform 0.3s ease;
}

.class-selector select:hover,
.class-selector select:focus {
    box-shadow: 0 0 15px #2196f3;
    transform: scale(1.05);
    border-color: #2196f3;
}


#guide-skills {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}


.skill-item {
    display: flex;
    align-items: center;
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid #555;
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 12px;
    gap: 16px;
    transition: background 0.3s ease;
}

.skill-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.skill-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
}

.skill-info h3 {
    margin: 0;
    color: #ffeb3b;
}

.skill-level {
    font-size: 14px;
    color: #aaa;
}

.skill-info p {
    margin: 4px 0 0;
    color: white;
}

.guide-bg-warrior {
    background: url('../r2online/images/knight.jpg') no-repeat center/cover;
}
.guide-bg-ranger {
    background: url('../r2online/images/reinge.jpg') no-repeat center/cover;
}
.guide-bg-mage {
    background: url('../r2online/images/mage.jpg') no-repeat center/cover;
}
.guide-bg-assassin {
    background: url('../r2online/images/assassin.jpg') no-repeat center/cover;
}
.guide-bg-summoner {
    background: url('../r2online/images/summoner.jpg') no-repeat center/cover;
}

.skills-tab {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.skills-tab.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Основные стили для кнопок */
button {
    background-color: transparent;
    border: 2px solid #f5f5f5;
    color: #f5f5f5;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

/* Основные стили для кнопок */
button {
    background-color: transparent;
    border: 2px solid #f5f5f5;
    color: #f5f5f5;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

/* Стили при наведении */
button:hover {
    background-color: #333;
    color: #ffeb3b; /* Желтый цвет для подсветки */
    transform: scale(1.05); /* Легкое увеличение */
}

/* Стили для выбранной кнопки */
button.active {
    color: #ffeb3b; /* Желтый текст */
    font-weight: bold;
    background-color: #333; /* Темный фон для выбранного пункта */
    border: 2px solid #ffeb3b; /* Желтая граница */
}

/* Легкое увеличение при фокусе */
button:focus {
    outline: none; /* Убираем стандартный фокус */
    box-shadow: 0 0 10px rgba(255, 235, 59, 0.7);
}