.lobby {
    text-align: center;
    font-size: x-large;
}

.lobby h1,
.lobby p {
    margin: 0px;
}

.lobby__header,
.lobby .chall {
    display: grid;
    grid-template-columns: 15% 30% 30% 25%;

    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: medium;
    padding: 10px;

    box-sizing: border-box;
}

.lobby__header,
.lobby #lobby {
    width: 100%;
}

.lobby__header {
    padding: 5px;
    font-size: large;
}

.lobby__list {
    position: relative;

    background-color: black;
    overflow-y: scroll;
    overflow-x: hidden;

    min-height: 100px;
    max-height: 43vmin;
}

@media (min-width: 700px){
    .lobby__list, .lobby__header {
        width: 80%;
        margin: auto;
    }
}

.lobby .chall:nth-child(2n){
    background: linear-gradient(rgb(51, 51, 51) 50%, rgb(30, 30, 30) 100%);
}

.lobby .chall:nth-child(2n + 1){
    background: linear-gradient(rgb(125, 125, 125) 50%, rgb(80, 80, 80) 100%);
}

.lobby__create-button,
.lobby__play-phil {
    display: block;
    margin: 10px auto;
    padding-left: 20px;
    padding-right: 20px;

    font-size: x-large;
}

.lobby__featured-game {
    margin-top: 10px;
    text-align: center;
}

#lobby__featured-game-container .board-graphics {
    grid-template-areas:
        'top_bar'
        'board'
        'bottom_bar';
    grid-template-rows: min-content auto min-content;
    --game-width: 75vmin;
    --game-height: 75vmin;
}


.lobby__list:not(.lobby__list--refreshing) .lobby__list-loading {
    display: none;
}

.lobby__list-loading {
    position: absolute;
    right: 10px;
    bottom: 2px;

    align-content: center;
    text-align: center;
    z-index: 6;
}

.lobby__list-loading-img {
    animation: rotate 2s linear infinite;
    width: 50px;
}