:root {
    --hud-box-pad: 5px;
    --hud-box-pad-2: 2.5px;
    --hud-pad-sm: 3px;
    --bg-clr-1: #000;
    --bg-clr-2: rgba(0, 0, 0, 0.75);
    --bg-clr-3: rgba(0,0,0,0.5);
    --hud-clr-light: #fff;
    --hud-clr-light-2: #ddd;
    --hud-clr-mid: #aaa;
    --hud-clr-1: #afb;
    --hud-clr-2: #4c7;
    --hud-clr-3: #2f7;
    --svg-clr-1: #f93;
    --svg-clr-2: #49f;
    --svg-clr-3: #4f8;
}

body {
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
    font-family: monospace;
    overflow: hidden;
}

canvas {
    width: 100%;
    height: 100%;
}

canvas.object-hover {
    cursor: pointer;
}

.hud-elmnt {
    position: fixed;
    margin: var(--hud-box-pad);
}


#tooltip {
    pointer-events: none;
    display: none;
    flex-direction: column;
    color: var(--hud-clr-light);
    border: 1px solid var(--hud-clr-light);
    background-color: var(--bg-clr-1);
    padding: var(--hud-pad-sm);
}
#tooltip.visible {
    display: flex;
}
#tooltip h3 {
    margin: 0;
}
#tooltip p {
    margin: 0;
}
.hud-lower-left {
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
}
#title-cntnr {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
#headings-cntnr {
    padding: var(--hud-box-pad);
    border: 1px dotted var(--hud-clr-light);
    background-color: var(--bg-clr-2);
}
#title-cntnr h1 {
    margin: 0;
    font-size: 1.3rem;
}
#title-cntnr h2 {
    font-size: 1.05rem;
    margin: 0;
    padding: 0 0 calc(var(--hud-box-pad) / 2) 0;
    font-weight: normal;
    border-bottom: 1px dotted var(--hud-clr-light-2);
}

#copyright-cntnr p {
    margin: calc(var(--hud-box-pad) / 2) 0 0 0;
    display: flex;
    justify-content: space-between;
}
#copyright-cntnr {
    color: #fff;
}

button {
    all: unset;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
button#fs-toggle {
    background-color: #1a1a1a;
    font-weight: bold;
    color: var(--hud-clr-3);
    padding: calc(var(--hud-box-pad) / 1.5) var(--hud-box-pad); 
    margin-top: var(--hud-box-pad);
    border: 1px solid var(--hud-clr-3);
    white-space: nowrap;
    text-align: center;;
}
button#fs-toggle.fs {
    background-color: #5a5a5a;
}
@media( hover: hover ) {
    button#fs-toggle:hover {
        background-color: #3a3a3a;
    }
}
button#fs-toggle:active {
    background-color: #5a5a5a;
}

#info-cntnr {
    margin: 0;
    border-right: 1px dotted var(--hud-clr-mid);
    border-top: 1px dotted var(--hud-clr-mid);
    color: var(--hud-clr-light-2);
}

#info-cntnr > * {
    margin-top: var(--hud-box-pad-2);
    margin-bottom: 0;
    padding: 0 var(--hud-box-pad) var(--hud-box-pad-2) var(--hud-box-pad);
    border-bottom: 1px dotted  var(--hud-clr-mid);
}
#info-cntnr > *:last-child {
    padding-bottom: var(--hud-box-pad);
    border: none;
}
#info-cntnr > div {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
}
#info-cntnr > div * {
    margin: 0;
}
.hud-lower-right {
    right: 0;
    bottom: 0;
}
#controls-cntnr {
    border-left: 1px dotted var(--hud-clr-mid);
    border-top: 1px dotted var(--hud-clr-mid);
    margin: 0;
    color: var(--hud-clr-light-2);
}
#controls-cntnr p {
    text-align: justify;
}
#controls-cntnr > * {
    margin-bottom: 0;
    margin-top: var(--hud-box-pad-2);
    padding: 0 var(--hud-box-pad) var(--hud-box-pad-2) var(--hud-box-pad);
    border-bottom: 1px dotted var(--hud-clr-mid);
}
#controls-cntnr > *:last-child {
    padding-bottom: var(--hud-box-pad);
    border-bottom: none;
}
#camera-controls > div {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
}
#controls-cntnr h4 {
    margin: 0;
}

.hud-upper-right {
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
}

.hud-upper-left {
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
}

#instructions-cntnr {
    width: 100%;
    border: 1px solid var(--hud-clr-light-2);
    margin-bottom: var(--hud-box-pad);
    background-color: var(--bg-clr-2);
}
#instructions-cntnr > p {
    margin: var(--hud-box-pad);
}
#instructions-cntnr > p:last-child {
    margin-top: 0;
}


#readouts-cntnr {
    width: 100%;
    border: 1px solid var(--hud-clr-3);
    color: var(--hud-clr-light);
    background-color: var(--bg-clr-2);
}

#orbits-cntnr .readout h4 {
    display: inline;
    margin: 0;
}
div.readout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.readout-sxn {
    border-bottom: 1px solid var(--hud-clr-3);
    padding: var(--hud-box-pad);
}
.readout-sxn:last-child {
    border-bottom: none;
}

.readout span.value {
    color: var(--hud-clr-1);
}
.readout span.units {
    color: var(--hud-clr-2);
}

#target-name  {
    color: var(--hud-clr-1);
}

#distance-readout .value {
    color: var(--hud-clr-1);
}
#distance-readout .units {
    color: var(--hud-clr-2);
}
#target-info-orbital {
    padding: 0;
}
#target-info-orbital > * {
    margin: 2px var(--hud-box-pad);
}
#target-info-orbital > *:first-child {
    margin-top: var(--hud-box-pad);
}
#target-info-orbital > *:last-child {
    margin-bottom: var(--hud-box-pad);
}
#target-info-orbital > *:nth-child(2n) {
    background-color: rgba(255, 255, 255, 0.1625);
}

#load-animation {
    width: 200px;
    height: 200px;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
}
#load-animation.loaded {
    display: none;
}
#load-animation > div {
    position: relative;
    width: 100%;
    height: 100%;
}
#load-animation svg {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#load-animation svg circle {
    stroke-width: 2;
}
#load-animation svg:first-child {
    animation: load-rotate 3.5s linear infinite;
}
#load-animation.loaded svg:first-child {
    animation: none;
}
#load-animation svg:first-child circle:first-child {
    fill: var(--bg-clr-3);
    stroke: var(--svg-clr-1);
}
#load-animation svg:first-child circle:last-child {
    fill: var(--svg-clr-1);
    stroke: var(--svg-clr-1);
}
#load-animation svg:nth-child(2) {
    animation: load-rotate 2.5s linear infinite;
}
#load-animation.loaded svg:nth-child(2) {
    animation: none;
}
#load-animation svg:nth-child(2) circle:first-child {
    fill: var(--bg-clr-3);
    stroke: var(--svg-clr-2);
}
#load-animation svg:nth-child(2) circle:last-child {
    fill: var(--svg-clr-2);
    stroke: var(--svg-clr-2);
}
#load-animation svg:nth-child(3) {
    animation: load-rotate 1.5s linear infinite;
}
#load-animation.loaded svg:nth-child(3) {
    animation: none;
}
#load-animation svg:nth-child(3) circle:first-child {
    fill: var(--bg-clr-3);
    stroke: var(--svg-clr-3);
}
#load-animation svg:nth-child(3) circle:last-child {
    fill: var(--svg-clr-3);
    stroke: var(--svg-clr-3);
}
#load-msg-cntnr {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#load-msg-cntnr h4 {
    margin: 0;
}

@keyframes load-rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-180deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}