body {
    background-color: rgb(18, 18, 18);
    color: cornflowerblue;
    font-size: xx-large;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.title {
    text-align: center;
    border: 3px solid cornflowerblue;
    border-radius: 18px;
    margin-left: 8%;
    margin-right: 8%;
    margin-top: 2%;
    padding-top: 18px;
    padding-bottom: 18px;
}

hr {
    color: bisque;
}

.section {
    color: tomato;
    text-align: center;
    border-bottom: 3px solid tomato;
    margin-left: 8%;
    margin-right: 8%;
    margin-top: 2%;
    padding: 18px;
}

.content {
    text-align: center;
}

.class {
    font-size: medium;
    color: lavender;
}

.collapsible-button {
    border: 3px solid tomato;
}

.collapsible-button:hover {
    cursor: pointer;
    background-color: rgb(28, 28, 28);
    color: rgb(255, 120, 96);
    border-radius: 20px;
    transition: 0.5s;
}

.link:hover {
    cursor: pointer;
}

@media (max-width: 600px) {

    /* Add your mobile styles here */
    img {
        width: 35%;
    }
}


@media (min-width: 601px) {

    /* Add your desktop styles here */
    .people {
        display: grid;
        grid-template-columns: auto auto;
        row-gap: 5%;
    }

    .players {
        display: grid;
        grid-template-columns: auto auto auto auto;
    }

    img {
        width: 40%;
    }

    .title {
        display: grid;
        grid-template-columns: auto auto auto;
        align-items: center;
    }
}