.avatar_frame {
  position: absolute !important;
  transform: scale(1.18);
  border-radius: 0 !important;
  z-index: 2;
  box-shadow: none !important;
  outline: none !important;
}

.avatar_frame_small {
  width: 26px !important;
  height: 26px !important;
  position: absolute !important;
  transform: scale(1.18);
  border-radius: 0 !important;
  z-index: 2;
  box-shadow: none !important;
  outline: none !important;
}

.top_players_head {
  padding: 17px 20px;
  display: grid;
  grid-template-columns: 0.2fr 0.2fr 0.6fr 0.3fr 0.3fr 0.3fr 0.3fr 0.2fr 0.3fr 0.5fr 0.5fr;
  justify-items: start;
  background: var(--input-form);
  margin-bottom: 10px;
  border-radius: 12px;
}

.top_players_head span {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--text-custom);
  opacity: 0.5;
  display: flex;
  align-items: center;
}

.top_players_head svg {
  width: 14px;
  height: 14px;
  fill: var(--text-custom);
}

.top_players_list_body li {
  background: var(--bg-table);
  border-radius: 12px;
  display: grid;
  grid-template-columns: 0.2fr 0.2fr 0.6fr 0.3fr 0.3fr 0.3fr 0.3fr 0.2fr 0.3fr 0.5fr 0.5fr;
  padding: 20px;
  transition: 0.3s;
  position: relative;
  justify-items: start;
  align-items: center;
}

.top_players_list_body li:not(:last-child) {
  margin-bottom: 3px;
}

.top_players_list_body li span {
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  color: var(--text-custom);
  z-index: 2;
  position: relative;
}

.top_players_rank {
  width: 64px;
  height: auto;
}

.top_players_avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 4px;
  outline: 2px solid var(--transparent);
  position: relative;
}

.user_online_status {
  position: relative;
  display: none;
}

.user_online_status::before {
  content: "";
  position: absolute;
  left: -26px;
  bottom: -13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.top_player_top:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 262px;
  z-index: 0;
  border-radius: 4px;
}

li.pointer.player_top_login {
  background: linear-gradient(-270deg, var(--span-low), transparent);
  margin-bottom: 5px;
  border: 1px solid var(--span-low);
}

span.selected {
  color: var(--span);
  opacity: 1;
  font-weight: 700;
}

.hvr:hover {
  opacity: 1;
}

.top_list_scroll {
  height: 571px;
  overflow: hidden;
  overflow-y: scroll;
  margin-bottom: 5px;
}

.no-scrollbar {
  scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.servers_wrap {
  flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
  margin-bottom: -5px;
}

.servers_button {
  padding: 12px 18px;
  transition: 0.3s;
  margin-right: 6px;
  margin-bottom: 7px;
  color: var(--text-custom);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  border-radius: 4px;
  background: var(--button);
  cursor: pointer;
}

.servers_button:hover {
  color: var(--span);
  background: var(--button-hover);
}

.server_buttons_active {
  color: var(--span);
  background: var(--button);
}

@media (min-width: 769px) and (max-width: 1500px) {
  .top_players_head {
    grid-template-columns: 0.2fr 0.2fr 0.6fr 0.3fr 0.3fr 0.3fr 0.3fr 0.2fr 0.3fr;
  }

  .top_players_list_body li {
    grid-template-columns: 0.2fr 0.2fr 0.6fr 0.3fr 0.3fr 0.3fr 0.3fr 0.2fr 0.3fr;
    position: relative;
  }

  span.col_11,
  span.col_10 {
    display: none;
  }

  .top_players_list_body li .col_11,
  .top_players_list_body li .col_10 {
    display: none;
  }
}

@media (max-width: 768px) {
  .top_players_head {
    grid-template-columns: 0.2fr 0.6fr 0.3fr 0.3fr;
  }

  .top_players_list_body li {
    grid-template-columns: 0.2fr 0.6fr 0.3fr 0.3fr;
  }

  span.col_11,
  span.col_10,
  span.col_9,
  span.col_8,
  span.col_7,
  span.col_6,
  span.col_2 {
    display: none;
  }

  .top_players_list_body li .col_11,
  .top_players_list_body li .col_10,
  .top_players_list_body li .col_9,
  .top_players_list_body li .col_8,
  .top_players_list_body li .col_7,
  .top_players_list_body li .col_6,
  .top_players_list_body li .col_2 {
    display: none;
  }
}

/* -------------------- NEW ---------------------- */

.top_block_header {
  display: flex;
  position: relative;
  height: max-content;
  padding: 36px 30px;
  font-family: "Unbounded";
  font-size: 24px;
  font-weight: 700;
  color: var(--text-custom);
}
@media (max-width: 768.9px) {
  .top_block_header:before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    background-image: url("/../app/modules/module_page_leaderboard/assets/img/agent_top.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    height: 92%;
    width: 61%;
    z-index: 2;
    pointer-events: none;
  }
}
@media (min-width: 769px) {
  .top_block_header:before {
    content: "";
    position: absolute;
    right: -12px;
    bottom: 0;
    background-image: url("/../app/modules/module_page_leaderboard/assets/img/agent_top.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    height: 101%;
    width: 66%;
    z-index: 2;
    pointer-events: none;
  }
}

.top_block_header:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(
    to left bottom,
    var(--text-custom),
    transparent
  );
  z-index: 0;
  border-radius: 16px;
  opacity: 0.2;
}

.top_block_header span {
  font-size: 14px;
  font-weight: 500;
  font-family: "SF Pro Display", sans-serif;
}

.top_block_content {
  display: flex;
  width: 100%;
  height: max-content;
  background: var(--card);
  border-radius: 16px;
  cursor: pointer;
  flex-direction: column;
  padding: 20px;
  gap: 15px;
}

.header_top-block-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  z-index: 1;
}

.users_data {
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.users_data img {
  height: 46px;
  width: 46px;
  border-radius: 4px;
  outline: 3px solid var(--transparent);
}

.place_image {
  width: auto;
  height: 46px;
}

.bottom-block-content img {
  width: 100px;
  height: auto;
}

.bottom-block-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  z-index: 1;
}

.rating_value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 14px;
  font-weight: 600;
}

.users_nickname {
  font-size: 18px;
  font-weight: 700;
  font-family: "Unbounded";
  max-width: 190px;
  text-overflow: ellipsis;
  overflow: hidden;
  text-wrap: nowrap;
}

.users_top_place {
  font-size: 13px;
  font-weight: 700;
}

.rang_title,
.rang_value {
  color: var(--text-custom);
}

.users_top_place1 {
  color: var(--top-one);
}

.users_top_place2 {
  color: var(--top-two);
}

.users_top_place3 {
  color: var(--top-three);
}

.users_place_nickname {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.back_top1,
.back_top2,
.back_top3 {
  position: relative;
}

.back_top1::before,
.back_top2::before,
.back_top3::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
  border-radius: 16px;
  opacity: 0.15;
}

.back_top1::before {
  background-image: linear-gradient(
    to left bottom,
    var(--top-one),
    transparent
  );
}

.back_top2::before {
  background-image: linear-gradient(
    to left bottom,
    var(--top-two),
    transparent
  );
}

.back_top3::before {
  background-image: linear-gradient(
    to left bottom,
    var(--top-three),
    transparent
  );
}

.top_three_block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 5px 0;
}

based on this css improve by website, do not copy whole css.

my site:

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
    
    :root {
    --main-bg: #0d0d1a;
    --header-bg: #1c1c2e;
    --text-color: #e0e0e0;
    --accent-color: #ff4c60;
    --accent-color-hover: #e03b50;
    --card-bg: #1c1c2e;
    --table-bg: rgba(28, 28, 46, 0.9);
    --table-row-hover-bg: rgba(58, 58, 94, 0.9);
    --navbar-shadow: 0px 4px 12px rgba(0, 0, 0, 0.7);
    --box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    --btn-bg: #ff4c60;
    --btn-hover-bg: #e03b50;
    --btn-active-bg: #c03a4d;
    --footer-shadow: 0 -4px 12px rgba(0, 0, 0, 0.7);
}

body {
    background-color: var(--main-bg);
    color: var(--text-color);
    font-family: ‘Montserrat’, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    overflow-x: hidden;
}

header {
    background-color: var(--header-bg);
    padding: 1rem 1rem;
    box-shadow: var(--navbar-shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}

header .navbar-brand img {
    height: 50px;
    width: auto;
    max-height: 100%;
}

.header__profile-avatar,
.nav-item {
    display: flex;
    align-items: center;
}

.navbar-toggler {
    border: none;
    background: transparent;
}

.navbar-toggler-icon {
    background-color: var(--accent-color);
    border-radius: 5px;
    height: 3px;
    width: 20px;
}

.navbar-toggler:hover .navbar-toggler-icon {
    opacity: 1;
}

.navbar-nav .nav-link {
    color: var(--text-color);
    margin: 0 0.5rem;
    transition: color 0.3s ease-in-out;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: var(--accent-color);
    font-weight: bold;
}

.intro {
    text-align: center;
    background: rgba(28, 28, 46, 0.9);
    padding: 3rem;
    border-radius: 15px;
    box-shadow: var(--box-shadow);
    max-width: 800px;
    margin: 2rem auto;
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.intro h1 {
    color: var(--accent-color);
    font-size: 3rem;
    margin-bottom: 1.25rem;
}

.intro p {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.btn-primary {
    background-color: var(--btn-bg);
    font-weight: 700;
    border: none;
    padding: 0.75rem 1.5rem;
    transition: background-color 0.3s ease-in-out;
}

.btn-primary:hover {
    background-color: var(--btn-hover-bg);
}

.table-responsive {
    margin: 2rem 0;
}

.top_player_top {
    border-radius: 12px;
    overflow: hidden;
}

table {
    background: var(--table-bg);
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

table th, table td {
    padding: 1.25rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

thead th {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-color-hover));
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 2px solid var(--main-bg);
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

tbody tr {
    transition: background 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

tbody tr:nth-child(even) {
    background: linear-gradient(135deg, rgba(28, 28, 46, 0.8), rgba(38, 38, 56, 0.8));
}

tbody tr:hover {
    background: var(--table-row-hover-bg);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

tbody td {
    color: var(--text-color);
}

footer {
    background-color: var(--header-bg);
    padding: 2rem 1rem;
    box-shadow: var(--footer-shadow);
    margin-top: auto;
    color: var(--text-color);
}

footer .socials a {
    color: var(--accent-color);
    text-decoration: none;
    font-size: 1.5rem;
    transition: transform 0.3s ease;
    margin: 0 0.5rem;
}

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

@media (max-width: 768px) {
    footer .socials a {
        font-size: 1.25rem;
    }
}

@media (max-width: 576px) {
    .intro {
        padding: 1.5rem;
    }

    .intro h1 {
        font-size: 2rem;
    }

    table {
        font-size: 0.875rem;
    }

    header {
        padding: 0.5rem;
    }

    .navbar-nav {
        text-align: center;
    }
}

</style>
</head>
<body class="d-flex flex-column min-vh-100">

<!-- HEADER -->
<header>
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="https://csgopositive.me/template_v2/img_v2/logo_v32.png" alt="CSGOPOSITIVE Logo">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="player_stats.html">Рейтинги</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="prizes.html">Призы</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="servers.html">Сервера</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

<!-- MAIN CONTENT -->
<main class="flex-grow-1">
    <div class="container">
        <!-- INTRO SECTION -->
        <div class="intro text-center my-4">
            <h1>Рейтинги Игроков</h1>
            <p>Следите за лучшими игроками в игре!</p>
            <button class="btn btn-primary">Узнать больше</button>
        </div>

        <!-- TABLE SECTION -->
        <div class="table-responsive top_player_top">
            <table class="table table-dark table-hover">
                <thead>
                    <tr>
                        <th scope="col">Имя игрока</th>
                        <th scope="col">Убийства</th>
                        <th scope="col">Погибели</th>
                        <th scope="col">K/D</th>
                        <th scope="col">Время игры</th>
                        <th scope="col">Время включения</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Player1</td>
                        <td>150</td>
                        <td>100</td>
                        <td>1.5</td>
                        <td title="12 часов">12ч</td>
                        <td title="Сегодня в 18:00">Сегодня 18:00</td>
                    </tr>
                    <tr>
                        <td>Player2</td>
                        <td>200</td>
                        <td>80</td>
                        <td>2.5</td>
                        <td title="15 часов">15ч</td>
                        <td title="Сегодня в 17:00">Сегодня 17:00</td>
                    </tr>
                    <!-- Additional player stats can be added here -->
                </tbody>
            </table>
        </div>
    </div>
</main>

<!-- FOOTER -->
<footer class="text-center">
    <div class="socials mb-3">
        <a href="https://vk.com/csgopositive_tour"><i class="fab fa-vk"></i></a>
        <a href="https://www.youtube.com/@csgopstv"><i class="fab fa-youtube"></i></a>
        <a href="https://www.twitch.tv/csgopstv"><i class="fab fa-twitch"></i></a>
    </div>
    <p>© 2023 CSGOPOSITIVE. Все права защищены.</p>
</footer>

<!-- SCRIPTS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>