<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #0d0d1a;
            color: #e0e0e0;
            font-family: 'Montserrat', sans-serif;
        }

        header {
            background-color: #1c1c2e;
            padding: 10px 40px; 
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.7);
        }

        header .logo img {
            height: 50px;
        }

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

        nav ul li a {
            color: #e0e0e0;
            text-decoration: none;
            font-weight: 700;
            padding: 12px 15px;
            transition: all 0.3s ease;
            border-radius: 5px;
        }

        nav ul li a:hover {
            background-color: #3a3a5e;
            color: #ffffff;
        }

        main {
            display: flex;
            justify-content: center;
            align-items: center;
            height: calc(100vh - 80px); 
            color: #e0e0e0;
            padding-top: 80px; 
        }

        .intro {
            text-align: center;
            background: rgba(28, 28, 46, 0.9);
            padding: 60px;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
            max-width: 800px;
        }

        .intro h1 {
            color: #ff4c60;
            font-size: 48px;
            margin-bottom: 20px;
        }

        .intro p {
            font-size: 20px;
            margin-bottom: 30px;
        }

        .btn-primary {
            display: inline-block;
            padding: 15px 35px;
            background-color: #ff4c60;
            color: #ffffff;
            text-decoration: none;
            font-weight: 700;
            font-size: 18px;
            border-radius: 8px;
            transition: background-color 0.3s ease;
        }

        .btn-primary:hover {
            background-color: #e03b50;
        }

        footer {
            background-color: #1c1c2e;
            text-align: center;
            padding: 30px;
            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.7);
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        footer .socials {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 20px;
        }

        footer .socials a {
            color: #ff4c60;
            text-decoration: none;
            font-size: 24px;
            transition: transform 0.3s ease;
        }

        footer .socials a:hover {
            transform: scale(1.2);
        }

        @media (max-width: 768px) {
            header {
                flex-direction: column;
                padding: 10px 20px;
            }

            nav ul {
                flex-direction: column;
                align-items: center;
            }

            main {
                padding: 40px 20px;
            }

            .intro {
                padding: 30px;
            }

            footer {
                padding: 20px;
            }
        }

        table {
        width: 100%;
        border-collapse: collapse;
        margin: 40px 0;
        font-size: 18px;
        table-layout: fixed;
    }

    table th, table td {
        padding: 15px;
        background: rgba(28, 28, 46, 0.9);
        border: 1px solid #48484a;
        text-align: left;
        transition: background-color 0.3s ease;
    }

    table th {
        background: #ff4c60;
        color: #ffffff;
        font-weight: bold;
        text-transform: uppercase;
    }

    table tbody tr:nth-child(even) {
        background: rgba(58, 58, 94, 0.6);
    }

    table tbody tr:hover td {
        background: rgba(58, 58, 94, 0.9);
        cursor: pointer;
    }

    table td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    @media (max-width: 768px) {
        table th, table td {
            padding: 10px;
            font-size: 16px;
        }
    }
    </style>
</head>
<body>
    <header>
        <div class="logo">
            <img src="https://csgopositive.me/template_v2/img_v2/logo_v32.png" alt="CSGOPOSITIVE Logo">
        </div>
        <nav>
            <ul>
                <li><a href="player_stats.html">Рейтинги</a></li>
                <li><a href="prizes.html">Призы</a></li>
                <li><a href="servers.html">Сервера</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <table>
            <thead>
                <tr>
                    <th>Имя игрока</th>
                    <th>Убийства</th>
                    <th>Погибели</th>
                    <th>K/D</th>
                    <th>Время игры</th>
                    <th>Время включения</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Player1</td>
                    <td>150</td>
                    <td>100</td>
                    <td>1.5</td>
                    <td>12ч</td>
                    <td>Сегодня 18:00</td>
                </tr>
                <tr>
                    <td>Player2</td>
                    <td>200</td>
                    <td>80</td>
                    <td>2.5</td>
                    <td>15ч</td>
                    <td>Сегодня 17:00</td>
                </tr>
                <!-- Additional player stats can be added here -->
            </tbody>
        </table>
    </main>
    <footer>
        <div class="socials">
            <a href="https://vk.com/csgopositive_tour" class="vk"><i class="fab fa-vk"></i></a>
            <a href="https://www.youtube.com/@csgopstv" class="youtube"><i class="fab fa-youtube"></i></a>
            <a href="https://www.twitch.tv/csgopstv" class="twitch"><i class="fab fa-twitch"></i></a>
        </div>
        <p>© 2023 CSGOPOSITIVE. Все права защищены.</p>
    </footer>
</body>
</html>

improve this table look, make it not be in the bottom and not take whole screen, also make 30 what bad in this table design and what you will change. change only table