<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gaming Community</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <!-- Home Page -->
    <header class="hero-section">
        <div class="hero-content">
            <h1>Welcome to Gaming League</h1>
            <button class="cta-button">Join Now</button>
        </div>
    </header>

    <nav class="navigation-menu">
        <ul>
            <li><a href="#player-stats">Player Stats</a></li>
            <li><a href="#server-list">Server List</a></li>
            <li><a href="#prizes">Prizes</a></li>
        </ul>
    </nav>

    <section class="about-section">
        <h2>About Us</h2>
        <p>Welcome to our gaming community. Join us for exciting tournaments and leaderboards!</p>
    </section>

    <section class="news-updates">
        <h2>News & Updates</h2>
        <div class="news-item">Upcoming tournament this weekend!</div>
    </section>

    <!-- Player Stats Page -->
    <section id="player-stats" class="stats-page">
        <h2>Player Statistics</h2>
        <input type="text" placeholder="Search players…" class="search-bar">
        <table class="stats-table">
            <thead>
                <tr>
                    <th>Player Name</th>
                    <th>Kills</th>
                    <th>Deaths</th>
                    <th>Assists</th>
                    <th>Score</th>
                    <th>Rank</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Player1</td>
                    <td>100</td>
                    <td>50</td>
                    <td>30</td>
                    <td>1200</td>
                    <td>1</td>
                </tr>
                <!-- Add more rows as needed -->
            </tbody>
        </table>
    </section>

    <!-- Server List Page -->
    <section id="server-list" class="server-page">
        <h2>Server List</h2>
        <input type="text" placeholder="Search servers…" class="search-bar">
        <table class="server-table">
            <thead>
                <tr>
                    <th>Server Name</th>
                    <th>IP Address</th>
                    <th>Current Players</th>
                    <th>Current Map</th>
                    <th>Ping</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Server1</td>
                    <td>192.168.0.1</td>
                    <td>10/20</td>
                    <td>Map1</td>
                    <td>20ms</td>
                </tr>
                <!-- Add more rows as needed -->
            </tbody>
        </table>
    </section>

    <!-- Prizes Page -->
    <section id="prizes" class="prizes-page">
        <h2>Rewards & Prizes</h2>
        <div class="prizes-list">
            <div class="prize-item">
                <img src="prize1.png" alt="Prize 1">
                <p>Top Player of the Week</p>
            </div>
            <!-- Add more prizes as needed -->
        </div>
    </section>
</body>
</html>


css:

@font-face {
    font-family: Blueshift;
    src: url('/_next/static/chunks/src/components/icon/fonts/Blueshift.24c2cfd19eb89032.eot');
    src: url('/_next/static/chunks/src/components/icon/fonts/Blueshift.24c2cfd19eb89032.eot#iefix') format('embedded-opentype'),
         url('/_next/static/chunks/src/components/icon/fonts/Blueshift.a627995412d9c15c.ttf') format('truetype'),
         url('/_next/static/chunks/src/components/icon/fonts/Blueshift.2f54f874938b2799.woff') format('woff'),
         url('/_next/static/media/Blueshift.2875d9e9.svg#Blueshift') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

:root {
    --doppler: #0ad4f8;
    --contraband: #e4ae39;
    --covert-master: #eb4b4b;
    --classified-superior: #d32ce6;
    --restricted-exceptional: #8847ff;
    --milspec-grade: #4b69ff;
    --industrial-grade: #5e98d9;
    --consumer-grade: #b0c3d9;
    --souvenir: gold;
    --stattrack: #cf6a31;
    --star-stattrack: #8650ac;
    --normal: #b2b2b2;
    --battle-scarred: #fd3e2e;
    --well-worn: #fd8029;
    --field-tested: #e5bf2a;
    --minimal-wear: #76b520;
    --factory-new: #1bafc3;
    --weapon: #f15840;
    --misc: #35a3f1;
    --clothing: #a7ec2e;
    --armor: #a7ec2e;
    --resource: #ddd;
    --background: #121319;
    --primary: #1f222b;
    --primary-hover: #2d313e;
    --accent: #0bf894;
    --neutral-200: #e6e6e6;
    --neutral-300: #c1c1c1;
    --secondary-75: hsla(0,0%,56%,.75);
}

body {
    font-family: 'Blueshift', sans-serif;
    background-color: var(--background);
    color: var(--neutral-200);
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.hero-section {
    background-image: url('banner.jpg'); 
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    color: var(--neutral-200);
}

.hero-content h1 {
    font-size: 2.5em;
}

.cta-button {
    background-color: var(--accent);
    color: var(--background);
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    font-size: 1em;
    margin-top: 20px;
}

.cta-button:hover {
    background-color: var(--primary-hover);
}

.navigation-menu ul {
    display: flex;
    justify-content: center;
    list-style: none;
    background-color: var(--primary);
    padding: 10px;
    margin: 0;
}

.navigation-menu a {
    color: var(--neutral-200);
    text-decoration: none;
    padding: 10px 20px;
}

.navigation-menu a:hover {
    background-color: var(--primary-hover);
}

.about-section {
    padding: 20px;
    text-align: center;
}

.news-updates {
    padding: 20px;
    background-color: var(--primary);
    text-align: center;
}

.news-item {
    background-color: var(--primary-hover);
    padding: 10px;
    margin-top: 10px;
}

.stats-page, .server-page, .prizes-page {
    padding: 20px;
}

.search-bar {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    background-color: var(--background);
    color: var(--neutral-200);
    border: 1px solid var(--neutral-300);
    outline: none;
}

.search-bar::placeholder {
    color: var(--neutral-300);
}

.stats-table, .server-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--primary);
}

.stats-table th, .server-table th {
    background-color: var(--primary-hover);
    padding: 10px;
}

.stats-table td, .server-table td {
    padding: 10px;
    border-bottom: 1px solid var(--primary-hover);
}

.stats-table tr:hover, .server-table tr:hover {
    background-color: var(--primary-hover-50);
}

.prizes-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.prize-item {
    background-color: var(--primary);
    margin: 10px;
    padding: 10px;
    text-align: center;
    color: var(--neutral-200);
}

.prize-item img {
    max-width: 100%;
    height: auto;
}

Improve my website, i like colors but i dont like tables at all, they are ugly as fuck