body {
    background-image: url("/images/star_background.svg");
    background-color: #0B0B3B;
    color: white;
    text-shadow: 2px 2px black;
    color-scheme: dark;
}
.home-panels {
    display: grid;
    grid-template-columns: minmax(0, 252px) minmax(0, 512px);
    gap: 16px;
    align-items: start;
}
@media (max-width: 600px) {
    .home-panels {
        grid-template-columns: minmax(0, 512px);
    }
}
.live-panel {
    position: relative;
    border: 1px solid grey;
    padding: 5px;
    min-height: 24px;
}
#statusdiv {
    max-width: 240px;
    background-color: #0B0B3B;
}
.refresh-button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1;
    filter: invert(1);
}
.refresh-button img {
    display: block;
}
.refresh-button:disabled {
    opacity: 0.2;
    cursor: wait;
}

#links {
    padding: 5px;
    border: 1px solid grey;
    max-width: 240px;
    margin-top: 10px;
    background-color: #0B0B3B;
}
a:visited {
    color: #6078ac;
}
.chat-messages {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 60rem;
}
.chat-message {
    border-bottom: 1px solid grey;
    overflow-wrap: anywhere;
    padding: 10px 10px;
}
.chat-meta {
    color: #a0b3f9;
}
.chat-text {
    white-space: pre-wrap;
    margin: 0.4rem 0 0;
}
.chat-broadcast .chat-text {
    color: #80fa32;
}

#chatdiv {
    max-width: 400px;
    background-color: #0B0B3B;
}
#chat-content {
    padding-right: 52px;
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
}
#refresh-chat {
    right: 28px;
}
.chat-empty {
    margin: 0;
}

.chat-sender {
    display: block;
    margin-top: 0.4rem;
    font-weight: bold;
    color: #ffd580;
}

/* Shared presentation for generated pages; page-* classes are shared helpers. */
body.generated-page {
    background-color: #000;
    color: rgb(112, 127, 255);
    text-shadow: none;
}
.generated-page a:link { color: #a0b3f9; }
.generated-page a:visited { color: #a0a0a0; }
.generated-page a:active { color: #fff; }
.generated-page .ll { text-decoration: none; }
.generated-page .ll:hover {
    transition-duration: 0.4s;
    color: #fff;
}
.generated-page .a1 {
    border: 3px solid #000;
    border-radius: 8px;
    background-color: #000;
    padding: 4px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
}
.generated-page .a1:hover {
    transition-duration: 0.4s;
    border-color: #fffcb9 #a3772f #7a4f0c #fedc69;
}
.generated-page .page-title {
    text-align: center;
}
.generated-page .page-title-text {
    font-weight: bold;
}
.generated-page .page-highlight { color: #fff; }
.generated-page .page-indent { margin-left: 10px; }
.generated-page .page-align-right { text-align: right; }
.generated-page .page-align-center { text-align: center; }
.generated-page .page-align-top { vertical-align: top; }
.generated-page .page-align-middle { vertical-align: middle; }
/* Empire standings only. */
.standings-page .standings-main {
    vertical-align: top;
    width: 75%;
}
.standings-page .standings-table {
    text-align: left;
    width: 100%;
    background-color: #0a1533;
    font-family: sans-serif;
    border: 0;
    border-spacing: 2px;
}
.standings-page .standings-table td { padding: 2px; }
.standings-page .standings-column-heading {
    vertical-align: top;
    background-color: #193680;
}
.standings-page .standings-flag-column { width: 66px; }
.standings-page .standings-score-heading { background-color: rgb(100, 32, 16); }
.standings-page .standings-score { vertical-align: top; }
.standings-page .standings-score-empire { background-color: rgb(64, 16, 4); }
.standings-page .standings-score-vassal { background-color: rgb(16, 4, 1); }
.standings-page .standings-score-ally { background-color: rgb(32, 8, 2); }
/* Avatar directories and profiles only. */
.avatars-page .avatar-list {
    width: auto;
    max-width: 50%;
    margin-inline: auto;
    border: 0;
    border-spacing: 6px;
    border: 2px solid grey;
    background-color: #0B0B3B;
}

.avatars-page .avatar-list td:first-child { 
    width: 1%;
}

.avatars-page .avatar-list tr:not(:last-child) > td { /* Dividing line between each avatar */
    border-bottom: 1px solid grey;
}

.avatars-page .avatar-list td { padding: 2px; }
.avatars-page .avatar-highborn { color: #fc0; }
.avatars-page .avatar-demiavatar { color: #0038b8; }
.avatars-page .avatar-selfie {
    float: right;
    max-width: 512px;
    width: 100%;
}
.avatars-page .avatar-rule {
    width: 100%;
    height: 1px;
}
.avatars-page .avatar-section-title {
    font-family: sans-serif;
    font-weight: bold;
    color: rgb(128, 128, 128);
}
.avatars-page .avatar-detail-heading { background-color: rgb(32, 32, 32); }
.avatars-page .avatar-detail-cell { background-color: rgb(0, 0, 32); }

form > label {
    display: block;
    margin: 1em 0;
}

h1, h2, span, a, p, form {
    font-family: "Trebuchet MS", Arial, sans-serif;
}

#formdiv {
    border: 1px solid grey;
    background-color: #0B0B3B;
    padding: 5px;
    max-width: 500px;
}