html {
    --bg: #000000;
    --green: #c6fe00;
    --dark: #0a0a0a;
    --red: #ff0056;
    --redfaint: #ff0056aa;
    --other: #c6fe00;
    --white: white;
    --purple: #e658ff;
    --purplefaint: #d19aff;
    --blue: #babdfb;
}
body {
    background-color: var(--bg);
    font-family: "Luna Obscura";
    cursor: default;
}
.container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
}
#gfx {
    width: 1000px;
    height: 430px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotatez(-15deg);
    -webkit-backface-visibility: hidden;
}
#innertext {
    position: absolute;
    top: 12px;
    left: 0;
    z-index: 0;
    color: var(--white);
    font-family: "Turing Abstract";
    height: 430px;
    width: 400px;
    overflow: hidden;
    font-size: 8px;
}
#rectbar {
    position: absolute;
    top: 0;
    right: 0;
    height: 390px;
    width: 600px;
    background: repeating-linear-gradient(transparent, transparent 12px, var(--dark) 12px, var(--dark) 24px);
}
#circle {
    position: absolute;
    top: 15px;
    right: 20px;
    background-color: var(--green);
    width: 360px;
    height: 360px;
    clip-path: circle(180px at 180px);
    display: flex;
    justify-content: center;
    align-items: center;
}
#innercircle {
    width: 160px;
    height: 160px;
    clip-path: circle(80px at 80px);
    background-color: var(--dark);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
}
#title {
    position: absolute;
    top: 400px;
    right: 200px;
    color: var(--white);
    font-size: 16px;
}
#longbar {
    position: absolute;
    top: 420px;
    right: 100px;
    height: 10px;
    width: 510px;
}
#shortbar {
    position: absolute;
    top: 420px;
    right: 640px;
    height: 10px;
    width: 30px;
}
#rightbar {
    position: absolute;
    top: 415px;
    right: 30px;
    height: 10px;
    width: 30px;
}
.purple {
    background-color: var(--purple);
}
.circle {
    position: absolute;
    height: 40px;
    width: 40px;
    clip-path: circle(20px at 20px);
}
a:hover {
    cursor: crosshair;
}
.red {
    background-color: var(--red);
}
.red:hover {
    background-color: var(--green);
}
.blue {
    background-color: var(--blue);
}
.blue:hover {
    background-color: var(--purple);
}
.green {
    background-color: var(--green);
}
.green:hover {
    background-color: var(--blue);
}
.purple {
    background-color: var(--purple);
}
.purple:hover {
    background-color: var(--red);
}
.top {
    top: 80px;
    right: 610px;
}
.mid {
    top: 125px;
    right: 610px;
}
.bot {
    top: 170px;
    right: 610px;
}
.faded {
    background-color: var(--redfaint);
}
.sqbot {
    top: 235px;
    right: 610px; 
}
.sqleft {
    top: 100px;
    right: 660px;
}
.square {
    position: absolute;
    width: 50px;
    height: 50px;
}
.dsquare {
    position: absolute;
    width: 50px;
    height: 80px;
}
#hovertext {
    position: absolute;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotatez(-15deg);
    -webkit-backface-visibility: hidden;
    -webkit-background-clip: content-box;
    background-clip: content-box;
    outline: 1px solid transparent;
    border: 2px solid var(--red);
    color: var(--white);
    background-color: var(--dark);
    display: none;
    font-size: 14px;
    z-index: 2;
}
#grect {
    position: absolute;
    top: 12px;
    right: 610px;
    height: 16px;
    width: 80px;
    border-radius: 4px;
}
.leftsq {
    position: absolute;
    top: 24px;
    left: 0;
    width: 60px;
    height: 100px;
}
.midc {
    top: 125px;
    right: 720px;
}
#midslash {
    position: absolute;
    top: 240px;
    left: 20px;
    width: 40px;
    height: 100px;
    background: repeating-linear-gradient(var(--white), var(--white) 2px, transparent 2px, transparent 6px);
}
input[type="range"] {
    position: absolute;
    -webkit-appearance: none;
    background: none;
    display: flexbox;
    height: 10px;
    width: 510px;
    transform: translatex(-2px) translatey(-1px);
    justify-content: left;
    vertical-align: middle;
    pointer-events: all;
}
input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: none;
    height: 10px;
    width: 510px;
    border: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: var(--green);
    width: 10px;
    height: 10px;
    border-radius: 0;
    border: none;
}
input[type="range"]::-moz-range-thumb {
    background-color: var(--green);
    width: 10px;
    height: 10px;
    border-radius: 0;
    border: none;
}
input[type="range"]::-moz-range-track {
    background: none;
    height: 10px;
    width: 510px;
    border: none;
}
#vid {
    display: none;
}