html, body {
    font-family: monospace;
    max-width: 100%;
    background-color: #161616;
    padding: 10px;
    color: #fff;
    }
    #list{
        color: white;
        font-size: 1.17rem;
        list-style-type: decimal;
    }

    #maxelolist{
        color: white;
        font-size: 1.17rem;
        list-style-type: decimal;
    }

    #player-list{
        list-style-type: katakana;
        font-size: 1.17rem;
    }
 
    button {
        display: inline-block;
        padding: 5px 10px;
        font-size: 12px;
        font-weight: bold;
        color: #fff;
        text-transform: uppercase;
        background-color: transparent;
        border: 2px solid rgba(227, 35, 17, 0.8);
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    button:hover {
        background-color: rgba(227, 35, 17, 0.8);
    }

    /* Button container */
    #buttons {
        margin-top: 5px;
        text-align: right;
    }

    label {
        display: block; /* Ensures label is displayed on a new line */
        margin-bottom: 5px; /* Adds some space between label and select element */
        font-weight: bold; /* Makes the label text bold */
        }

    /* Style for the select element */
    #prey-select {
        width: auto; /* Adjust the width as needed */
        padding: 4px; /* Adds padding inside the select box */
        font-size: 14px; /* Sets the font size */
        border: 1px solid #ccc; /* Adds a border */
        background-color: #161616;
        color: white;
        border-radius: 1px; /* Rounds the corners of the select box */
    }

    /* Style for select element when focused */
    #prey-select:focus {
        outline: none; /* Removes the default focus outline */
        border-color:rgba(227, 35, 17, 0.8); /* Changes the border color when the select element is focused */
    }
    #prey-select option {
    padding: 1px; /* Adds padding to the options */
    font-size: 16px; /* Sets the font size of the options */
    }

    /* Style for the selected option */
    #prey-select option:checked {
        background-color:rgba(227, 35, 17, 0.8); /* Changes the background color of the selected option */
    }
    .container {
        max-height: 100vh;
        width: auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        }
        @media (max-width: 767px) {
        .container {
            flex-direction: column; /* Stack the divs vertically */
            align-items: center; /* Center align the divs */
        }}
/* CSS for table */
#maxelotable {
    width: 100%;
    border-collapse: collapse;
}

#maxelotable th,
#maxelotable td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: center;
    font-size: 1.17rem;
}

#maxelotable th {
    background-color: #000000;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.17rem;
}

.sorted-asc::after {
    content: " ▲";
}

.sorted-desc::after {
    content: " ▼";
}

/* unvisited link */
a:link {
    color: white;
    text-decoration: none;
  }
  
  /* visited link */
  a:visited {
    color: white;
    text-decoration: none;
  }
  
  /* mouse over link */
  a:hover {
    color: white;
    text-decoration: underline;
  }
  
  /* selected link */
  a:active {
    color: white;
    text-decoration: underline;
  }