body {
    margin: 0 auto;
    padding: 0;
    color: #111;
    font-family: "Open Sans", Arial, sans-serif;
}

footer {
    text-align: center;
}

header {
    padding: 0.5em;
}

footer {
    clear: both;
    padding: 1em 0.25em 0.25em 0.25em;
}

    footer hr {
        border-top: 1px solid #444;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
    }

    footer p {
        color: #444;
        font-size: 0.875em;
        margin: 0.5em 0;
    }

main {
    clear: both;
    padding: 1em 0.25em;
}

h1 {
    font-size: 1.5em;
    font-weight: 700;
}

#logo {
    float: left;
    font-size: 1.75em;
    padding: 0;
    margin: 0;
    /*max-width: 50%;*/
}

    #logo a {
        color: #111;
        text-decoration: none;
    }

#user {
    float: right;
    padding: 0;
    margin: 0;
    max-width: 40%;
    font-size: 0.875em;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
}

    #user input {
        margin: 0.25em 0;
        padding: 0 0 0 0.25em;
        background-color: transparent;
        border-style: none;
        color: #A00;
    }

p {
    font-size: 1em;
}

dd {
    font-weight: bold;
}

a, a:link, a:visited, a:focus, a:hover, a:active {
    color: #A00;
    text-decoration: underline;
}

.permadead {
    font-family: "Special Elite", Courier New, Courier, monospace;
}

.dk, .dead, #logo .dead {
    color: #A00;
    font-family: "Special Elite", Courier New, Courier, monospace;
}

.tremble {
    font-size: 0.625em;
    animation-duration: 0.1s;
    animation-name: tremble;
    animation-iteration-count: infinite;
}

@keyframes tremble {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(1px, 1px) rotate(1deg);
    }

    50% {
        transform: translate(0, 0) rotate(0deg);
    }

    75% {
        transform: translate(-1px, 1px) rotate(-1deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

.input-label {
    display: block;
}

.validation-error {
    display: block;
    color: #A00;
}

.button {
    color: #A00;
    font-size: 1em;
    background-color: #FFF;
    border: 2px solid #A00;
    padding: 0.5em 1.5em;
}

.textbox {
    color: #111;
    font-size: 1em;
    font-family: "Open Sans", Arial, sans-serif;
    border: 1px solid #444;
    padding: 0.25em;
}

.checkbox {
    accent-color: #A00;
}

.site-intro {
    text-align: center;
    margin: 2em 0;
}

#gameList {
    margin: 0;
    padding: 0;
    text-align: center;
    list-style-type: none;
}
    #gameList li {
        display: inline-block;
        margin: 1em;
    }

#loginForm {
    margin: 0 auto;
    padding: 0;
    max-width: 30em;
}

.terminal {
    margin: 1em 0;
    padding: 1em;
    border: 0.25em solid #445055;
    font-family: 'Courier New', monospace;
    font-size: 1em;
    background-color: #101A10;
    color: #9DBFA0;
}
    .terminal dd {
        color: #57FF57;
        text-shadow: 0 0 6px #57FF57;
        font-weight: normal;
    }


@media screen and (width >= 30em) {
    #logo {
        font-size: 2em;
    }
}

@media screen and (width >= 40em) {
    body {
        max-width: 75em;
    }

    h1 {
        font-size: 1.75em;
    }

    #logo {
        font-size: 2.5em;
    }

    main {
        padding-top: 1em;
    }

    #user {
        font-size: 1em;
    }

    dd {
        font-size: 1.125em;
    }
}

@media screen and (width >= 60em) {
    h1 {
        font-size: 2em;
    }

    #logo {
        font-size: 3em;
    }

    dd {
        font-size: 1.25em;
    }
}