@keyframes animation-fade {
    0% {color: rgba(255, 255, 255, 1);}
    50% {color: rgba(255, 255, 255, 0);}
    100% {color: rgba(255, 255, 255, 1);}
}
@-o-keyframes animation-fade {
    0% {color: rgba(255, 255, 255, 1);}
    50% {color: rgba(255, 255, 255, 0);}
    100% {color: rgba(255, 255, 255, 1);}
}
@-moz-keyframes animation-fade {
    0% {color: rgba(255, 255, 255, 1);}
    50% {color: rgba(255, 255, 255, 0);}
    100% {color: rgba(255, 255, 255, 1);}
}
@-webkit-keyframes animation-fade {
    0% {color: rgba(255, 255, 255, 1);}
    50% {color: rgba(255, 255, 255, 0);}
    100% {color: rgba(255, 255, 255, 1);}
}

body {
    font-size: 16px;
    font-family: monospace;
    background: #1d1d1d;
    color: #eee;
    text-align: center;
}

header {
    min-width: 40%;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
    height: fit-content;
}

@media screen and (max-width: 50rem) {
    header {
        flex-direction: column;
    }
    header > h1 {
        margin-bottom: 1rem;
    }
}

.flex-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

.flex-container > * {
    margin: 10px;
    padding: 20px;
}

#ip {
    color: #ffa500;
}
footer, nav, main {

    width: calc(100% - 60px);
}

header * {
    margin: 0;
}

header h1 {
    font-size: 28px;
    margin-right: 20px;
}

header h2 {
    font-size: 18px;
    margin-left: 20px;
    text-align: left;
}

nav {
    min-height: 16px;
}

main {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}

#playerlist {
    list-style: none;
    padding: 0;
}

a:link {
    color: #e6cb19;
}

a:visited {
    color: #ffa500;
}

#playerlist li::before {
    content: "\2022";
    color: #399f59;
    font-weight: bold;
    font-size: 1.25em;
    width: 1em;
    margin-left: -1em;
    display: inline-block;
}


td, th {
    background: #131313;
}

.doomsday {
    font-size: 1vw;
}
#doomsday {
    font-size: 8em;
    padding: 0 0.3em;
    -webkit-animation: animation-fade 1s infinite;
    -moz-animation: animation-fade 1s infinite;
    -o-animation: animation-fade 1s infinite;
    animation: animation-fade 1s infinite;
}
.doomsday td {
    width: 25%;
    padding: 1ch;
    font-size: 1rem;
}

@media screen and (max-width: 50rem) {
    .doomsday {
        font-size: 1.7vw; /* As much as we can get away with */
    }
    main {
        flex-direction: column;
    }
}

footer {
    min-height: 16px;
    height: fit-content;
}