main {
    margin: 1em;
    display: grid;
    grid-template-columns: minmax(30em, 4fr) minmax(15em, 1fr);
    gap: 1em;
}

#main-content {
    display: flex;
    gap: 1em;
    flex-direction: column;
}

section#sidebar section.content-item {
    height: 100%;
    box-sizing: border-box;
}
p {
    margin: 1em 0;
}

@media (max-width: 58em) {
    main {
        margin: 1em;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1em;
    }
    section#sidebar section.content-item {
        height: max-content;
        box-sizing: border-box;
    }
}

#maintenance-msg,#offline-msg {
    display: none;
}

#online-players-cont.online h1.offline-heading,
#online-players-cont.online h1.maintenance-heading {
    display: none;
}

#online-players-cont.online h1.online-heading {
    display: block;
}

#online-players-cont.offline h1.online-heading,
#online-players-cont.offline h1.maintenance-heading {
    display: none;
}

#online-players-cont.offline h1.offline-heading,
#online-players-cont.offline #offline-msg {
    display: block;
}

#online-players-cont.maintenance h1.online-heading,
#online-players-cont.maintenance h1.offline-heading {
    display: none;
}

#online-players-cont.maintenance h1.maintenance-heading,
#online-players-cont.maintenance #maintenance-msg {
    display: block;
}