:root {
    --lexicon-closed-top: -380px;
    --lexicon-opened-top: -16px;
    --lexicon-width: 400px;
    --lexicon-height: 400px;
    --lexicon-display-height: calc(var(--lexicon-height) * 0.77);

    --radar-diameter: 400px;
    --radar-radius: calc(var(--radar-diameter) / 2);
    --range-ring-r1: calc(var(--radar-radius) * 3/4);
    --range-ring-r2: calc(var(--radar-radius) * 2/4);
    --range-ring-r3: calc(var(--radar-radius) * 1/4);
    --range-ring-d1: calc(var(--range-ring-r1) * 2);
    --range-ring-d2: calc(var(--range-ring-r2) * 2);
    --range-ring-d3: calc(var(--range-ring-r3) * 2);

    --range-ring-d_c: 10px;

    --dashboard-width: 500px;
    --dashboard-height: calc(var(--radar-diameter) + 80px);
}
@keyframes oscillate-background {
  0%, 100% {background-position: 0% 0%}
  50%      {background-position: 100% 0%}
}

* {
    font-family: 'Courier New', Courier, monospace;
    margin: 0
}
pre {
    text-wrap: wrap;
    overflow: hidden;
}

body {
    height: 100vh;
    background: linear-gradient(45deg, #0f0f0f, black);
    background-size: 200% 100%;
    animation: oscillate-background 60s ease-in-out infinite;
}
#main {
    height: 100vh;
    margin: auto;
    background:
        radial-gradient(ellipse closest-corner at 50% 140%, #292a2b 90%, #555759 120%, rgba(0, 0, 0, 0) 0%),
        linear-gradient(40deg, #051a2b 30%, rgba(0, 0, 0, 0) 0%),
        linear-gradient(320deg, #041421 30%, rgba(0, 0, 0, 0) 0%),
        radial-gradient(ellipse closest-corner at 50% 180%, #051828 112%, rgba(0, 0, 0, 0) 0%),
        linear-gradient(42deg, #071e34 31%, rgba(0, 0, 0, 0) 0%),
        linear-gradient(318deg, #030e18 31%, rgba(0, 0, 0, 0) 0%);
}

#dashboard-container {
    overflow: auto;
}
#dashboard {
    margin: auto;
    margin-top: 40px;
    padding: 8px 2px;
    border: 8px outset black;
    width: var(--dashboard-width);
    height: var(--dashboard-height);
    display: flex;
    background-color: #5d5e63;
}
#stats-display {
    overflow-y: visible;
    width: 0;
}
#radar, .range-ring {
    position: relative;
    margin: auto;
    margin-top: 49px;
    border: 1px solid #58c9d1;
}
#radar {
    width: var(--radar-diameter);
    height: var(--radar-diameter);
    border-radius: var(--radar-radius);
    border: 1px solid black;
    background: conic-gradient(#0a2136 358deg, #5bd4f9 360deg, #5bd4f9);
    
    #range-ring-1 {
        width: var(--range-ring-d1);
        height: var(--range-ring-d1);
        border-radius: var(--range-ring-r1);
    }
    #range-ring-2 {
        width: var(--range-ring-d2);
        height: var(--range-ring-d2);
        border-radius: var(--range-ring-r2);
    }
    #range-ring-3 {
        width: var(--range-ring-d3);
        height: var(--range-ring-d3);
        border-radius: var(--range-ring-r3);
    }
    #range-ring-center {
        margin-top: 43.5px;
        width: var(--range-ring-d_c);
        height: var(--range-ring-d_c);
        border-radius: var(--range-ring-d_c);
    }
}
.radar-sweep {
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-name: radar-sweep;
}
@keyframes radar-sweep {
    0% {
        background: conic-gradient(from 36deg, #0a2136 315deg, #5bd4f9 358deg, #5bd4f9);
    }
    10% {
        background: conic-gradient(from 72deg, #0a2136 315deg, #5bd4f9 358deg, #5bd4f9);
    }
    20% {
        background: conic-gradient(from 108deg, #0a2136 315deg, #5bd4f9 358deg, #5bd4f9);
    }
    30% {
        background: conic-gradient(from 144deg, #0a2136 315deg, #5bd4f9 358deg, #5bd4f9);
    }
    40% {
        background: conic-gradient(from 180deg, #0a2136 315deg, #5bd4f9 358deg, #5bd4f9);
    }
    50% {
        background: conic-gradient(from 216deg, #0a2136 315deg, #5bd4f9 358deg, #5bd4f9);
    }
    60% {
        background: conic-gradient(from 252deg, #0a2136 315deg, #5bd4f9 358deg, #5bd4f9);
    }
    70% {
        background: conic-gradient(from 288deg, #0a2136 315deg, #5bd4f9 358deg, #5bd4f9);
    }
    80% {
        background: conic-gradient(from 324deg, #0a2136 315deg, #5bd4f9 358deg, #5bd4f9);
    }
    90% {
        background: conic-gradient(from 360deg, #0a2136 315deg, #5bd4f9 358deg, #5bd4f9);
    }
    100% {
        background: conic-gradient(from 36deg, #0a2136 315deg, #5bd4f9 358deg, #5bd4f9);
    }
}

#lexicon {
    position: fixed;
    width: var(--lexicon-width);
    height: var(--lexicon-height);
    border: 5px solid rgb(42, 42, 42);
    border-radius: 16px;
    margin: auto;
    left: 0;
    right: 0;
    box-shadow: 0 16px 6px 8px;
    background-color: #393a3c;
    transition-property: top;
    transition-duration: 0.18s;
    transition-timing-function: ease-out;
    overflow: hidden;

    > h2 {
        margin-top: 18px;
        margin-left: 2px;
        margin-bottom: 8px;
        user-select: none;
    }
}
#lexicon.closed:hover {
    cursor: pointer;
}
.lexicon-tutorial {
    animation-duration: 0.8s;
    animation-timing-function: ease-out;
    animation-delay: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-name: pulse;
}
@keyframes pulse {
    from {
        box-shadow:
        0 0,
        0 16px 6px 8px
    }
    to {
        box-shadow:
        0 0 10px yellow,
        0 16px 6px 8px
    }
}
#lexicon-display {
    border: 5px inset black;
    margin: 12px;
    margin-top: 0;
    padding: 0 4px;
    background-color: aquamarine;
}
#lexicon-display-body {
    height: var(--lexicon-display-height);
}
#lexicon-display-footer {
    height: calc(1em + 2px);
    text-align: right;
}