body {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    color: white;
    background-color: black;
    text-align: center;
    margin: 0;
    padding: 0;
    overflow-y: scroll; /* Always show vertical scrollbar */
    overflow-x: hidden; /* Hide horizontal scrollbar if not needed */
    background-image: url('metal.png'); /* Replace 'path-to-your-background-image.jpg' with the actual path to your image */
    background-repeat: repeat; /* Make the texture repeat to cover the entire page */
    background-size: 25%; /* You can adjust this based on your image size */
}

/* Style for the navigation bar */
.navbar {
    display: block;
    background-color: #333;
    font-weight: bold;
    font-size: 18px;
    width: 100%;
    padding: 10px 0; /* Adjusted padding to expand height dynamically */
    position: fixed;
    top: 0;
    z-index: 2;
}

/* Style for the gap div */
.gap {
    height: auto;
    min-height: 60px; /* Default space, but can grow */
    display: block;
}

.page-container {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border: 2px solid #a600d9;
    border-radius: 10px;
    margin: 3.5em auto;/* Adjust the top margin to create a gap below the nav bar */
    max-width: 1000px;
    position: relative;
}

/* Style for the gradient overlay on the left side */
.page-container::before {
    content: "";
    position: fixed;
    top: 40px; /* Set the top value to match the height of your nav bar including padding */
    left: 0;
    width: 20%; /* Adjust the width as needed */
    height: calc(100% - 40px); /* Calculate the remaining height */
    z-index: -2; /* Change this value to -2 */
     background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 20%, transparent);
    pointer-events: none;
}

/* Style for the gradient overlay on the right side */
.page-container::after {
    content: "";
    position: fixed;
    top: 40px; /* Set the top value to match the height of your nav bar including padding */
    right: 0;
    width: 20%; /* Adjust the width as needed */
    height: calc(100% - 40px); /* Calculate the remaining height */
    z-index: -2; /* Change this value to -2 */
     background: linear-gradient(to left, rgba(0, 0, 0, 0.7) 20%, transparent);
    pointer-events: none;
}


/* Style for navbar links */
.navbar a {
    color: #55ffc8;
    text-decoration: none;
    margin: 0 10px;
    width: 100%;
    font-size: 18px; /* Add this line to change the font size */
}

.navbar-container {
    text-align: center;
    padding: 0; /* Remove padding */
	
	background-color: transparent; /* Make the navbar background transparent */
    position: relative; /* Ensure the navbar stays on top */
    z-index: 1; /* Set a higher z-index to keep it above the gradients */
}

/* Style for navbar links on hover */
.navbar a:hover {
    text-decoration: underline;
}

.separator {
    color: white;
	margin: 0 5px;
}

.image-container {
    text-align: center;
}

/* Style for page titles */
.page-title {
    color: #55ffc8; /* Set the text color to white */
    font-size: 36px; /* Adjust the font size to your preference */
    font-weight: bold;
}

/* Style for subtitles */
.subtitle {
    color: #55ffc8; /* Set the text color to teal */
    font-size: 18px; /* Adjust the font size to your preference */
    /* Add any other styling you want for your subtitles */
}


.contributors ul {
    margin: 0; /* Remove the margin for the ul element */
    padding: 0; /* Remove any padding for the ul element */
}

.contributors {
    list-style-type: none;
	text-align: center;
    padding: 0;
}

.contributors ul li {
    color: #a600d9;

    text-align: center;
    font-weight: bold;
}

/* Style for contributor names */
.contributors li {
    color: #a600d9; /* Set the text color for names to purple */
    margin: 0; /* Remove margin for both top and bottom */
    text-align: center;
    font-weight: bold;
}

/* Style for contributor descriptions */
.contributors p {
    color: white; /* Set the text color for descriptions to white */
    margin-top: 0;
	/* Remove margin for both top and bottom */
}

/* Style for links (teal color) */
a.link {
    color: #55ffc8; /* Set the link text color to teal */
    text-decoration: none; /* Remove underlines from links */
}


/* Style for visited links */
a:visited {
  color: #55ffc8; /* Set the text color to teal */
  text-decoration: none; /* Remove underlines */
}

/* Style for links on mouse hover */
a:hover {
  color: #55ffc8; /* Set the text color to teal */
  text-decoration: underline; /* Add underlines on hover */
}

/* Style for active links (when clicked) */
a:active {
  color: #55ffc8; /* Set the text color to teal */
  text-decoration: none; /* Remove underlines */
}

.link-description-container {
    max-width: 500px; /* Adjust the value to your desired maximum width */
    margin: 0 auto; /* Center the container horizontally */
}



/* Style for link titles */
.link h2 a {
    color: #55ffc8; /* Set the text color to teal */
    text-decoration: none; /* Remove underlines */
    cursor: pointer; /* Add a pointer cursor on hover */
}

/* Style for link titles on hover */
.link h2 a:hover {
    text-decoration: underline; /* Add underlines on hover */
}

/* Style for link descriptions */
.link-description {
    color: white; /* Set the text color to white */
}

/* Style for unvisited links */
.link-url a:link {
    color: #55ffc8; /* Set the text color to teal */
    text-decoration: none; /* Remove underlines */
}

/* Style for visited links */
.link-url a:visited {
    color: #55ffc8; /* Set the text color to teal */
    text-decoration: none; /* Remove underlines */
}

/* Style for download links */
a.download-link {
    color: #a600d9; /* Set the text color to purple */
    text-decoration: none; /* Remove underlines */
}

/* Style for download links on hover */
a.download-link:hover {
    text-decoration: underline; /* Add underlines on hover */
}

/* CSS styles for the horizontal line */
hr {
    border: none; /* Remove the default border */
    height: 2px; /* Set the height of the line */
    background-color: #a600d9; /* Set the background color of the line */
    margin: 40px 0; /* Add margin for spacing */
}

/* Style for tournament winners */
.tournament-winner {
    color: gold; /* Set the text color to gold */
    font-weight: bold; /* Make the text bold */
}

.player-number {
    display: inline-block;
    width: 20px; /* Adjust width as needed */
    min-width: 30px; /* Ensures numbers align properly */
    text-align: right;
    color: #a600d9; /* Set color to purple */
	margin-right: 10px; 
}

.player-name {
    color: gold;
    flex-grow: 1;
    text-align: left;
    padding-right: 10px; /* Adjust spacing between name and trophy */
}

.hall-of-fame {
    text-align: center;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
}

.trophy {
    display: flex;
    flex-wrap: wrap; /* Allows only the trophies to wrap */
    justify-content: flex-start; /* Aligns trophies properly */
    gap: 4px; /* Adds spacing between trophies */
    min-width: 100px; /* Prevents excessive wrapping */
}

.trophy img {
    width: 22px; /* Adjust size dynamically */
    height: 22px;
    margin: 2px; /* Prevents images from touching each other */
}

/* Loading Gif stuff */
.lds-ellipsis {
  /* change color here */
  color: white;
}

.lds-ellipsis,
.lds-ellipsis div {
  box-sizing: border-box;
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ellipsis div {
  position: absolute;
  top: 33.33333px;
  width: 13.33333px;
  height: 13.33333px;
  border-radius: 50%;
  background: currentColor;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}



@media screen and (max-width: 768px) {
    .page-container {
        padding: 10px;
        max-width: 90%;
        border-width: 1px;
        margin: 5em auto;
    }

    .hall-of-fame {
        display: block;
        width: 100%;
    }

    .hall-of-fame table {
        width: 100%;
        display: block;
    }

    .hall-of-fame tr {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap; /* Allows trophies to wrap when necessary */
        gap: 10px; /* Provides some space between elements */
    }

    .trophy {
        justify-content: left; /* Centers trophies for better mobile layout */
        gap: 0; /* Slightly reduces spacing */
    }

    .trophy img {
        width: 20px; /* Shrinks trophies slightly for better mobile fit */
        height: 20px;
    }

    .player-number, .player-name {
        text-align: left;
        display: block;
    }

}