* {
    box-sizing: border-box; border: 0; padding: 0; margin: 0;
    font-family: Roboto, "Public Sans Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 12.5pt;
}

*::placeholder {color: #888;}
::selection {color: #FFF !important; background: #0B3D91 !important;}
*::selection, *::-moz-selection {color: #FFF !important; background: #0B3D91 !important;}
div.clearfix::after {content: ""; display: table; clear: both;}

body {
    overflow-x: hidden;
    background: #000;
}

.parallax-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #000;
    text-align: center;
    pointer-events: none;
}
.parallax-background img {
    position: relative;
    top: 0;
    width: 100vw;
    transform: translateY(0px);
}

#background {
    z-index: 1;
}

#page {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

h4 {
    display: inline-block;
    font-weight: bold;
    font-size: 17pt;
    margin-bottom: 10pt;
}
h4:hover {
    text-decoration: underline;
    text-decoration-style: dashed;
}

a:hover {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 4pt;
}

.button {
    display: inline-block;
    cursor: pointer;
    color: #FFF;
    font-size: 16pt;
    font-weight: 700;
    text-decoration: none !important;
    padding: 6pt 12pt;
    border-radius: 3pt;
    margin-top: 3pt;
    line-height: 1;
}
a.button:hover {
    filter: saturate(1.3) !important;
}
svg.button:hover {
    filter: saturate(1.3) drop-shadow(0 0 6pt #888) !important;
}
a.button.inactive:hover {
    color: #E5ECF7 !important;
}

#cover {
    padding: 27pt 24pt 29pt 24pt;
}
#cover-text {
    color: #FFF;
}
#cover-text * {
    color: #FFF;
    filter: drop-shadow(0pt .25pt 2pt #88888844);
}
#cover-text h3 {
    display: block;
    max-width: 62.5%;
    font-size: 40pt;
    margin: 0 0 16pt -1pt;
    font-weight: 700;
    text-shadow: 1pt 1pt 3pt #000;
}
#cover-text h3 nobr {
    font-size: 40pt;
    margin: 0 0 16pt -1pt;
    font-weight: 700;
    text-shadow: 1pt 1pt 3pt #000;
}
#cover-text a {
    font-weight: bold;
    text-decoration: none;
}
#cover-text a:hover span {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 4pt;
}
#cover-text p {
    font-size: 13pt;
    line-height: 1.65;
    max-width: 62.5%;
    margin-bottom: 20pt;
}
#cover-cellar div {
    display: inline-block;
    margin: 28pt 32pt 0 0;
    white-space: nowrap;
    padding-top: 16pt;
    border-top: 1px solid #888888BB;
}
#cover-cellar h6 {
    margin-bottom: 13pt;
    font-family: "DM Mono", monospace;
    font-size: 11pt;
    font-weight: 200;
    font-variant: all-small-caps;
    letter-spacing: 1pt;
}
#cover .button {
    box-shadow: 4pt 0pt 6pt 4pt #00000066;
}
#cover .button.bg-nasa-red.inactive {
    background: #AAA !important;
}
#cover .button.bg-nasa-red.inactive:hover {
    color: #FFF !important;
    background: #888 !important;
}

.full-width {width: 100vw !important;}
.extended-width {margin: 0 auto; max-width: 1760px;}
.medium-width {margin: 0 auto; max-width: 1440px;}
.app-extended-width {margin: 0 auto; max-width: 17.7in;}
.app-width {margin: 0 auto; max-width: 17in;}

.black-bg {background: #000;}

.bright-content-wrapper {padding: 24pt; color: #000; background: #FFF;}
.bright-content-wrapper a.title {display: block; color: #000; font-weight: bold; text-decoration: none;}
.bright-content-wrapper a.title:hover h4 {text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 4pt;}
.dark-content-wrapper {padding: 24pt 24pt 28pt 24pt; color: #FFF; background: #000; margin: 0 auto; width: fit-content;}
.dark-content-wrapper a.title {display: block; color: #FFF; font-weight: bold; text-decoration: none;}
.dark-content-wrapper a.title:hover h4 {text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 4pt;}

.fg-nasa-white {color: #FFF; fill: #FFF;}
.fg-nasa-red {color: #F64137; fill: #F64137;}
.bg-nasa-red {background: #D83933; fill: #D83933;}
.bg-darkerred {background: #BB1100; fill: #BB1100;}

.rotate-0 {transform: rotate(0deg) !important; transition: all .5s ease-out;}
.rotate-45 {transform: rotate(-45deg); transition: all .5s ease-out;}
.rotate-180 {transform: rotate(540deg); transition: all .5s ease-out;}
.rotated-static15 {transform: rotate(15deg) translateX(3%);}
.rotated-90 {transform: rotate(90deg); transition: all .15s ease-out;}
.float-left-auto {width: 12cm; float: left; margin: 10pt 32pt 10pt 0pt;}
.float-left-200 {max-height: 200pt; max-width: 360pt; float: left; margin: 10pt;}
.float-right-auto {width: 12cm; float: right; margin: 10pt 0pt 10pt 32pt;}
.float-right-200 {max-height: 200pt; max-width: 360pt; float: right; margin: 10pt;}
.float-right-250 {max-height: 250pt; max-width: min(50vw, 480pt); float: right; margin: 10pt;}

a.tagged span::after {
    display: inline-block; position: relative; margin-left: 4pt; padding: 0 2pt;
    font-size: 8.5pt; font-family: "DM Mono", monospace; font-weight: normal;
    border-radius: 2pt; text-decoration: none !important;
    transition: all .65s ease-out;
}
a.tagged.live span::after {content: "LIVE"; color: #FFF; border: 1px solid #F64137; top: -1.4pt;}
a.tagged.live:hover span::after {background: #D71101DD;}
a.tagged.beta span::after {content: "BETA"; color: #E0ECF9; border: 1px solid #4F74B0; top: -.8pt; margin-left: 5pt;}
a.tagged.beta:hover span::after {color: #4F74B0; background: #E0ECF9;}

a svg {position: relative; top: 2.5pt; margin-left: 3pt; height: 14pt; width: 14pt;}
a.big-link svg {margin-left: 10pt; height: 17pt; width: 17pt;}
a:hover svg {filter: saturate(2) !important;}
a:hover .rotate-0 {transform: rotate(720deg) !important;}
a:hover .rotate-45 {transform: rotate(680deg);}