body {
    background-color: #fc3463;
    color: #e4e8ee;
    font-family: "Google Sans";
    font-size: 2dvh;
    overflow: hidden;
    cursor: default;
    text-transform: lowercase;
}
.container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    cursor: default;
}
.graph {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50dvw;
    overflow: hidden;
    cursor: default;
    display: flex;
    flex-direction: column;
    vertical-align: middle;
    justify-content: center;
    /*transform: perspective(1000px) translate3d(20px, 100px, 90px) rotatex(50deg) rotatey(-10deg) rotatez(10deg) scalex(1.6) scaley(1.6);*/
}
.right-border {
    position: absolute;
    background-color: #e4e8ee;
    width: 2px;
    top: 0;
    bottom: 15dvh;
    right: 50dvw;
    z-index: 2;
}
#title {
    position: absolute;
    right: 0;
    width: 50%;
    height: 85%;
    color: #e4e8ee;
    font-size: 4dvh;
    writing-mode: sideways-lr;
    font-family: "Google Sans";
    text-transform: uppercase;
    display: flex;
    justify-content: space-evenly;
    pointer-events: none;
}
#title .squ {
    position: absolute;
    top: 0;
    width: 5dvh;
    height: 5dvh;
    background-color: #03CB9C;
}
#title div {
    pointer-events: none;
}
.linkrow {
    display: flex;
    flex-direction: row;
    justify-content: center;
    vertical-align: middle;
}
.linkbox {
    width: 5dvh;
    height: 5dvh;
    display: flex;
    background-color: #e4e8ee;
    transition: background-color 0.5s;
}
.themebox {
    width: 5dvh;
    height: 5dvh;
    display: flex;
    background-color: transparent;
    outline: 1dvh solid #e4e8ee;
    outline-offset: calc(-1dvh + 1px);
}
.hconnect {
    width: 1.5dvh;
    height: 5dvh;
    background-color:   #e4e8ee;
    clip-path: polygon(0 2dvh, 110% 2dvh, 110% 3dvh, 0 3dvh);
}
.spacer-box {
    width: 5dvh;
    height: 1.5dvh;
}
.spacer-hc {
    width: 1.5dvh;
    height: 1.5dvh;
}
.vconnect {
    width: 5dvh;
    height: 1.5dvh;
    background-color: #e4e8ee;
    clip-path: polygon(2dvh 0, 2dvh 110%, 3dvh 110%, 3dvh 0);
}
.lb-empty {
    width: 5dvh;
    height: 5dvh;
}
.hc-empty {
    width: 1.5dvh;
    height: 5dvh;
}
.lb-hc {
    width: 5dvh;
    height: 5dvh;
    background-color: #e4e8ee;
    clip-path: polygon(0 2dvh, 110% 2dvh, 110% 3dvh, 0 3dvh);
}
.lb-vc {
    width: 5dvh;
    height: 5dvh;
    background-color: #e4e8ee;
    clip-path: polygon(2dvh 0, 2dvh 110%, 3dvh 110%, 3dvh 0);
}
.lb-bl-corner {
    width: 5dvh;
    height: 5dvh;
    background-color: #e4e8ee;
    clip-path: polygon(2dvh 0, 2dvh 3dvh, 110% 3dvh, 110% 2dvh, 3dvh 2dvh, 3dvh 0);
}
.lb-tl-corner {
    width: 5dvh;
    height: 5dvh;
    background-color: #e4e8ee;
    clip-path: polygon(110% 2dvh, 110% 3dvh, 3dvh 3dvh, 3dvh 110%, 2dvh 110%, 2dvh 2dvh);
}
.lb-br-corner {
    width: 5dvh;
    height: 5dvh;
    background-color: #e4e8ee;
    clip-path: polygon(2dvh 0, 3dvh 0, 3dvh 3dvh, 0 3dvh, 0 2dvh, 2dvh 2dvh);
}
.lb-tr-corner {
    width: 5dvh;
    height: 5dvh;
    background-color: #e4e8ee;
    clip-path: polygon(0 2dvh, 3dvh 2dvh, 3dvh 110%, 2dvh 110%, 2dvh 3dvh, 0 3dvh);
}
.lb-intersect {
    width: 5dvh;
    height: 5dvh;
    background-color: #e4e8ee;
    clip-path: polygon(0 2dvh, 2dvh 2dvh, 2dvh 0, 3dvh 0, 3dvh 2dvh, 110% 2dvh, 110% 3dvh, 3dvh 3dvh, 3dvh 110%, 2dvh 110%, 2dvh 3dvh, 0 3dvh);
}
.lb-lt {
    width: 5dvh;
    height: 5dvh;
    background-color: #e4e8ee;
    clip-path: polygon(0 2dvh, 2dvh 2dvh, 2dvh 0, 3dvh 0, 3dvh 110%, 2dvh 110%, 2dvh 3dvh, 0 3dvh);
}
.selected {
    width: 5dvh;
    height: 5dvh;
    background-color: #03CB9C;
    border: none;
    clip-path: none;
}
.pselected {
    width: 5dvh;
    height: 5dvh;
    background-color: #ffd801;
    border: none;
    clip-path: none;
}
.fselected {
    width: 5dvh;
    height: 5dvh;
    background-color: #f74998;
    border: none;
    clip-path: none;
}
#location {
    position: absolute;
    top: 0;
    right: 0;
}
.num-accent {
    position: absolute;
    bottom: 0;
    right: 2dvh;
    font-family: "NIN";
    font-size: 14dvh;
}
.nav {
    width: calc(50dvw - 6dvh);
    height: 13dvh;
    background-color: #e4e8ee;
    color: #fc3463;
    text-transform: uppercase;
    font-family: "Google Sans";
    font-size: 5dvh;
    position: absolute;
    right: 0;
    top: 13dvh;
}
.nav .controls {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.nav .ntitle {
    position: absolute;
    top: 0;
    left: 1dvh;
}
.crow {
    display: flex;
    flex-direction: row;
}
.csquare {
    width: 5dvh;
    height: 5dvh;
}
.crspacer {
    width: 1dvh;
}
.chspacer {
    height: 1dvh;
}
.carrow {
    width: calc(5dvh - 6px);
    height: calc(5dvh - 4px);
    padding-left: 2px;
    border: 2px solid #fc3463;
    background-color: transparent;
    color: #fc3463;
    font-size: 2dvh;
}
.cespace {
    width: 12.5dvh;
    height: 5dvh;
}
.cspace {
    width: calc(12.5dvh - 6px);
    height: calc(5dvh - 4px);
    padding-left: 2px;
    background-color: transparent;
    border: 2px solid #fc3463;
    color: #fc3463;
    font-size: 2dvh;
}
.cselect {
    background-color: #fc3463;
    color: #e4e8ee;
}
.pselect {
    background-color: #ffd801;
    color: #e4e8ee;
}
.fselect {
    background-color: #f74998;
    color: #e4e8ee;
}
#infobar {
    position: absolute;
    left: calc(50dvw + 6dvh);
    right: 0;
    top: 27dvh;
    color: #e4e8ee;
    font-size: 3.4dvh;
}
#trackname {
    display: none;
}
#volume {
    position: absolute;
    width: 25dvw;
    bottom: 20dvh;
    right: 4dvh;
    display: none;
}
#icircle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50%, transparent, transparent 14%, #8e03af 14%, #8e03af 20%, transparent 20%);
    display: none;
}
input[type="range"] {
    -webkit-appearance: none;
    background: transparent;
    justify-content: center;
    width: 100%;
}
input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: transparent;
    height: 5dvh;
    width: 100%;
    border: 2px solid #e4e8ee;
    display: inline-flex;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #03CB9C;
	height: 5dvh;
    width: 1dvh;
    border-radius: 0;
    border: none;
}
input[type="range"]::-moz-range-thumb {
    background-color: #03CB9C;
    width: 2.5dvh;
    height: 5dvh;
    border-radius: 0;
    border: none;
}
input[type="range"]::-moz-range-track {
    background: transparent;
    height: 5dvh;
    width: 100%;
    border: 2px solid #e4e8ee;
}
#x-accents {
    position: absolute;
    background-color: #e4e8ee;
    color: #fc3463;
    top: 46dvh;
    bottom: 26dvh;
    right: 0;
    left: calc(50dvw + 6dvh);
    overflow: hidden;
    pointer-events: none;
    clip-path: polygon(0 0, 41dvw 0, 37dvw 50%, 41dvw 100%, 0 100%);
}
#big-x {
    position: absolute;
    top: -7dvh;
    right: 1dvh;
    font-size: 44dvh;
    line-height: 1;
}
.sideslash {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 6dvw;
    background: repeating-linear-gradient(45deg, transparent, transparent 4dvh, #e4e8ee 4dvh, #e4e8ee 8dvh);
}