body {
    padding-bottom: 3rem;
    font-family: sans-serif;
    line-height: 1.3rem;
    margin: 0;
    display: flex; flex-direction: row;
}

@media screen {
  body {
    color: white;
    background-color: black; background-image: url(../Images/nox.jpg);
    height: 100vh;
    width : 100vw;
    background-image: url(../Images/nox.jpg);
    background-size: cover;
    padding-bottom: 3rem;
  }
  div#today-is {
    display: flex; flex-direction:column; flex-wrap: wrap;
    width: 100vw;
  }
}

div#validator-info {
    position: fixed;
    z-index: 2;
    bottom: 0;
    left: 10px;
}

h1, h2, h3 {
    width: 100%;
    text-align: center;
    vertical-align: middle;
    padding: 0.5rem 3rem 1rem 3rem;
}

p.standout {
    text-align: center;
    font-variant: small-caps;
    border-left: 1px solid #090;
    border-bottom: 2px solid #030;
    border-radius: 0.5em;
    min-height: 2em;
    vertical-align: middle;
    background-color: green; background-image: url(../Images/shadow-rolloff);
}
p.standout a {
    color: white;
}
p.standout a:hover {
    color: yellow;
    background: green url(../Images/shadow-rolloff) center center repeat-x;
}

.hilite {
    color: white;
    background: rgb(111 111 111 / 0.5);
}

div#footer {
    position: fixed;
    left: 120px;
    bottom: 5px;
}

div#mass-list {
    background: transparent url(../Images/shadow-30-pct) top left repeat;
    margin: 0;
    border: 1px solid #FFC;
    padding: 0.5rem;
}
div.m0:before, div.m1:before, div.m2:before,
div.m3:before, div.m4:before, div.m5:before,
div.m6:before {
    font-family: Courier, fixed;
    font-weight: normal;
    white-space: pre;
    padding-left: 8px;
}
div.m0:before { content: 'Date     : '; }
div.m1:before { content: 'Priest   : '; }
div.m2:before { content: 'Priestess: '; }
div.m3:before { content: 'Deacon   : '; }
div.m4:before { content: 'Positive : '; }
div.m5:before { content: 'Negative : '; }
div.m6:before { content: 'Key      : '; }
div.m0, div.m1, div.m2, div.m3, div.m4, div.m5 {
    font-weight: bold;
    line-height: 1.5rem;
}
div.m0 { border-bottom: 1px solid #FFC; margin-bottom: 0.2rem; }
div.m1 { background-color: #FCC; color: black; }
div.m2 { background-color: #CCF; color: black; }
div.m3 { background-color: #FFC; color: black; }
div.m4 { background-color: #FFF; color: black; }
div.m5 { background-color: #EEE; color: black; }
div.m6 { background-color: #AAA; color: black; }
div.m0 { color: #FFC; }
div#mass-history {
    width: 100%;
    padding: 0.5rem;
    text-align: center;
}

.col-1  {width: 8.33%;}
.col-2  {width: 16.66%;}
.col-3  {width: 25%;}
.col-4  {width: 33.33%;}
.col-5  {width: 41.66%;}
.col-6  {width: 50%;}
.col-7  {width: 58.33%;}
.col-8  {width: 66.66%;}
.col-9  {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
[class*="col-"] {
    float: left;
}
.la {
    float: left;
    margin-left: 5px;
}
.ra {
    float: right;
    margin-right: 5px;
}
a.bullet, a.bullet:visited,
.bullet,
.link {
    color: white;
    background-color: rgb(0 0 0 / 0.7);
    border: thin solid rgb(255 255 255 / 0.8);
    border-radius: 0.6em;
    padding: 0.2em 0.4em;
}
.link:hover {
    cursor: pointer;
}
div.sidebar {
    line-height: 8rem;
    vertical-align: middle;
}
a.sidebar {
    font-size: xx-large;
}