@font-face{
  font-family:"unscii16";
  src: url("../fonts/unscii-16.woff") format("woff");
  font-display:swap;
}
body {
  --background-1:#111111;
  --background-2:#181818;
  --text-primary:#aaaaaa;
  --text-dark:#303030;
  --text-active:#FFFFFF;
  --text-shadow:#000000;
  --gradient-stop-0:#CC00FF;
  --gradient-stop-1:#7F00FF;
  --gradient-radial:rgba(204, 0, 255, 0.1);
  --gradient: linear-gradient(to top, var(--gradient-stop-1), var(--gradient-stop-0));
  --border-size: 1px;
  --border-size: max(0.1vmin, 1px);
  --font-size: 12px;
  --font-size: min(max(12px, 3vw), 26px);
  font-size: 12px;
  font-size: var(--font-size, 12px);
  line-height: 1;
  font-weight: normal;
  font-family: unscii16, Inconsolata, monospace;
  text-rendering: geometricPrecision;
}
h1, h2, h3, h4, h5, h6 {
  font-size:1em;
  font-weight: normal;
}
h1 a, h1 span, h1 li, a.active, span.active, li.active {
  color: var(--text-active);
  /* filter: drop-shadow(0.1vmin 0.1vmin 0.5vmin var(--gradient-stop-1)); */
  text-shadow: 1px 1px 2px var(--gradient-stop-1), 0 0 1vmin var(--gradient-stop-1), 0 0 5px var(--gradient-stop-1);
}
strong {
  color: var(--gradient-stop-1);
}
small {
  font-size: calc(6px + 1vmin);
  padding-left:1vmin;
  color: var(--gradient-stop-0);
}
pre {
  line-height: 1;
  font-weight: normal;
  font-family: unscii16, Inconsolata, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: min(max(12px, 3vw), 20px);
}
.highlight {
  color:white !important;
}
pre.Action {
    font-style: italic;
}
pre a {
  display: inline;
  color: var(--gradient-stop-1);
  padding: 0;
  white-space: unset;
  min-height: auto;
  height: auto;
  line-height: unset;
}
.canHover pre a:hover {
  color: var(--gradient-stop-0);
}

::-webkit-scrollbar {
    width: 8px;
    background-color: var(--background-2);
    border-left: var(--border-size) solid var(--text-primary);
    border-right: var(--border-size) solid var(--text-primary);
}
::-webkit-scrollbar-thumb {
    width: 8px;
    background-color: var(--gradient-stop-1);
}
::-webkit-scrollbar-track {
  background-color: rgba(0,0,0,0);
}
.rekt {
  --gradient-stop-0:#FD0000;
  --gradient-stop-1:#980000;
  --gradient-radial: rgba(0, 0, 0, 0);
}
.nightride {
  --gradient-stop-0: #CC00FF;
  --gradient-stop-1: #7F00FF;
  --gradient-radial: rgba(204, 0, 255, 0.1);
}
.rektory {
  --gradient-stop-0: #635340;
  --gradient-stop-1: #5f2f00;
  --gradient-radial: rgba(95, 47, 0, 0.25);
  -webkit-filter: sepia(0.7);
  filter: sepia(0.7);
}
.rektify {
  --gradient-stop-0: #009999;
  --gradient-stop-1: #005899;
  --gradient-radial: rgba(0, 153, 153, 0.1);
}
.darksynth {
  --gradient-stop-0: #fd0090;
  --gradient-stop-1: #2c0000;
  --gradient-radial: rgba(255, 0, 50, 0.1);
  -webkit-filter: saturate(1.3) contrast(1.3);
  filter: saturate(1.3) contrast(1.3);
}
.horrorsynth {
  --gradient-stop-0: rgb(0 255 0);
  --gradient-stop-1: #200000;
  --gradient-radial: rgb(0 255 0 / 10%);
  -webkit-filter: saturate(1.2) contrast(1.1);
  filter: saturate(1.2) contrast(1.1);
}
.spacesynth {
  --gradient-stop-0: #006d52;
  --gradient-stop-1: #240027;
  --gradient-radial: rgba(0, 0, 255, 0.1);
  -webkit-filter: saturate(1.2) contrast(1.1);
  filter: saturate(1.2) contrast(1.1);
}
.ebsm {
  --gradient-stop-0: #fff;
  --gradient-stop-1: #666;
  --gradient-radial: rgba(255, 255, 255, 0.1);
  -webkit-filter: saturate(0.1) contrast(1.5);
  filter: saturate(0.1) contrast(1.5);
}
.chillsynth {
  --background-1: #26303c;
  --background-2: #2b3a4c;
  --text-primary: #b5b0a7;
  --gradient-stop-1: #ffcba6;
  --gradient-stop-0: #f2eee5;
  --gradient: linear-gradient(to top, #375c77, #6f5b76, #c76c7f, #ff747b, #ffd6ae);
  --gradient-radial: rgba(255, 204, 164, 0.03);
}

* {
  position:relative;
  min-height:0;
  min-width:0;
  margin:0;
  padding:0;
  flex-direction:column;
  box-sizing:border-box;
  background-position: center center;
  background-size: cover;

  font-smooth: never;
  -webkit-font-smoothing:none;
  -moz-osx-font-smoothing:greyscale;

  scrollbar-color: var(--gradient-stop-1) var(--background-2);
  scrollbar-width: thin;
}
html, body {
  height:100%;
  width:100%;
  color: var(--text-primary);
  background: var(--background-2);
}
iframe {
  width:100%;
  height:100%;
  display:block;
}
/* color: #7bfde0;
text-shadow: 1px 1px 2px #3dcd9a, 0 0 25px #3dcd9a, 0 0 5px #3dcd9a; */
a, span, li {
  display: inline-block;
  padding: max(0.1vmin,1px) max(0.2vmin,2px) max(0.1vmin,1px) max(0.2vmin,2px);
  color: var(--text-primary);
  text-decoration:none;
  justify-content: center;
  min-height: max(calc(20px + 2vmin),36px);
  min-width: max(calc(20px + 2vmin),48px);
  height: max(calc(20px + 2vmin),36px);
  line-height: max(calc(20px + 2vmin),36px);
  overflow:hidden;
  white-space:nowrap;
  text-overflow: ellipsis;
}
#nav {
  flex-wrap: wrap;
}
#nav a {
  font-size: min(max(12px, 3vw), 26px);
}
body, header, main {
  display: flex;
  overflow: hidden;
}
header {
  /* height: 12.5vmin; REKT */
  height: max(calc(40px + 9vmin),80px);
  min-height: max(calc(40px + 9vmin),80px);
  background: var(--background-2);
  position:static;
}
.headerTop {
  justify-content: center;
  height: calc(max(calc(40px + 9vmin),80px) - max(calc(20px + 2vmin),36px));
  min-height: calc(max(calc(40px + 9vmin),80px) - max(calc(20px + 2vmin),36px));
}
.headerBottom {
  flex:unset;
  height:auto;
}
.headerLeft {
  align-items:flex-start;
  min-width: auto;
  flex:1;
  /* padding-top:2vmin; */
  padding-right:calc(10px + 1vmin);
}
.headerRight {
  align-items:flex-end;
  min-width: auto;
  flex:1;
  /* padding-top:2vmin; */
  padding-left:calc(10px + 1vmin);
}
.headerCenter {
  flex:unset;
  width:auto;
  flex-direction:row;
  justify-content: center;
  align-items: center;
  /* -webkit-filter: drop-shadow(1vmin 1vmin 0.8vmin rgba(0,0,0,0.9));
  filter: drop-shadow(1vmin 1vmin 0.8vmin rgba(0,0,0,0.9)); */
  -webkit-filter: drop-shadow(0.2vmin 0.2vmin 0.3vmin var(--gradient-stop-0));
  filter: drop-shadow(0.2vmin 0.2vmin 0.3vmin var(--gradient-stop-0));
}
.minimal header {
  height:auto;
  min-height:auto;
}
.minimal .headerTop,.minimal nav.menu {
  display:none;
}
.minimal.video #nowplayingDiv, .minimal.Video #iframeYoutubeChat {
  display:none;
}
.minimal.video #iframeYoutube {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
}
.minimal.milkdrop #nowplayingDiv {
  position: absolute;
  z-index: 5;
  bottom:0;
}
.minimal:not(.milkdrop):not(.Video) #nowplayingDiv {
  box-shadow: inset 0 calc(-1 * var(--border-size)) var(--text-primary);
}
.canHover #canvasMilkdrop:hover {
  cursor:pointer;
}
aside, footer {
  width:0;
  height:0;
  position:fixed;
  display:none;
}
footer {
  bottom:0;
}
section, .section {
  display:none;
  overflow:hidden;
}
main, div, canvas, section.active, .section.active {
  height: 100%;
  width: 100%;
  display:flex;
  flex:1;
}
main, main > section {
  background: var(--background-1);
}

svg {
  height: 100%;
  width:auto;
  max-height:100%;
  max-width: 100%;
  position: relative;
  fill:white;
}

audio {
  align-self: center;
  display:none;
}

nav, .meta {
  display: flex;
  flex-direction:row;
}
nav {
  background: var(--background-2);
}
nav a, nav li {
  flex:1 1 auto;
  align-items: center;
  color: var(--text-primary);
}
.canHover nav a:not(.active):hover, .canHover nav li:not(.active):hover {
  background-color: var(--text-primary);
  cursor: pointer;
  color: var(--background-1);
}
nav a.active, nav li.active {
  background-color: var(--background-1);
}
nav a#navMilkdrop.active, nav a#navVideo.active {
  background-color: black;
}
/* Row Menu */
nav.menu a, nav.menu li {
  box-shadow: inset 0 calc(-1 * var(--border-size)) var(--text-primary);
  text-align: center;
}
nav.menu a.active, nav.menu li.active {
  box-shadow: inset var(--border-size) var(--border-size) var(--text-primary), inset calc(-1 * var(--border-size)) 0 var(--text-primary);
}
nav.menu a:first-child.active, nav.menu li:first-child.active {
  box-shadow: inset calc(-1 * var(--border-size)) var(--border-size) var(--text-primary)
}
nav.menu a:last-child:not(:first-child).active, nav.menu li:last-child:not(:first-child).active {
  box-shadow: inset var(--border-size) var(--border-size) var(--text-primary)
}
nav a *, nav li * {
  pointer-events: none;
}

/* Row Menu Flip */
body.flip nav.menu a {
  box-shadow: inset 0 var(--border-size) var(--text-primary);
  text-align: center;
}
body.flip nav.menu a.active {
  box-shadow: inset var(--border-size) calc(-1 * var(--border-size)) var(--text-primary), inset calc(-1 * var(--border-size)) 0 var(--text-primary);
}
body.flip nav.menu a:first-child.active {
  box-shadow: inset calc(-1 * var(--border-size)) calc(-1 * var(--border-size)) var(--text-primary);
}
body.flip nav.menu a:last-child:not(:first-child).active {
  box-shadow: inset var(--border-size) calc(-1 * var(--border-size)) var(--text-primary);
}

/* Column Menu Left*/
nav.menu.c {
  flex:unset;
  justify-content:flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--background-2);
  box-shadow: inset calc(-1 * var(--border-size)) 0 var(--text-primary);
  max-width: 25%;
  overflow-x: hidden;
}
nav.menu.c a, nav.menu.c li {
  flex:unset;
  flex-shrink: 0;
  direction: ltr;
  align-items: flex-end;
  white-space: nowrap;
  box-shadow: inset 0 calc(-1 * var(--border-size)) var(--text-primary);
  text-align: right;
}
nav.menu.c a:last-child, nav.menu.c li:last-child {
  box-shadow:none !important;
}
nav.menu.c:after {
  content:"";
  flex:1;
  width:100%;
  box-shadow: inset 0 var(--border-size) var(--text-primary);
}
nav.menu.c a.active, nav.menu.c li.active {
  background: var(--background-1);
  box-shadow: inset 0 calc(-1 * var(--border-size)) var(--text-primary), inset calc(-1 * var(--border-size)) 0 var(--background-1);
}
/* Column Menu Right*/
nav.menu.c.r {
  box-shadow: inset var(--border-size) 0 var(--text-primary);
}
nav.menu.c.r a, nav.menu.c.r li {
  text-align: right;
  align-items: normal;
  display: inherit;
}

#pageStations nav, #pageSettings nav {
  background: var(--background-1);
}
.station h4 {
  white-space: normal;
  text-align: center;
  max-width: 100%;
}
a.station {
  display:inherit;
  line-height: 1em;
}

/* SLIDER */
.slider.active {
  position:absolute;
  background: var(--gradient);
}
.slider.horizontal.active {
  width:auto;
  left:0;
}
.slider.vertical.active {
  height:auto;
  bottom:0;
}
.canHover .slider.horizontal:hover {
  cursor: col-resize;
}
.canHover .slider.vertical:hover {
  cursor: row-resize;
}

div.button {
  padding-top:2vmin;
  width: 5vw;
  min-width: calc(20px + 2vmin);
  align-items: center;
  justify-content: center;
  color:var(--text-dark);
}
.canHover div.button:hover {
  cursor: pointer;
  background:var(--text-primary);
}
.canHover div.button:hover a {
  color:var(--background-1);
}
div.button a {
  min-height:auto;
}
#playerWrap {
  flex: 1 1 76vmin;
  width: auto;
  justify-content: center;
}
#player {
  padding-top: 2vmin;
  height: 100%;
  /* flex: 0 1 80vmin; */
}
#player .toggle {
  height: 100%;
  width: auto;
  margin-right: calc(10px + 2vmin);
}
#player .toggle svg {
  position:relative;
}
.canHover .toggle:hover svg {
  fill: URL("#rektGradient");
  cursor: pointer;
}
#playerStop {
  display: none;
}
.playing #playerStop {
  display: block;
}
.playing #playerPlay {
  display:none;
}
#playerSlider {
  width: auto;
  height: 100%;
}

#rektNetworkPassive {
  fill: white;
}
#player .slider .fill {
  fill: URL("#rektGradient");
}
#player .slider #fmActive {
  fill: URL("#fmGradient");
}
/* body.releases #player .slider .fill, body.archives #player .slider .fill, body.releases.canHover #player .toggle:hover svg, body.archives.canHover #player .toggle:hover svg { */
body.pattern #player .slider .fill, body.pattern.canHover #player .toggle:hover svg {
  fill: URL("#pattern");
}

#playerSliderActive {
  height: 0px;
  flex: unset;
  position: absolute;
}
#player #speaker {
  position: absolute;
  height: 2vmin;
  width: 2vmin;
  top: -2vmin;
  right: -1vmin;
  z-index: 200;
  pointer-events: none;
}
#player #speaker svg {
  position: absolute;
}

#nowplayingDiv {
  flex:unset;
}
.archives #nowplayingDiv, .releases #nowplayingDiv {
  min-height: max(calc(20px + 2vmin),36px);
  height: max(calc(20px + 2vmin),36px);
  line-height: max(calc(20px + 2vmin),36px);
}

#seek .slider {
  display:none;
  position:absolute;
  opacity:0.6;
}
.npTime {
  display:none;
}
.archives #seek .slider, .releases #seek .slider, .archives .npTime, .releases #seek .npTime {
  display:flex;
}
#nowplaying {
  pointer-events: none;
  z-index: 50;
  flex:1;
  display:flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  text-align: center;
}
#npArtist {
  flex-shrink: 0;
  padding-right: 0;
}

.loading .menu, .loading .toggle {
  display: none !important;
}
.loaded .init {
  display:none !important;
}

section.init {
  color:var(--text-dark);
  align-items: center;
  justify-content: center;
}

#pageEQ {
  background-size: cover;
  background-position: center center;
}
#eqs {
  justify-content: center;
}
.eqSlider {
  flex:unset;
  width:6vmin;
  border: var(--border-size) solid #aaaaaa;
  margin: 0 2px 0 2px;
  min-width: calc(20px + 2vmin);
}

section nav {
  flex-direction: column;
  flex:1;
}
section nav a, section nav li {
  border:none;
  align-items: center;
  width:100%;
}



/* Styles for Releases */
.container {
  flex:1;
  display:flex;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}
.container section {
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}

.title {
  padding: 0.1vmin calc(0.5vmin + var(--border-size)) calc(0.1vmin + var(--border-size)) 2vmin;
}
.canHover .title:hover {
  cursor:pointer;
}

.stack, .stack.title, .stack section div {
  flex:unset;
  flex-shrink:0;
  height:auto;
}
.stack > .title, .stack table {
  background: rgba(0,0,0,0.5);
}
.stack table {
  max-height: max(calc(60px + 6vmin),144px);
  min-height: max(calc(60px + 6vmin),144px);
  height: max(calc(60px + 6vmin),144px);
  width:100%;
  display: flex;
}
.stack table th { text-align: right; width:0%; padding: 0 calc(8px + 0.2vmin) 0 2vmin;}
.stack table th a { padding:0; }
.stack table td { width:100%; padding: 0 calc(8px + 0.2vmin) 0 calc(8px + 0.2vmin);}

.canHover .stack > .title:hover  {
  color:var(--text-active);
  background:none;
}

.stack.active {
  flex-grow: 1;
  background:none !important;
}
.stack.active > .title {
  color:var(--text-active);
  padding-left:2vmin;
}
.canHover .stack.active > .title:hover {
  background: rgba(0,0,0,0.75);
  color:var(--text-primary);
}
table {
  border-spacing: 0 0;
}

.track a {
  z-index:100;
  text-shadow: -0.1vmin -0.1vmin 0 var(--text-shadow), 0.1vmin -0.1vmin 0 var(--text-shadow), -0.1vmin 0.1vmin 0 var(--text-shadow), 0.1vmin 0.1vmin 0 var(--text-shadow);
  filter: drop-shadow(0.1vmin 0.1vmin 0.5vmin var(--text-shadow));
  color:var(--text-active);
}

.track.active, .canHover .track:hover {
  background-color: rgba(0,0,0,0.5);
}
.track.active a, .canHover .track a:hover, .canHover table a:hover {
  filter: none;
  text-shadow: 1px 1px 2px var(--gradient-stop-1), 0 0 1vmin var(--gradient-stop-1), 0 0 5px var(--gradient-stop-1);
}
.track.active:not(.pending) a {
  pointer-events: none;
}

.track .slider {
  display:none;
}
.track.active .slider {
  display:block;
  position:absolute;
  height:100%;
  z-index: 1;
}

/* Styles for Chat */
.content {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.content > div {
  flex: 0 0 auto;
  height: auto;
  padding:1vmin 0 1vmin 2vmin;
  direction:ltr;
}
.content > div pre {
  padding-left:1vmin;
  padding-right:1vmin;
}
#chatMain span {
  display:inline;
  line-height: 1;
  min-height:auto;
  height:auto;
  padding:0;
}
.canHover #chatMain h4 span:hover {
  cursor:pointer;
}
#chatSide {
  max-width:25%;
  box-shadow: inset var(--border-size) 0 var(--text-primary);
  background: var(--background-2);
}
#chatSide nav {
  flex-shrink:0;
  max-width:100%;
}
#chatSide nav:after {
  content:none;
}
#chatSide nav:not(:last-child) a:last-child, #chatSide nav:not(:last-child) li:last-child {
  box-shadow: inset 0 calc(-1 * var(--border-size)) var(--text-primary) !important;
}
#chatSide nav.nicklist {
  flex:1;
  display:none;
}
#chatSide nav.nicklist ol {
  flex-shrink: 0;
  width:100%;
}
#chatSide nav.nicklist ol:not(:last-child) a, #chatSide nav.nicklist ol:not(:last-child) li {
  box-shadow: inset 0 calc(-1 * var(--border-size)) var(--text-primary) !important;
}
#chatSide nav.nicklist.active {
  display:flex;
}
#chatSide nav.nicklist:after {
  content:"";
  flex:1;
  width:100%;
  box-shadow: inset 0 var(--border-size) var(--text-primary),inset var(--border-size) 0 var(--text-primary);
}
#chatSide nav.chanlist ol {
  flex-shrink: 0;
  width:100%;
}
#chatChannels {
  max-height:50%;
}

input {
  display:none;
  color: var(--text-primary);
  background: var(--background-1);
  border: none;
  box-shadow: inset 0 var(--border-size) var(--text-primary);
  min-height: calc(20px + 2vmin);
  height: calc(20px + 2vmin);
  font-size: var(--font-size, 16px);
  line-height: 1;
  font-weight: normal;
  font-family: unscii16, Inconsolata, monospace;
  padding-left:2vmin;
  padding-right:2vmin;
}
input:focus {
  outline: none;
}
input.active {
  display:block;
}
input.login {
  display: block;
  position: absolute;
  z-index: 100;
  width: 100%;
}
.connected input.login {
  display:none;
}

.f {
  display:flex !important;
}
.fr {
  flex-direction: row !important;
}
.fc {
  flex-direction: column !important;
}
.f0 {
  flex: unset !important;
  width:auto;
  height:auto;
}
.f1 {
  flex: 1 !important;
}
.fg {
  flex: 1 0 auto;
}
.rtl {
  direction: rtl !important;
}
.mouseHide * {
  cursor: none !important;
}



.overlay {
  top:0;
  left:0;
  position:fixed;
  pointer-events: none;
  display:none;
}
.overlay.noise {
  z-index:800;
  animation: grain 8s steps(10) infinite;
  background-image: url("/static/img/noise.png");
  height: 400%;
  left: -50%;
  top: -150%;
  width: 300%;
  background-size: auto;
  opacity: 0.2;
}
.overlay.radial {
  z-index:1000;
  background-image: radial-gradient(var(--gradient-radial), rgba(0, 0, 0, 0.3) 100%);
}
.overlay.scanlines {
  z-index:900;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.03), rgba(0, 0, 255, 0.06));
  background-size: 100% 2px, 3px 100%;
}
.overlay.flicker {
  z-index:950;
  background: rgba(9, 8, 8, 0.05);
  animation: flicker 0.05s infinite;
  animation-timing-function: linear;
}
.overlay.scanline {
  z-index: 1010;
  animation: scanline 7.77s linear infinite;
}
.overlay.scanline::after {
  height:1px;
  width:100%;
  background: black;
  opacity:0.5;
  pointer-events: none;
  content: '';
}

body.noise .blur {
  filter: saturate(1.6) sepia(0.3);
}
body.flip .blur {
  flex-direction: column-reverse;
}
body.scanlines .scanlines, body.scanlines .radial, body.scanlines .scanline, body.flicker .flicker, body.noise .noise {
  display:flex;
}



.mobile {
  --border-size: 1px;
  --border-size: max(0.3vmin,1px);
}
/* .mobile .track a {
  filter: none !important;
} */
span#npArtist:empty {
  display:none;
}

.headerRight nav {
  height:100%;
}
#navSettings {
  all:unset;
  flex:unset;
  text-align:center;
  min-width: 35px;
  width: 7vmin;
  box-shadow:none;
  /* flex: 1; */
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#navSettings svg {
  fill: var(--text-primary);
  height: calc(6px + 1.5vmin);
  display: inline;
  vertical-align: middle;
}
#navSettings.active {
  background-color: var(--background-1);
  box-shadow: inset var(--border-size) calc(-1 * var(--border-size)) var(--text-primary);
}
body.flip #navSettings.active {
  box-shadow: inset var(--border-size) var(--border-size) var(--text-primary), inset 0 calc(-1 * var(--border-size)) var(--text-primary);
}
#navSettings.active svg {
  filter: drop-shadow(1px 1px 2px var(--gradient-stop-1)) drop-shadow(0px 0px 1px var(--gradient-stop-1)) drop-shadow(1px 1px 5px var(--gradient-stop-1));
  fill: white;
}
.canHover #navSettings:not(.active):hover {
  background-color: var(--text-primary);
  cursor: pointer;
}
.canHover #navSettings:not(.active):hover svg {
  fill: var(--background-1);
}
:focus, #navSettings:not(.active):focus{
  outline: var(--gradient-stop-0) auto 1px;
}

#pageSettings {
  overflow-y:auto;
  margin:auto;
  max-width:1200px;
  border-left: solid var(--border-size) var(--text-primary);
  border-right: solid var(--border-size) var(--text-primary);
}
#pageSettings nav {
  min-height: auto;
}
#pageSettings h3, #pageSettings h4 {
  white-space: normal;
  text-align: center;
  flex-shrink: 0;
}
#pageSettings p {
  white-space: normal;
  text-align: left;
  flex-shrink: 0;
  padding: 8px 16px 0 16px;
  font-size: 16px;
  padding: 8px max(0.8em, 12px) 0px max(0.8em, 12px);
  font-size: min(max(12px, 3vw), 20px);
}
#pageSettings p:last-child {
  border-bottom: solid var(--border-size) var(--text-primary);
  padding-bottom: 8px
}
#pageSettings h3 {
  display:flex;
  justify-content: center;
  border-bottom: solid var(--border-size) var(--text-primary);
  color:white;
  padding:2px;
}
#pageSettings a {display:inherit; height:100%; white-space: normal; text-align:center; border-left: solid var(--border-size) var(--text-primary); border-bottom: solid var(--border-size) var(--text-primary); padding: calc(8px + 0.2vmin);line-height: 1em;}
#pageSettings a:first-child {border-left:none}

#pageSettingsNav a.active {
  cursor: pointer;
}
.canHover #pageSettings a:hover {
  text-shadow: 1px 1px 2px var(--gradient-stop-1), 0 0 1vmin var(--gradient-stop-1), 0 0 5px var(--gradient-stop-1);
}
/* ANIMATION NOTES
Only Opacity and Transform are fast */
@keyframes flicker { 0% { opacity: 0; } 10% { opacity: 0.9; } 20% { opacity: 0.99 } 30% { opacity: 0; } 40% { opacity: 0.9; } 50% { opacity: 0.99; } 60% { opacity: 0; } 70% { opacity: 0.9; } 80% { opacity: 0.99; } 90% { opacity: 0; } 100% { opacity: 0.9; }}
/* ANIMATE UNIQUE SCANLINE */
@keyframes scanline {
  0% {
    transform: translateY(100%);
  }
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}

body:not(.mobile) #iframeYoutube {
  height: 56.17vw;
  max-height: calc(100% - 350px);
  flex-shrink: 0;
}
body.mobile #iframeYoutubeChat {
  display:none !important;
}
body:not(.mobile) #iframeYoutubeChat{
  flex:1;
}
@media (min-aspect-ratio: 4/3) {
  body:not(.mobile) #pageVideo {
    flex-direction:row;
  }
  body:not(.mobile) #iframeYoutube {
    max-width: 147.1vh;
    height:100%;
    max-height:100%;
    flex-shrink: unset;
  }
  body:not(.mobile) #iframeYoutubeChat{
    min-width:400px;
  }
  body.mobile #pageEQ {
    flex-direction: row;
  }
}