* {
    box-sizing: border-box;
}

@font-face {
    font-family: 'logotype';
    src: url('../fonts/setbackt.ttf');
}
@font-face {
    font-family: 'logotype-small';
    src: url('../fonts/joystix_monospace-webfont.woff2'), url('../fonts/joystix_monospace-webfont.woff2');
}

@font-face {
    font-family: 'screen1';
    src: url('../fonts/MunroSmall.ttf');
}

@font-face {
    font-family: 'screen2';
    src: url('../fonts/MunroNarrow.ttf');
}

@font-face {
    font-family: 'pixelar';
    src: url('../fonts/pixelar_regular-webfont.woff2'), url('../fonts/pixelar_regular-webfont.woff');
}

body {
    font-family: 'Helvetica Neue', Verdana, Helvetica, Arial, sans-serif;
    max-width: 75em;
    margin: 0 auto;
    padding-top: 72px;
    padding-bottom: 50px;
    font-size: 1.125em;
    color: #333;
    line-height: 1.5em;
    color: #fff;
    background-color: #000011;
}

hr {
    border: 1px solid #ddd;
    margin: 0.5em 0;
    clear: both;
}

nav {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    background-color: #4A235A;
}

nav .nav-logo, nav .nav-spacer {
    text-align: left;
    flex: 1 1 auto;
}

nav .nav-logo {
    order: 0;
    flex: 1 1 auto;
    font-family: 'logotype-small', courier, mono space;
    padding-left: 10px;
    padding-right: 10px;
}

nav .nav-logo a, nav .mobile button.nav-logo, nav .mobile button.nav-logo:hover {
    color: #aaffaa;
}

nav .nav-logo a:hover {
    text-decoration: none;
}

nav li.active {
    background-color: violet;
}

nav .nav-logo .active {
    background-color: inherit;
    border-bottom: 2px solid violet;
}

nav .nav-dropdown button, nav .nav-dropdown button:hover, nav .nav-dropdown button:active, nav .nav-dropdown button:disabled {
    all: unset;
}

nav .nav-link a, nav .nav-dropdown a, nav .nav-dropdown button, nav .nav-dropdown button:hover, nav .nav-dropdown button:active, nav .nav-dropdown button:disabled, nav .nav-section {
    cursor: pointer;
    font-family: 'logotype-small', courier, mono space;
    font-size: .8em;
    color: #ffffff;
    padding-left: 20px;
    padding-right: 20px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    padding: 0;
    white-space: nowrap;
}

nav > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: stretch;
    align-items: center;
}

nav > ul > li {
    order: 1;
    flex: 0 0 auto;
    align-self: auto;
    text-align: center;
}

nav .nav-dropdown-button {
    background-color: transparent;
    border: none;
    font-family: inherit;
}
nav .nav-dropdown-button::after {
    content: "";
    display: inline-block;
    width: 1ch;
    height: 1em;
    background-image: url("../images/downarrow.png");
    background-repeat: no-repeat;
    background-position: 50% 80%;
}

nav .nav-dropdown-button.dropdown-open::after {
    background-image: url("../images/x.png");
    background-position: 50% 100%;
}

nav .nav-dropdown-button.active::after {
    background-image: url("../images/downarrow-active.png");
}

nav .nav-link a.external::after {
    content: "";
    display: inline-block;
    width: 1ch;
    height: 1em;
    background-image: url("../images/external.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

nav .nav-dropdown {
    position: relative;
    text-align: center;
}

nav .nav-dropdown .nav-dropdown-menu {
    position: absolute;
    background-color: #4A235A;
    box-shadow: 8px 8px 0px 0px #444444, 8px 0px 0px 0px #444444;
    left: 50%;
    transform: translateX(-50%);
    min-width: 15ch;
    display: none;
    padding-bottom: 10px;
}

nav .desktop .nav-dropdown:last-child .nav-dropdown-menu {
    transform: translateX(-90%);
}

nav .desktop .nav-dropdown:hover .nav-dropdown-menu {
    display: block;
}
nav .desktop .nav-dropdown:focus-within .nav-dropdown-menu {
    display: block;
}


nav .mobile .nav-section {
    color: grey;
    border-top: 1px solid grey;
}

nav .mobile .nav-section-end {
    height: 1px;
    border-top: 1px solid grey;
}


nav .mobile .nav-dropdown .nav-dropdown-menu, nav .mobile .nav-dropdown:last-child .nav-dropdown-menu {
    position: fixed;
    transform: none;
    left: 0 !important;
    right: 0 !important;
    width: 100vw;
}

nav .mobile .nav-dropdown-menu li {
    position: relative;
    z-index: 100;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}
nav .mobile .nav-dropdown-menu li:first-child {
    margin-top: 0;
}

#mobile-nav-overlay {
    padding: 0;
    z-index: 1;
    position: fixed;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}


#sidebar-container {
    display: flex; flex-wrap: wrap;
}
#welcome {
    flex-grow: 3; flex-basis: 500px;
}
#sidebar {
    font-size: 0.8rem;
    line-height: 1.5em;
    flex-grow: 0; width: 25em
}

h1 {
    font-family: 'logotype', 'Courier New', Courier, monospace;
    font-size: 5em;
    line-height: 1em;
    color: #88ee88;
    margin-top: 10px;
    margin-bottom: 20px;
    text-shadow: 4px 4px 0px #444;
    text-align: center;
}

h2 {
    font-size: 2em;
    text-align: center;
    line-height: 0.8em;
}

h3 {
    font-size: 1.5em;
    color: #777;
    margin-bottom: 0.2em;
}

h4 {
    font-size: 1.1em;
    margin-bottom: 0.2em;
}

h3 + p, h4 + p {
    margin-top: 0;
}


.lore-card h3 {
    color: #aaa;
}
.blog-entries section h2:first-child,
section.blog-entry h2:first-child {
    margin-top: 0.5em;
}
section h3:first-child, section h2:first-child {
    margin-top: 0.5em;
}

.blog-title a { color: inherit; }

.faq { margin-left: 2em; }

a {
    color: #00aa00;
    text-decoration: none;

}

a.button {
    color: white;
    display: inline-block;
    text-align: center;
}

a:hover {
    text-decoration: underline;
}

a.button:hover {
    text-decoration: none;
}


a.blog-epoch {
    color: #7a7;
}

.button, button{
    padding: 10px 20px;
    margin: 10px;
    font-size: 1em;
    font-family: screen1;
    border: none;
    color: #ffffff;
    background-color: #777777;
    box-shadow: 8px 8px 0px 0px #444444;
    cursor: pointer;
    outline: none;
}

button.large {
    font-size: 1.5em;
}

button.small {
    font-size: 0.75em;
}

.button:hover, button:hover{
    position: relative;
    top: 3px;
    left: 3px;
    box-shadow: 5px 5px 0px 0px #444444;
}

.button:hover, button:active{
    position: relative;
    top: 6px;
    left: 6px;
    box-shadow: 2px 2px 0px 0px #444444;
}

button.ok{
    background-color: green;
}

button.cancel{
    background-color: red;
}

button.nav{
    background-color: blue;
}

button.select{
    background-color: orange;
}

select{
    padding: 10px 20px;
    margin: 10px;
    font-size: 1.5em;
    font-family: screen1;
    border: none;
    color: #ffffff;
    background-color: orange;
    box-shadow: 8px 8px 0px 0px #444444;
    cursor: pointer;
    outline: none;
}

select:hover {
   position: relative;
   top: 3px;
   left: 3px;
   box-shadow: 5px 5px 0px 0px #444444;

}

section, .panel {
    color: #4400bb;
    background-color: #fff;
    margin: 50px 10px;
    padding: 0.5em;
    font-size: 1.5em;
    font-family: 'pixelar', mono space, sans-serif;
    box-shadow: 8px 8px 0px 0px #555555;
    overflow-wrap: break-word;
}
section:after, .panel:after {
    content: "";
    display: table;
    clear: both;
}

table { font-size: 1em; line-height: 1em; color: inherit; }
table.thumbnail-list { max-width: 40em; margin: 0 auto; }
table.thumbnail-list td.thumb img { max-width: 120px; padding-right: 1em; }

.lore-card {
    color: #fff;
    background-color: rgba(0,0,0, 0.8);
    border: solid 2px #fff;
}
.inline-lore-card {
    color: #fff;
    background-color: rgba(0,0,0, 0.8);
    border: solid 2px #ddd;
    padding: 0.5em;
    box-shadow: 8px 8px 0px 0px rgba(0,0,0, 0.1);
}
.inline-help-card {
    color: #4400bb;
    background-color: #fff;
    padding: 0.5em;
    box-shadow: 8px 8px 0px 0px rgba(0,0,0, 0.1);
}

section em, .panel em {
    color: red;
    font-style: normal;
}
.lore-card em {
    color:rgb(235 78 78);
}

section strong {
    color: darkorange;
    font-weight: normal;
}

section ul { margin: 0; }
section ul li { margin: 0.5em 0; }

p.read-more {
    text-align: right;
}


.toolbar {
    margin-bottom: 10px;
    text-align: right;
}

.toolbar button, .toolbar select {
    font-size: 1.2em;
    padding: 8px 12px;
}

.toolbar .label{
    position: relative;
    top: 2px;
    color: red;
    font-family: 'pixelar', mono space, sans-serif;
    display: inline-block;
    font-weight: bold;
    margin-left: 20px;
}

.toolbar .label.balanced{
    min-width: 65px;
    text-align: center;
    top: 8px;
    margin-left: 15px;
    margin-right: 10px;
    font-size: 1.4em;
    font-family: screen1;
    color: orange;
}

.toolbar.bottom {
    margin-bottom: 100px;
    text-align: center;
}

.events {
    position: fixed;
    right: 0;
    bottom: 0;
}

.event {
    font-family: 'pixelar', courier, mono space, sans-serif;
    position: relative;
    border-left: 2px solid orange;
    border-bottom: 2px solid orange;
    border-top: 2px solid orange;
    background-color: #000;
    overflow: hidden;
    max-height: 500px;

    -webkit-animation: showevent 15s;
    animation: showevent 15s;

    padding: 0px 10px;
    border-width: 0px;
    max-height: 0px;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

pre {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12pt;
    line-height: 1.3em;
}
code {
    font-family: inherit;
    background-color: rgba(255, 183, 0, 0.2);
    display: inline-block;
    padding: 0 5px;
    color: #a938ff;
    white-space: pre-wrap;
}
.lore-card code {
    color: #cf91ff;
}
pre code {
    display: block;
    padding: 5px;
}

img.planet-thumb {
    float: right;
    width: 150px;
    margin: 5px 10px 10px 5px;
    border: solid 3px black;
    background-color: black;
    border-radius: 8px;
}

img.article-thumbnail-right {
    display: block;
    margin: 0 auto;
}

@-webkit-keyframes showevent {
  0%   {
    padding: 0px 10px;
    border-width: 0px;
    max-height: 0px;
    margin: 0;
    }
    5% {
    padding: 10px 10px;
    border-width: 2px;
    max-height: 500px;
    opacity: 0;
    margin-top: 5px;
    margin-bottom: 5px;
    }
    10% {
    opacity: 1;

    }
    90% {
    opacity: 1;
    }
    95% {
    padding: 10px 10px;
    border-width: 2px;
    max-height: 500px;
    opacity: 0;
    margin-top: 5px;
    margin-bottom: 5px;

    }
    100% {
    padding: 0px 10px;
    border-width: 0px;
    max-height: 0px;
    margin: 0;
    }
}
@keyframes showevent {
    0%   {
    padding: 0px 10px;
    border-width: 0px;
    max-height: 0px;
    margin: 0;
    }
    5% {
    padding: 10px 10px;
    border-width: 2px;
    max-height: 500px;
    opacity: 0;
    margin-top: 5px;
    margin-bottom: 5px;
    }
    10% {
    opacity: 1;

    }
    90% {
    opacity: 1;
    }
    95% {
    padding: 10px 10px;
    border-width: 2px;
    max-height: 500px;
    opacity: 0;
    margin-top: 5px;
    margin-bottom: 5px;

    }
    100% {
    padding: 0px 10px;
    border-width: 0px;
    max-height: 0px;
    margin: 0;
    }
}


.loader-small,
.loader-small:before,
.loader-small:after {
    background: rgba(0,0,0,0);
    -webkit-animation: load1 1s infinite ease-in-out;
    animation: load1 1s infinite ease-in-out;
    width: 1em;
    height: 1em;
}
.loader-small {
    color: #bbffbb;
    text-indent: -9999em;
    margin: 30px auto;
    position: relative;
    top: -1.5em;
    font-size: 11px;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
.loader-small:before,
.loader-small:after {
    position: absolute;
    top: 0;
    content: '';
}
.loader-small:before {
    left: -1.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.loader-small:after {
    left: 1.5em;
}
@-webkit-keyframes load1 {
    0%,
    80%,
    100% {
    box-shadow: 0 1em;

    }
    40% {
    box-shadow: 0 2em;

    }
}
@keyframes load1 {
    0%,
    80%,
    100% {
    box-shadow: 0 1em;

    }
    40% {
    box-shadow: 0 2em;

    }
}

.loader {
    margin: 100px auto;
    font-size: 25px;
    width: 1em;
    height: 1em;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load5 1.1s infinite ease;
    animation: load5 1.1s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}


@-webkit-keyframes load5 {
    0%,
    100% {
    box-shadow: 0em -2.6em 0em 0em #bbffbb, 1.8em -1.8em 0 0em rgba(187,255,187, 0.2), 2.5em 0em 0 0em rgba(187,255,187, 0.2), 1.75em 1.75em 0 0em rgba(187,255,187, 0.2), 0em 2.5em 0 0em rgba(187,255,187, 0.2), -1.8em 1.8em 0 0em rgba(187,255,187, 0.2), -2.6em 0em 0 0em rgba(187,255,187, 0.5), -1.8em -1.8em 0 0em rgba(187,255,187, 0.7);
    }
    12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(187,255,187, 0.7), 1.8em -1.8em 0 0em #bbffbb, 2.5em 0em 0 0em rgba(187,255,187, 0.2), 1.75em 1.75em 0 0em rgba(187,255,187, 0.2), 0em 2.5em 0 0em rgba(187,255,187, 0.2), -1.8em 1.8em 0 0em rgba(187,255,187, 0.2), -2.6em 0em 0 0em rgba(187,255,187, 0.2), -1.8em -1.8em 0 0em rgba(187,255,187, 0.5);
    }
    25% {
    box-shadow: 0em -2.6em 0em 0em rgba(187,255,187, 0.5), 1.8em -1.8em 0 0em rgba(187,255,187, 0.7), 2.5em 0em 0 0em #bbffbb, 1.75em 1.75em 0 0em rgba(187,255,187, 0.2), 0em 2.5em 0 0em rgba(187,255,187, 0.2), -1.8em 1.8em 0 0em rgba(187,255,187, 0.2), -2.6em 0em 0 0em rgba(187,255,187, 0.2), -1.8em -1.8em 0 0em rgba(187,255,187, 0.2);
    }
    37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(187,255,187, 0.2), 1.8em -1.8em 0 0em rgba(187,255,187, 0.5), 2.5em 0em 0 0em rgba(187,255,187, 0.7), 1.75em 1.75em 0 0em #bbffbb, 0em 2.5em 0 0em rgba(187,255,187, 0.2), -1.8em 1.8em 0 0em rgba(187,255,187, 0.2), -2.6em 0em 0 0em rgba(187,255,187, 0.2), -1.8em -1.8em 0 0em rgba(187,255,187, 0.2);
    }
    50% {
    box-shadow: 0em -2.6em 0em 0em rgba(187,255,187, 0.2), 1.8em -1.8em 0 0em rgba(187,255,187, 0.2), 2.5em 0em 0 0em rgba(187,255,187, 0.5), 1.75em 1.75em 0 0em rgba(187,255,187, 0.7), 0em 2.5em 0 0em #bbffbb, -1.8em 1.8em 0 0em rgba(187,255,187, 0.2), -2.6em 0em 0 0em rgba(187,255,187, 0.2), -1.8em -1.8em 0 0em rgba(187,255,187, 0.2);
    }
    62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(187,255,187, 0.2), 1.8em -1.8em 0 0em rgba(187,255,187, 0.2), 2.5em 0em 0 0em rgba(187,255,187, 0.2), 1.75em 1.75em 0 0em rgba(187,255,187, 0.5), 0em 2.5em 0 0em rgba(187,255,187, 0.7), -1.8em 1.8em 0 0em #bbffbb, -2.6em 0em 0 0em rgba(187,255,187, 0.2), -1.8em -1.8em 0 0em rgba(187,255,187, 0.2);
    }
    75% {
    box-shadow: 0em -2.6em 0em 0em rgba(187,255,187, 0.2), 1.8em -1.8em 0 0em rgba(187,255,187, 0.2), 2.5em 0em 0 0em rgba(187,255,187, 0.2), 1.75em 1.75em 0 0em rgba(187,255,187, 0.2), 0em 2.5em 0 0em rgba(187,255,187, 0.5), -1.8em 1.8em 0 0em rgba(187,255,187, 0.7), -2.6em 0em 0 0em #bbffbb, -1.8em -1.8em 0 0em rgba(187,255,187, 0.2);
    }
    87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(187,255,187, 0.2), 1.8em -1.8em 0 0em rgba(187,255,187, 0.2), 2.5em 0em 0 0em rgba(187,255,187, 0.2), 1.75em 1.75em 0 0em rgba(187,255,187, 0.2), 0em 2.5em 0 0em rgba(187,255,187, 0.2), -1.8em 1.8em 0 0em rgba(187,255,187, 0.5), -2.6em 0em 0 0em rgba(187,255,187, 0.7), -1.8em -1.8em 0 0em #bbffbb;
    }
}
@keyframes load5 {
    0%,
    100% {
    box-shadow: 0em -2.6em 0em 0em #bbffbb, 1.8em -1.8em 0 0em rgba(187,255,187, 0.2), 2.5em 0em 0 0em rgba(187,255,187, 0.2), 1.75em 1.75em 0 0em rgba(187,255,187, 0.2), 0em 2.5em 0 0em rgba(187,255,187, 0.2), -1.8em 1.8em 0 0em rgba(187,255,187, 0.2), -2.6em 0em 0 0em rgba(187,255,187, 0.5), -1.8em -1.8em 0 0em rgba(187,255,187, 0.7);
    }
    12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(187,255,187, 0.7), 1.8em -1.8em 0 0em #bbffbb, 2.5em 0em 0 0em rgba(187,255,187, 0.2), 1.75em 1.75em 0 0em rgba(187,255,187, 0.2), 0em 2.5em 0 0em rgba(187,255,187, 0.2), -1.8em 1.8em 0 0em rgba(187,255,187, 0.2), -2.6em 0em 0 0em rgba(187,255,187, 0.2), -1.8em -1.8em 0 0em rgba(187,255,187, 0.5);
    }
    25% {
    box-shadow: 0em -2.6em 0em 0em rgba(187,255,187, 0.5), 1.8em -1.8em 0 0em rgba(187,255,187, 0.7), 2.5em 0em 0 0em #bbffbb, 1.75em 1.75em 0 0em rgba(187,255,187, 0.2), 0em 2.5em 0 0em rgba(187,255,187, 0.2), -1.8em 1.8em 0 0em rgba(187,255,187, 0.2), -2.6em 0em 0 0em rgba(187,255,187, 0.2), -1.8em -1.8em 0 0em rgba(187,255,187, 0.2);
    }
    37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(187,255,187, 0.2), 1.8em -1.8em 0 0em rgba(187,255,187, 0.5), 2.5em 0em 0 0em rgba(187,255,187, 0.7), 1.75em 1.75em 0 0em #bbffbb, 0em 2.5em 0 0em rgba(187,255,187, 0.2), -1.8em 1.8em 0 0em rgba(187,255,187, 0.2), -2.6em 0em 0 0em rgba(187,255,187, 0.2), -1.8em -1.8em 0 0em rgba(187,255,187, 0.2);
    }
    50% {
    box-shadow: 0em -2.6em 0em 0em rgba(187,255,187, 0.2), 1.8em -1.8em 0 0em rgba(187,255,187, 0.2), 2.5em 0em 0 0em rgba(187,255,187, 0.5), 1.75em 1.75em 0 0em rgba(187,255,187, 0.7), 0em 2.5em 0 0em #bbffbb, -1.8em 1.8em 0 0em rgba(187,255,187, 0.2), -2.6em 0em 0 0em rgba(187,255,187, 0.2), -1.8em -1.8em 0 0em rgba(187,255,187, 0.2);
    }
    62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(187,255,187, 0.2), 1.8em -1.8em 0 0em rgba(187,255,187, 0.2), 2.5em 0em 0 0em rgba(187,255,187, 0.2), 1.75em 1.75em 0 0em rgba(187,255,187, 0.5), 0em 2.5em 0 0em rgba(187,255,187, 0.7), -1.8em 1.8em 0 0em #bbffbb, -2.6em 0em 0 0em rgba(187,255,187, 0.2), -1.8em -1.8em 0 0em rgba(187,255,187, 0.2);
    }
    75% {
    box-shadow: 0em -2.6em 0em 0em rgba(187,255,187, 0.2), 1.8em -1.8em 0 0em rgba(187,255,187, 0.2), 2.5em 0em 0 0em rgba(187,255,187, 0.2), 1.75em 1.75em 0 0em rgba(187,255,187, 0.2), 0em 2.5em 0 0em rgba(187,255,187, 0.5), -1.8em 1.8em 0 0em rgba(187,255,187, 0.7), -2.6em 0em 0 0em #bbffbb, -1.8em -1.8em 0 0em rgba(187,255,187, 0.2);
    }
    87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(187,255,187, 0.2), 1.8em -1.8em 0 0em rgba(187,255,187, 0.2), 2.5em 0em 0 0em rgba(187,255,187, 0.2), 1.75em 1.75em 0 0em rgba(187,255,187, 0.2), 0em 2.5em 0 0em rgba(187,255,187, 0.2), -1.8em 1.8em 0 0em rgba(187,255,187, 0.5), -2.6em 0em 0 0em rgba(187,255,187, 0.7), -1.8em -1.8em 0 0em #bbffbb;
    }
}

#copyright{
    position: fixed;
    display: inline-block;
    left: 0px;
    bottom: 0px;
    text-align: center;
    font-family: 'pixelar';
    font-size: 1em;
    background-color: #000;
    border-right: 4px solid grey;
    border-top: 4px solid grey;
    padding: 1px 5px;
}

#copyright a {
    color: #ea5aa5;
}


#legal {
    position: fixed;
    display: inline-block;
    right: 0px;
    bottom: 0px;
    text-align: center;
    font-family: 'pixelar';
    font-size: 1em;
    background-color: #000;
    border-top-left-radius: 3px;
    padding: 1px 5px;
}

#legal a {
    color: grey;
}

#bg{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: -100
}

#bg div {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 200vh;
    z-index: -100;
    background-repeat: repeat;
}

#bglarge{
    background-image: url("../images/bgstarslarge.png");
}

#bgsmall{
    background-image: url("../images/bgstarssmall.png");
}

.contrib-resource {
        margin-bottom: 1em;
}

.person  {
    color: darkorange;
}

.person a {
    color: orange;
}

.contrib-resource .person::before {
    color: grey;
    content: " by ";
}

.contrib-resource .description {
    display: block;
    padding-left: 1em;
}

img.endorsement {
    height: 3em;
    float: right;
    margin-right: 1.5em;
    margin-left: 0.5em;
}

.center {
    text-align: center;
}

.blog-panes {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: flex-start;
}

.blog-panes .blog-entries {
    order: 0;
    flex: 1 1 auto;
    align-self: auto;

}

.blog-panes .blog-nav {
    order: 0;
    flex: 1 0 auto;
    align-self: auto;
}

.blog-nav .blog-nav-entry-epoch {
    color: #888;
    display: inline-block;
    min-width: 6ch;
}

.blog-tag {
    display: inline-block;
    padding: 7px;
    color: grey;
}

.gray {
    color: gray;
}

img.external-link {
    height: 0.7em;
    padding-left: 3px;
    padding-bottom: 0.2em;
}

.moment-img {
    max-width: 100% !important;
    height: auto;
}

.random-mooncat-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content: center;
    align-items: center;
}

.random-mooncat-bar .random-mooncat {
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
}

.random-mooncat-bar img {
    max-width: 300px;
}

.mobile {
    display: none;
}

@media screen and (max-width: 1000px) {
    .desktop {
        display: none;
    }
    .mobile {
        display: block;
    }

    h1 {
        font-size: 3em;
    }

    .random-mooncat-bar .random-mooncat {
        display: none;
    }
    .random-mooncat-bar .random-mooncat:first-child {
        display: flex;
    }
}

.popout-image-thumbnail {
    text-align: center;
    position: relative;
}

.popout-image-thumbnail img {
    max-width: 200px;
    transition: all 0.2s ease-out;
    border: 3px solid #4A235A;
}

.popout-image-thumbnail:hover img {
    max-width: 80%;
}

.primary-action-bar {

    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    align-items: center;
}

.primary-action-bar > button , .primary-action-bar > .button {

    order: 0;
    flex: 1 1 20%;
    align-self: auto;

    font-size: 1.2em;

}

.primary-action-bar .quicklink {
    order: 0;
    flex: 1 1 20%;
    align-self: auto;
    font-size: 1.2em;
    text-align: center;
}

.yellow {
    color: yellow;
}

@media screen and (max-width: 1000px) {
    .primary-action-bar > button , .primary-action-bar > .button {
        flex: 1 1 40%;
    }
    .primary-action-bar > .quicklink {
        flex: 1 1 80%;
    }
    #welcome {
        flex-basis: auto;
    }
    #sidebar {
        font-size: 1rem;
        line-height: 1.5em;
        flex-grow: 1;
    }
    img.article-thumbnail-right {
        float:right;
        margin-left: 1em;
    }

}

@media screen and (max-width: 800px) {
    .primary-action-bar > button , .primary-action-bar > .button {
        flex: 1 1 100%;
    }
}