body {
    background: radial-gradient(circle at 80% 20%, rgba(160, 70, 70, 0.12), transparent 45%), linear-gradient(135deg, #190e41, #0b152d, #bd3165);
}


main {
    background: rgba(115, 115, 115, 0.4);
}

.leaderboard {
    text-align: center;
    background: rgba(11, 21, 45, 0.9);
    padding:5px;
    color: white;
    font-family: Nasalization;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.spacer {
    content: "";
    height: 30px;
    width: 100%;
}

table {
    font-family: sans-serif;
}

.leaderboard h1 {
    padding: 15px;
}
.leaderboard-header {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
    padding: 5px;
    width: 100%;
}
.leaderboard-wrapper {
    display: none;
}
.spacer {
    content: "";
    flex: 0.4;
}

.pagination, .options {
    display: flex;
    flex-direction: row;
    gap: 5px;
    min-width: 200px;
    justify-content: space-around;
    align-items: center;
}
.pagination a, .pagination span {
    text-decoration: none;
    color: white;
    background: rgba(150, 50, 50, 0.7);
    padding: 4px 10px;
    border-radius: 5px;
}

.pagination span {
    color: grey;
}

.pagination a:hover, .toggle-button:hover {
    background: rgba(150, 50, 50, 1);
}

.pagination p {
    margin: 0;
    margin-right: 15px;
}

.options {
    min-width: 450px;
}

.toggle-button {
    background: rgba(150, 50, 50, 0.7);
    padding: 4px 10px;
    border-radius: 5px;
    color: white;
    border: none;
}

#sortForm, #pagesForm {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-family: sans-serif;
}

    #sortForm label, #pagesForm label {
        font-weight: 500;
        font-size: 0.95rem;
        white-space: nowrap;
    }

    #sortForm select, #pagesForm select {
        background: rgba(150, 50, 50, 0.7);
        color: white;
        border: none;
        border-radius: 5px;
        padding: 6px 12px;
        font-size: 0.95rem;
        cursor: pointer;
        min-width: 160px;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        transition: background-color 0.2s ease;
        padding-right: 30px;
    }

        #sortForm select:hover, #pagesForm select:hover {
            background-color: rgba(150, 50, 50, 1);
        }

        #sortForm select:focus, #pagesForm select:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(189, 49, 101, 0.6);
            background-color: rgba(150, 50, 50, 0.85);
        }

        #sortForm select option, #pagesForm select option {
            background: #0b152d;
            color: white;
            padding: 8px 12px;
            font-size: 0.95rem;
        }

            #sortForm select option:hover,
            #sortForm select option:checked,
            #pagesForm select option:hover,
            #pagesForm select option:checked {
                background: rgba(189, 49, 101, 0.6);
            }

    #sortForm .select-wrapper, #pagesForm .select-wrapper {
        position: relative;
        display: inline-block;
    }

    #sortForm select::-ms-expand, #pagesForm select::-ms-expand {
        display: none;
    }

th.sorted-by {
    font-weight: 700;
    color: red;
}
td.sorted-by {
    font-weight: 700;
}

#driverLeaderboard td, #driverLeaderboard th, .table-container td, .table-container th {
    background-color: transparent;
    color: grey;
    border-color: rgba(255, 255, 255, 0.10);
}
#driverLeaderboard th, .table-container th {
    font-size: 12px;
}

    #driverLeaderboard th.sorted-by, .table-container th.sorted-by {
        color: red;
    }
#driverLeaderboard td.sorted-by, .table-container td.sorted-by {
    background-color: rgba(250, 5, 5, 0.1);
}

#driverBody a {
    color: rgba(255, 200, 0, 0.6);
    text-decoration: none;
}
#driverBody a:hover {
    color: rgba(255, 1, 1, 1);
    text-decoration: none;
}

#paginationBottom {
    display: flex;
    width: 300px;
    justify-content: center;
}

.table-container {
    overflow: auto;
    max-width: 100%;
    max-height: max(calc(100vh - 310px), 450px);
    margin-bottom: 10px;
}

.leaderboard-wrapper {
    max-height: 850px;
    overflow: auto;
    margin-bottom: 30px;
    border-radius: 6px;
    max-width: 100%;
}

.leaderboard-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.leaderboard-table th {
    position: sticky;
    top: 0;
    z-index: 11;
    padding: 12px 8px;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
}
.leaderboard-table td.sticky-col, .leaderboard-table th:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 9;
    background: rgba(0, 0, 0, 1);
}
    .leaderboard-table th:nth-child(1) {
        z-index: 13;
        background: rgba(0, 0, 0, 1);
    }

    .leaderboard-table td:nth-child(1) {
        color: white;
    }

.sticky-col {
    position: sticky;
}

.gold td:nth-child(1) {
    background-color: rgba(184, 134, 11, 1);
}

.silver td:nth-child(1) {
    background-color: rgba(96, 96, 96, 1);
}

.bronze td:nth-child(1) {
    background-color: rgba(120, 70, 15, 1);
}

@media (max-width: 992px) {
    .leaderboard-header > :current(div):first-child {
        flex: 0;
    }
    .leaderboard-header {
        flex-wrap: wrap;
        gap: 5px;
    }
}

@media ( max-width: 767px ) {
    .leaderboard-header > div:nth-child(2) {
        flex-direction: column;
    }
    .pages-to-show {
        display: flex;
        justify-content: center;
    }
    .leaderboard-header, .options {
        flex-direction: column;
    }
    .pagination {
        justify-content: center;
    }
    #paginationTop {
        margin-bottom: 5px;
    }
    .options {
        min-width: 250px;
    }
}
@media ( max-width: 300px ) {
    #paginationBottom {
        width: 250px;
    }
}