.header {
    background-image: url('crbanner.png');
    background-size: contain; /* Ensures the image covers the entire header */
    background-position: center; /* Centers the image horizontally and vertically */
    background-repeat: no-repeat;
    height: 250px; /* Adjust the height of the header as needed */
}

.header-details {
    background-image: url('crbanner.png');
    background-size: contain; /* Ensures the image covers the entire header */
    background-position: center; /* Centers the image horizontally and vertically */
    background-repeat: no-repeat;
    height: 200px; /* Adjust the height of the header as needed */
}

.header-link {
    display: block; /* Make the anchor tag a block element to fill the entire header */
}

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

body {
    background-color: #121212; /* Dark background */
    color: #E0E0E0; /* Light text for contrast */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.player-details {
    background-color: #1E1E1E; /* Slightly lighter dark for the player details box */
    border: 1px solid #333; /* Subtle border */
    padding: 20px;
    margin: 20px auto;
    max-width: 600px; /* Adjust based on preference */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Soft shadow for depth */
}

.player-details img {
    border-radius: 50%; /* Circular avatar */
    border: 2px solid #4CAF50; /* Accent color border */
}

.player-details h1, .player-details h2 {
    margin-bottom: 20px;
}

h1 {
    color: #4CAF50; /* Accent color for the main title */
}

h2 {
    color: #BB86FC; /* Secondary accent color */
    font-size: 1.2em;
}

ul {
    list-style: none;
}

ul li {
    background-color: #252525; /* List item background */
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    border-left: 4px solid #BB86FC; /* Accent color list item border */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .player-details {
        padding: 15px;
        margin: 10px;
        max-width: 90%;
    }
}

.player-box {
    background-color: #1E1E1E; /* Slightly lighter dark for the player box */
    border: 1px solid #333; /* Subtle border */
    padding: 20px;
    margin: 10px auto;
    max-width: 600px; /* Adjust based on preference */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Soft shadow for depth */
    display: flex; /* Use flexbox */
    align-items: center; /* Center vertically */
}

.player-avatar {
    margin-right: 15px; /* Space between avatar and player info */
}

.player-info {
    display: flex;
    flex-direction: column;
}

.player-name {
    font-weight: bold;
    color: #BB86FC; /* Adjust the color as needed */
    margin-bottom: 5px; /* Space between name and rank */
}

.player-rank {
    font-size: 0.9em; /* Smaller font size for rank */
    color: #E0E0E0; /* Adjust the color as needed */
    margin-bottom: 5px; /* Space between rank and stats */
}

.player-stats {
    font-size: 0.8em; /* Smaller font size for stats */
    color: #E0E0E0; /* Adjust the color as needed */
    margin-left: auto; /* Move player stats to the right */
}

.player-box img {
    border-radius: 50%; /* Circular avatar */
    border: 2px solid #4CAF50; /* Accent color border */
    margin-right: 10px; /* Add margin to the right of the image */
}


/* Style for the container holding the hyperlinks */
.link-container {
    text-align: center; /* Center the container horizontally */
    margin-bottom: 10px; /* Add margin below the container */
}

/* Style for the hyperlinks */
.link {
    font-size: 16px; /* Adjust the font size */
    color: #BB86FC; /* Adjust the text color */
    text-decoration: none; /* Remove underline */
    margin: 0 10px; /* Add margin between the hyperlinks */
}

/* Additional styling for hover effect */
.link:hover {
    text-decoration: underline; /* Add underline on hover */
    opacity: 0.8; /* Adjust the opacity on hover */
}


.search-container {
    text-align: center;
    margin-top: 20px;
}

#searchInput {
    padding: 8px; /* Adjust padding as needed */
    font-size: 14px; /* Adjust font size as needed */
    border-radius: 5px;
    border: 1px solid #BB86FC; /* Accent color */
    background-color: #252525; /* Dark background */
    color: #E0E0E0; /* Light text */
    width: 80%; /* Adjust width as needed */
    max-width: 300px; /* Set maximum width */
    margin-bottom: 10px; /* Adjust margin as needed */
}

.search-container input[type="text"] {
    padding: 8px; /* Adjust padding as needed */
    font-size: 14px; /* Adjust font size as needed */
    border-radius: 5px;
    border: 1px solid #BB86FC; /* Accent color */
    background-color: #252525; /* Dark background */
    color: #E0E0E0; /* Light text */
    width: 80%; /* Adjust width as needed */
    max-width: 300px; /* Set maximum width */
    margin-bottom: 10px; /* Adjust margin as needed */
}

/* Adjust hyperlink font color for player names */
#playerList a,
.link {
    color: #BB86FC; /* Set hyperlink font color to BB86FC */
    text-decoration: none; /* Remove underline */
}

/* Adjust hover effect for hyperlinks */
#playerList a:hover,
.link:hover {
    text-decoration: underline; /* Add underline on hover */
}

/* Style return link within player-details */
#playerDetails .return-link {
    color: #BB86FC; /* Set hyperlink font color to BB86FC */
    text-decoration: none; /* Remove underline */
}

/* Adjust hover effect for return link */
#playerDetails .return-link:hover {
    text-decoration: underline; /* Add underline on hover */
}






/* Weekly Caps content styles */
.weekly-citadel-container {
    text-align: center;
}

.weekly-citadel-heading {
    font-size: 24px;
    margin-bottom: 10px;
}

.weekly-citadel-description {
    font-size: 18px;
}

/* CSS styles for time display */
.time-container {
    text-align: center;
}

.week-start,
.week-end {
    display: inline-block;
    vertical-align: top;
    margin: 0 10px;
}

.week-label {
    font-weight: bold;
    margin-bottom: 5px;
}

.week-time {
    margin-bottom: 15px;
}

/* Caps list styles */
.container-caps {
    display: flex;
    justify-content: center; /* Center the content horizontally */
}

.weekly-citadel-container {
    background-color: #1E1E1E;
    border: 1px solid #333;
    padding: 20px;
    margin: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    max-width: 600px;
}

.weekly-citadel-heading {
    color: #BB86FC;
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.player-list-container {
    list-style: none;
    padding: 0;
    margin: 0; 
}

.player-item-container {
    font-size: 16px;
    color: #E0E0E0;
    margin-bottom: 5px;
}

.capped-list {
    order: 1; /* Position on the left */
}

.non-capped-list {
    order: 2; /* Position in the center */
}

.private-profiles-list {
    order: 3; /* Position on the right */
}