* {
    --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
}

.blueshift_blueshift__z9t7q,.blueshift_blueshift__z9t7q * {
    --fail-active: #b60700;
    --fail: #f70b02;
    --fail-50: rgba(247,11,2,.5);
    --fail-30: rgba(247,11,2,.3);
    --fail-10: rgba(247,11,2,.1);
    --warning-active: #c7a800;
    --warning: gold;
    --warning-50: rgba(255,215,0,.5);
    --warning-30: rgba(255,215,0,.3);
    --warning-10: rgba(255,215,0,.1);
    --accent-active: #0ce287;
    --accent: #0bf894;
    --accent-50: rgba(11,248,148,.5);
    --accent-30: rgba(11,248,148,.3);
    --accent-20: rgba(11,248,148,.2);
    --accent-10: rgba(11,248,148,.1);
    --accent-dynamic: rgba(11,248,148,.6);
    --success-active: #26fc34;
    --success: #02f714;
    --success-50: rgba(2,247,20,.5);
    --success-30: rgba(2,247,20,.3);
    --success-10: rgba(2,247,20,.1);
    --white: #fff;
    --white-20: hsla(0,0%,100%,.2);
    --white-50: hsla(0,0%,100%,.5);
    --white-80: hsla(0,0%,100%,.8);
    --white-dynamic: hsla(0,0%,100%,.6);
    --black: #000;
    --black-20: rgba(0,0,0,.2);
    --black-25: rgba(0,0,0,.25);
    --black-30: rgba(0,0,0,.3);
    --black-50: rgba(0,0,0,.5);
    --black-60: rgba(0,0,0,.6);
    --black-80: rgba(0,0,0,.8);
    --secondary: #909090;
    --secondary-75: hsla(0,0%,56%,.75);
    --secondary-60: hsla(0,0%,56%,.6);
    --secondary-50: hsla(0,0%,56%,.5);
    --secondary-30: hsla(0,0%,56%,.3);
    --secondary-20: hsla(0,0%,56%,.2);
    --secondary-dynamic: hsla(0,0%,56%,.6);
    --primary-hover: #2d313e;
    --primary-hover-50: rgba(45,49,62,.5);
    --primary: #1f222b;
    --primary-50: rgba(31,34,43,.5);
    --base: #17191f;
    --base-80: rgba(23,25,31,.8);
    --base-50: rgba(23,25,31,.5);
    --base-1: rgba(23,25,31,.01);
    --background: #121319;
    --background-50: rgba(18,19,25,.5);
    --background-1: rgba(18,19,25,.01);
    --bronze: #ceaf7e;
    --silver: #b6b6b6;
    --gold: #c9a634;
    --diamond: #4dd6f8;
    --sapphire: #4c66ff;
    --ruby: #eb4c4b;
    --emerald: #00ce52;
    --accent-background: #154032;
    --accent-background-90: rgba(21,64,50,.9);
    --accent-background-30: rgba(21,64,50,.3);
    --accent-900: #041c14;
    --accent-800: #083829;
    --accent-700: #067445;
    --accent-700-50: rgba(6,116,69,.5);
    --accent-600: #00c370;
    --accent-500: #00ff93;
    --accent-500-50: rgba(0,255,147,.5);
    --accent-500-20: rgba(0,255,147,.2);
    --neutral-200: #e6e6e6;
    --neutral-300: #c1c1c1;
    --neutral-400: #909090;
    --neutral-500: #686868;
    --neutral-600: #494949;
    --neutral-700: #333;
    --neutral-900-50: rgba(0,0,0,.5);
    --fail-500: #f70b02;
    --fail-600: #b60700;
    --fail-700: #620906;
    --fail-800: #3f0b09;
    --warning-500: #f5cf01;
    --warning-600: #c7a800;
    --warning-700: #6c5b06;
    --warning-800: #453b09;
    --success-500: #02f714;
    --success-600: #00b90e;
    --success-700: #06640d;
    --success-800: #09400d
}

.decay_decay__RgWZo,.decay_decay__RgWZo * {
    --fail-active: #b60700;
    --fail: #f70b02;
    --fail-50: rgba(247,11,2,.5);
    --fail-30: rgba(247,11,2,.3);
    --fail-10: rgba(247,11,2,.1);
    --warning-active: #c7a800;
    --warning: gold;
    --warning-50: rgba(255,215,0,.5);
    --warning-30: rgba(255,215,0,.3);
    --warning-10: rgba(255,215,0,.1);
    --accent-active: #b03a28;
    --accent: #cd412b;
    --accent-50: rgba(205,65,43,.5);
    --accent-30: rgba(205,65,43,.3);
    --accent-20: rgba(205,65,43,.2);
    --accent-10: rgba(205,65,43,.1);
    --accent-dynamic: rgba(205,65,43,.6);
    --success-active: #26fc34;
    --success: #02f714;
    --success-50: rgba(2,247,20,.5);
    --success-30: rgba(2,247,20,.3);
    --success-10: rgba(2,247,20,.1);
    --white: #fff;
    --white-20: hsla(0,0%,100%,.2);
    --white-50: hsla(0,0%,100%,.5);
    --white-80: hsla(0,0%,100%,.8);
    --white-dynamic: hsla(0,0%,100%,.6);
    --black: #000;
    --black-20: rgba(0,0,0,.2);
    --black-25: rgba(0,0,0,.25);
    --black-30: rgba(0,0,0,.3);
    --black-50: rgba(0,0,0,.5);
    --black-60: rgba(0,0,0,.6);
    --black-80: rgba(0,0,0,.8);
    --secondary: #909090;
    --secondary-75: hsla(0,0%,56%,.75);
    --secondary-60: hsla(0,0%,56%,.6);
    --secondary-50: hsla(0,0%,56%,.5);
    --secondary-30: hsla(0,0%,56%,.3);
    --secondary-20: hsla(0,0%,56%,.2);
    --secondary-dynamic: hsla(0,0%,56%,.6);
    --primary-hover: #2d313e;
    --primary-hover-50: rgba(45,49,62,.5);
    --primary: #1f222b;
    --primary-50: rgba(31,34,43,.5);
    --base: #17191f;
    --base-80: rgba(23,25,31,.8);
    --base-50: rgba(23,25,31,.5);
    --base-1: rgba(23,25,31,.01);
    --background: #121319;
    --background-50: rgba(18,19,25,.5);
    --background-1: rgba(18,19,25,.01);
    --bronze: #ceaf7e;
    --silver: #b6b6b6;
    --gold: #c9a634;
    --diamond: #4dd6f8;
    --sapphire: #4c66ff;
    --ruby: #eb4c4b;
    --emerald: #00ce52;
    --accent-background: #59190f;
    --accent-background-90: rgba(89,25,15,.9);
    --accent-background-30: rgba(89,25,15,.3);
    --accent-900: #2f1613;
    --accent-800: #532b24;
    --accent-700: #7d3a30;
    --accent-700-50: rgba(125,58,48,.5);
    --accent-600: #a84334;
    --accent-500: #cd412b;
    --accent-500-50: rgba(205,65,43,.5);
    --accent-500-20: rgba(205,65,43,.2);
    --neutral-200: #e6e6e6;
    --neutral-300: #c1c1c1;
    --neutral-400: #909090;
    --neutral-500: #686868;
    --neutral-600: #494949;
    --neutral-700: #333;
    --neutral-900-50: rgba(0,0,0,.5);
    --fail-500: #f70b02;
    --fail-600: #b60700;
    --fail-700: #620906;
    --fail-800: #3f0b09;
    --warning-500: #f5cf01;
    --warning-600: #c7a800;
    --warning-700: #6c5b06;
    --warning-800: #453b09;
    --success-500: #02f714;
    --success-600: #00b90e;
    --success-700: #06640d;
    --success-800: #09400d
}

.ruby_ruby__GiFfa,.ruby_ruby__GiFfa * {
    --fail-active: #b60700;
    --fail: #f70b02;
    --fail-50: rgba(247,11,2,.5);
    --fail-30: rgba(247,11,2,.3);
    --fail-10: rgba(247,11,2,.1);
    --warning-active: #c7a800;
    --warning: gold;
    --warning-50: rgba(255,215,0,.5);
    --warning-30: rgba(255,215,0,.3);
    --warning-10: rgba(255,215,0,.1);
    --accent-active: #b6395d;
    --accent: #dc4671;
    --accent-50: rgba(220,70,113,.5);
    --accent-30: rgba(220,70,113,.3);
    --accent-20: rgba(220,70,113,.2);
    --accent-10: rgba(220,70,113,.1);
    --accent-dynamic: rgba(220,70,113,.6);
    --success-active: #26fc34;
    --success: #02f714;
    --success-50: rgba(2,247,20,.5);
    --success-30: rgba(2,247,20,.3);
    --success-10: rgba(2,247,20,.1);
    --white: #fff;
    --white-20: hsla(0,0%,100%,.2);
    --white-50: hsla(0,0%,100%,.5);
    --white-80: hsla(0,0%,100%,.8);
    --white-dynamic: hsla(0,0%,100%,.6);
    --black: #000;
    --black-20: rgba(0,0,0,.2);
    --black-25: rgba(0,0,0,.25);
    --black-30: rgba(0,0,0,.3);
    --black-50: rgba(0,0,0,.5);
    --black-60: rgba(0,0,0,.6);
    --black-80: rgba(0,0,0,.8);
    --secondary: #909090;
    --secondary-75: hsla(0,0%,56%,.75);
    --secondary-60: hsla(0,0%,56%,.6);
    --secondary-50: hsla(0,0%,56%,.5);
    --secondary-30: hsla(0,0%,56%,.3);
    --secondary-20: hsla(0,0%,56%,.2);
    --secondary-dynamic: hsla(0,0%,56%,.6);
    --primary-hover: #2d313e;
    --primary-hover-50: rgba(45,49,62,.5);
    --primary: #1f222b;
    --primary-50: rgba(31,34,43,.5);
    --base: #17191f;
    --base-80: rgba(23,25,31,.8);
    --base-50: rgba(23,25,31,.5);
    --base-1: rgba(23,25,31,.01);
    --background: #121319;
    --background-50: rgba(18,19,25,.5);
    --background-1: rgba(18,19,25,.01);
    --bronze: #ceaf7e;
    --silver: #b6b6b6;
    --gold: #c9a634;
    --diamond: #4dd6f8;
    --sapphire: #4c66ff;
    --ruby: #eb4c4b;
    --emerald: #00ce52;
    --accent-background: #262169;
    --accent-background-90: rgba(38,33,105,.9);
    --accent-background-30: rgba(38,33,105,.3);
    --accent-900: #3f0415;
    --accent-800: #4b1827;
    --accent-700: #70243a;
    --accent-700-50: rgba(112,36,58,.5);
    --accent-600: #8e2c49;
    --accent-500: #dc4671;
    --accent-500-50: rgba(220,70,113,.5);
    --accent-500-20: rgba(220,70,113,.2);
    --neutral-200: #e6e6e6;
    --neutral-300: #c1c1c1;
    --neutral-400: #909090;
    --neutral-500: #686868;
    --neutral-600: #494949;
    --neutral-700: #333;
    --neutral-900-50: rgba(0,0,0,.5);
    --fail-500: #f70b02;
    --fail-600: #b60700;
    --fail-700: #620906;
    --fail-800: #3f0b09;
    --warning-500: #f5cf01;
    --warning-600: #c7a800;
    --warning-700: #6c5b06;
    --warning-800: #453b09;
    --success-500: #02f714;
    --success-600: #00b90e;
    --success-700: #06640d;
    --success-800: #09400d
}

@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
}

based on this css colors

Objective: Create a modern, sophisticated website for a gaming community or league. The design should be reminiscent of contemporary web aesthetics—to cater to gamers who prefer a visually engaging and user-friendly interface. The website should avoid simplistic or outdated designs (e.g., those akin to 1990s web layouts). Below are the detailed features and pages needed for the website:

1. Home Page:

- Hero Section: A visually striking banner featuring high-quality graphics from popular games. This section should also include a call-to-action button such as “Join Now” or “View Leaderboards.”
- Navigation Menu: Easy-to-access links to all key sections of the site (e.g., Player Stats, Server List, Prizes).
- About Section: A brief description of the gaming community or league, maybe a few testimonials or a short introductory video.
- News/Updates Section: A dynamic area for posting news, updates, and announcements about upcoming tournaments or changes.

2. Player Stats Page:

- Title: “Player Statistics”
- Filters/Search Bar: Allow users to search and filter players by name, team, or other statistics.
- Stats Table:
- Columns: Player Name, Kills, Deaths, Assists, Score, Rank, and other relevant stats.
- Sortable and interactive, allowing users to sort based on any column.
- Each row to include an avatar or player image.
- Player Profile Page: Clicking on a player’s name from the table should lead to a detailed profile page featuring an expanded view of their stats, recent match history, and any player achievements or badges.

3. Server List Page:

- Title: “Server List”
- Search/Filter Options: Ability to search for servers by name or filter by criteria (e.g., region, player count, map).
- Server Table:
- Columns: Server Name, IP Address, Current Players/Max Players, Current Map, Ping.
- Rows should highlight the server’s status (e.g., online/offline) with an indicator.
- Option to copy the IP address directly from the table for easy access.
- Server Details Page: Clicking on a server name should show more detailed information such as server rules, current player list, and scheduled events.

4. Prizes Page:

- Title: “Rewards & Prizes”
- Top Section: Highlight the importance and prestige of achieving top rankings.
- Prizes List:
- A section dedicated to each prize.
- Include high-quality images of the prizes.
- Detailed descriptions of what each prize entails.
- Information on how top players are determined (e.g., weekly, monthly, tournament-based).

Design Specifications:

- Theme: Modern, elegant dark or grey theme. Use a sophisticated color palette with high contrast for readability.
- Typography: Clean and readable fonts, with emphasis on headers and important text sections.
- Visuals: Utilize high-quality, modern graphics and icons. Include subtle animations for interactive elements like hover effects on buttons and menus.
- Responsiveness: Ensure the website is fully responsive and performs well on various devices including desktops, tablets, and mobile phones.
- User Experience: Focus on intuitive navigation and ease of access to all parts of the website.