/* TOP */

.top {
    display: flex;
    flex-direction: column;
}

.top h1, .top p {
    margin: 15px;
}

/* JEUX */

.classements  {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.jeux {
    margin: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.jeux a {
    border-radius: 32px;
    padding: 5px 10px;
    margin: 15px 0 0 0;

    transition: .3s;
}

.jeux a:hover {
    background-color: var(--tertiary);
    border-color: var(--secondary);
    color: var(--succes);

    transition: .3s;
}

/* TABLE (classements) */

table {
    margin: 15px 0;

    max-height: 355px;
    min-width: 320px;
    
    background: var(--tertiary);
    
    border: 2px solid var(--secondary);
    border-radius: 16px;
    overflow-y: scroll;
    overflow-x: clip;

    scrollbar-color: var(--secondary) rgba(255,255,255,.25);
    scrollbar-gutter: none;
}

thead {
    position: sticky;
    top: 0;
}

thead tr {
    display: flex;
    background-color: var(--tertiary100);
}

th, td {
    padding: 10px;
    text-align: left;
    flex: 1;
}

tr:nth-child(even) {
    color: var(--primary);
    background-color: var(--tertiary400);
}

tbody tr {
    display: flex;

    background-color: var(--tertiary);
}

tbody tr:hover {
    background: var(--primary);
    color: var(--accent);
}

/* Pagination */

.pagination {
    margin-left: 15px;
}

.pagination a {
    margin: 5px;
    padding: 5px 10px;

    background: var(--tertiary);
    border-radius: 16px;

    transition: .3s;
}

.pagination a.active, .pagination a:hover {
    background: var(--secondary);
    color: var(--primary);

    transition: .3s;
}