.main-container {
    margin: 4rem auto 0;
    max-width: 62rem;
}

header {
    display:flex;
    flex-wrap: wrap;

    align-items:center;
    justify-content:space-between;

    padding:0 0.5rem;
}

h1 {
    margin: 0;
}

.countdown-text {
    margin-bottom: 0;

    color: #848ecc;
    font-size: 0.8em;
}

.section-header-container {
    margin-top: 4rem;
    padding:0 0 0 0.5rem;
}

.server-block {
    border-radius: 5px;
    border: 1.4px solid black;

    margin-top: 2px;
    margin-bottom:2px;
    padding: 0.5em;

    background-color: #1A1D24;
}

.large-block {
    margin-top: 4rem;

    border: none;
    box-shadow: rgba(0, 0, 0, 0.2) 0 0 10px;
}
.large-block h1, .large-block p {
    margin-left: calc(.7rem + 5px);
    margin-top: 0;
    margin-bottom: 0;
}
.large-block h1 {
    margin-bottom: 2px;
}
.large-block p {
    font-size: 0.8em;
}

.server-btn {
    display:block;
    width:100%;

    text-align: left;
    color: white;
    font-size:1.1em;

    cursor: pointer;
}
.server-btn:hover {
    background-color: #17171f;
}
.server-btn-active {
    background-color: #0e0e13;
}

.server-btn:before {
    content: ' ';
    display: inline-block;

    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid currentColor;

    margin-right: .7rem;
    margin-bottom: .1rem;
}
.server-btn-active:before {
    transform: rotate(90deg) translateY(-3px);
}

.server-btn span {
    float: right;
}

.details-container {
    max-height: 0;

    margin-right:10px;
    margin-left:10px;
    padding:0 10px;

    background-color:#1A1D24;
    overflow:hidden;

    transition: max-height 0.2s ease-out;
    /*Box shadow?*/
}

.status-color {
    color:#848ecc;
}
.online-color {
    color:#2f9730;
}
.offline-color {
    color:#da3636;
}
.unknown-color {
    color: #eca516;
}