html {
    --bg: #101020;
    --c: #20fbfb;
    --m: #ff00ff;
    --y: #ffff00;
    --y-op: #ffff0030;
    --c-op: #20fbfb30;
    --m-op: #ff00ff30;
    --ten: 10dvh;
}
body {
    background-color: var(--bg);
    overflow: hidden;
    font-family: monospace;
    cursor: default;
    transition-property: all;
    transition-duration: 1s;
}
#title-box {
    position: relative;
    height: 6em;
    pointer-events: none;
    transition-property: inherit;
    transition-duration: inherit;
}
#title {
    position: relative;
    color: var(--c);
    font-size: 4em;
    z-index: 1;
    transition-property: inherit;
    transition-duration: inherit;
}
#subtitle {
    position: absolute;
    color: var(--y);
    top: 1em;
    left: 7em;
    font-size: 2.5em;
    z-index: 2;
    transition-property: inherit;
    transition-duration: inherit;
}
#title-bar {
    position: absolute;
    left: 0;
    top: 1em;
    height: 2em;
    width: 40dvw;
    background-color: var(--m);
    z-index: 0;
    pointer-events: auto;
    transition-property: inherit;
    transition-duration: inherit;
}
#bar {
    background: linear-gradient(to bottom, var(--c), var(--c) 33%, var(--m) 33%, var(--m) 67%, var(--y) 67%, var(--y) 100%);
    width: 1em;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    transition-property: inherit;
    transition-duration: inherit;
}
#constrained {
    position: absolute;
    border: 1px solid black;
    height: 360px;
    width: 980px;
    top: 3em;
    right: 2em;
    z-index: 2;
    transition-property: inherit;
    transition-duration: inherit;
}
#coninfo {
    position: absolute;
    top: calc(3em + 350px);
    right: 4em;
    width: 1000px;
    padding: 1em;
    background-color: var(--c-op);
    color: var(--m);
    display: flex;
    flex-direction: column-reverse;
    z-index: -1;
    transition-property: inherit;
    transition-duration: inherit;
}
#coninfo a {
    color: var(--y);
    cursor: crosshair;
    transition-property: inherit;
    transition-duration: inherit;
}
#coninfo a:hover {
    color: var(--m);
    background-color: var(--y);
}
#conbg {
    position: absolute;
    top: calc(3em + 350px);
    right: 4em;
    width: 1000px;
    padding: 1em;
    background-color: var(--bg);
    color: var(--bg);
    z-index: -1;
    transition-property: inherit;
    transition-duration: inherit;
}
#info {
    position: relative;
    width: 30dvw;
    background-color: var(--y-op);
    color: var(--m);
    padding: 1em;
    transition-property: inherit;
    transition-duration: inherit;
}
#info b {
    color: var(--c);
    text-transform: uppercase;
    transition-property: inherit;
    transition-duration: inherit;
}
#info a {
    color: var(--y);
    cursor: crosshair;
    transition-property: inherit;
    transition-duration: inherit;
}
#info a:hover {
    color: var(--m);
    background-color: var(--y);
}
#nav {
    position: absolute;
    bottom: 2em;
    background-color: var(--m-op);
    color: var(--c);
    font-size: 1.5em;
    padding-right: 1em;
    transition-property: inherit;
    transition-duration: inherit;
}
#nav a {
    color: var(--y);
    cursor: crosshair;
    transition-property: inherit;
    transition-duration: inherit;
}
#nav a:hover {
    color: var(--m);
    background-color: var(--y);
}
#volbox {
    position: absolute;
    right: 2em;
    bottom: 1em;
    transition-property: inherit;
    transition-duration: inherit;
}
#vol {
    display: none;
    transition-property: inherit;
    transition-duration: inherit;
}
input[type="range"] {
  -webkit-appearance: none;
  background: transparent;
  justify-content: center;
}
input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: var(--y);
  width: 100%;
  border: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: var(--c);
  width: 1dvh;
  height: 1.25dvh;
  border-radius: 0;
  border: 1px solid var(--c);
}
input[type="range"]::-moz-range-thumb {
  background-color: var(--c);
  width: 0.75dvh;
  height: 1.25dvh;
  border-radius: 0;
  border: 1px solid var(--c);
}
input[type="range"]::-moz-range-track {
  background: var(--m);
  height: 1.25dvh;
  width: 100%;
  border: none;
}
#vol {
  width: 90%;
}
.intersect {
    position: absolute;
    width: 130dvh;
    height: 100dvh;
    left: calc(50dvw - 65dvh);
    top: 0;
    display: flex;
    flex-direction: row;
    z-index: -2;
    transition-property: inherit;
    transition-duration: inherit;
}
.circle {
    position: absolute;
    clip-path: circle(50%);
    width: 60dvh;
    height: 60dvh;
    transition-property: inherit;
    transition-duration: inherit;
}
.mult {
    mix-blend-mode: multiply;
}
.top-clip {
    clip-path: polygon(0 0, 0 50%, 100% 55%, 100% 0);
}
.y {
    background-color: var(--y);
    top: 0;
    left: calc(50% - 30dvh);
}
.m {
    background-color: var(--m);
    bottom: 0;
    left: var(--ten);
}
.c {
    background-color: var(--c);
    bottom: 0;
    right: var(--ten);
}
.mid-clip {
    clip-path: polygon(0 calc(50% - 1px), 100% calc(55% - 1px), 100% 57%, 0 52%);
}
.y2 {
    background-color: var(--y);
    top: 0;
    left: calc(50% - 36dvh);
}
.m2 {
    background-color: var(--m);
    bottom: 0;
    left: calc(var(--ten) - 6dvh);
}
.c2 {
    background-color: var(--c);
    bottom: 0;
    right: calc(var(--ten) + 6dvh);
}
.mid2-clip {
    clip-path: polygon(0 calc(52% - 1px), 100% calc(57% - 1px), 100% 100%, 0 100%);
}
.y3 {
    background-color: var(--y);
    top: 0;
    left: calc(50% - 27dvh);
}
.m3 {
    background-color: var(--m);
    bottom: 0;
    left: calc(var(--ten) + 3dvh);
}
.c3 {
    background-color: var(--c);
    bottom: 0;
    right: calc(var(--ten) - 3dvh);
}
.mid3-clip {
    clip-path: polygon(0 calc(53% - 1px), 100% calc(58% - 1px), 100% calc(58% + 3px), 0 calc(53% + 3px));
    mix-blend-mode: color-burn;
}
.y4 {
    background-color: var(--y);
    top: 0;
    left: calc(50% - 22dvh);
}
.m4 {
    background-color: var(--m);
    bottom: 0;
    left: calc(var(--ten) + 8dvh);
}
.c4 {
    background-color: var(--c);
    bottom: 0;
    right: calc(var(--ten) - 8dvh);
}