<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSGOPOSITIVE - Рейтинги и Призы</title>
    <link rel="icon" href="https://csgopstv.com/img/favicon.png" sizes="48x48">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
</head>
<body>
    <header>
        <nav>
            <div class="current-category active" onclick="expandMenu()">
                <img src="/img/moltov.png" alt="Category Icon" draggable="false">
                <div class="menu-selector">
                    <ul>
                        <li><a href="/" class="active">Рейтинги</a></li>
                        <li><a href="/prizes">Призы</a></li>
                        <li><a href="/servers">Сервера</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <main>
        <section id="ratings">
            <h2>Рейтинги</h2>
            <div class="rating-box">
                <div class="rating-player">
                    <img src="/img/players/noname.png" alt="Player Photo">
                    <div class="player-info">
                        <h3>Baronus</h3>
                        <p>ELO: 2321</p>
                    </div>
                </div>
                <div class="rating-player">
                    <img src="/img/players/kenhy.png" alt="Player Photo">
                    <div class="player-info">
                        <h3>KENHY</h3>
                        <p>ELO: 4600</p>
                    </div>
                </div>
            </div>
        </section>
        <section id="prizes">
            <h2>Призы в Рейтинге</h2>
            <ul>
                <li>1 место: $5000</li>
                <li>2 место: $3000</li>
                <li>3 место: $1000</li>
            </ul>
        </section>
        <section id="servers">
            <h2>Сервера</h2>
            <div class="server-box">
                <div class="server-details">
                    <p>Сервер: #1</p>
                    <p>Количество Игроков: 10/20</p>
                    <p>Карта: Dust II</p>
                </div>
            </div>
            <div class="server-box">
                <div class="server-details">
                    <p>Сервер: #2</p>
                    <p>Количество Игроков: 15/20</p>
                    <p>Карта: Mirage</p>
                </div>
            </div>
        </section>
        <section id="description">
            <h2>Описание</h2>
            <p>CSGOPOSITIVE предлагает уникальную статистику и профили игроков. Участвуйте в соревнованиях и выигрывайте фантастические призы!</p>
        </section>
    </main>
    <footer>
        <div class="socials">
            <a href="https://vk.com/csgopositive_tour" class="vk"><img src="/img/icons/vk.svg" alt=""></a>
            <a href="https://www.youtube.com/@csgopstv/" class="youtube"><i class="bi bi-youtube"></i></a>
            <a href="https://www.twitch.tv/csgopstv" class="twitch"><i class="bi bi-twitch"></i></a>
        </div>
    </footer>
    <script src="scripts.js"></script>
</body>
</html>

`styles.css`
@import url(‘https://fonts.googleapis.com/css2?family=TTNormsPro:wght@400;600&display=swap’);

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: ‘TTNormsPro’, sans-serif;
    background-color: #0e1520;
    color: rgba(255, 255, 255, 0.96);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    overflow-x: hidden;
}

header {
    width: 100%;
    padding: 10px 20px;
    background: #0d131e;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 1000;
}

nav {
    display: flex;
    align-items: center;
}

.current-category {
    position: relative;
    cursor: pointer;
}

.menu-selector {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #0d131e;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
    z-index: 999;
}

.current-category.active .menu-selector {
    display: block;
}

.menu-selector ul {
    list-style: none;
}

.menu-selector li {
    margin: 5px 0;
}

.menu-selector a {
    color: rgba(255, 255, 255, 0.96);
    text-decoration: none;
    font-weight: 600;
    padding: 10px;
    font-size: 16px;
    display: block;
    transition: color 0.2s, background 0.2s;
}

.menu-selector a:hover {
    color: #26c461;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

main {
    max-width: 900px;
    width: 100%;
    padding: 80px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

section {
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
}

h2 {
    color: #26c461;
    font-size: 28px;
    margin-bottom: 20px;
}

.rating-box, .server-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.rating-player, .server-details {
    background: #0d131e;
    padding: 15px;
    margin: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
    width: 270px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rating-player:hover, .server-details:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* .rating-player img, .server-details img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0 */

make it more beatiful please, also remove player avatar