@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, a.pinned, 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); } .rtl ::-webkit-scrollbar { border-right: var(--border-size) solid var(--text-primary); border-left: none !important; } #pageAbout .container ::-webkit-scrollbar { border-top: 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) brightness(1.8); } .datawave { --gradient-stop-0: #ffe696; --gradient-stop-1: #000000; --gradient-radial: #fff8962e; -webkit-filter: saturate(8) contrast(3.5) sepia(0.7); filter: saturate(8) contrast(3.5) sepia(0.7); } .datawave pre { font-weight: 900; } .datawave pre a, .datawave pre strong { color:rgb(211, 211, 211); } .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.page-video #nowplayingDiv, .minimal.page-video #iframeYoutubeChat { display:none; } .minimal.page-video #iframeYoutube { width: 100% !important; max-width: 100% !important; height: 100% !important; max-height: 100% !important; } .minimal.page-milkdrop #nowplayingDiv { position: absolute; z-index: 5; bottom:0; } .minimal:not(.page-milkdrop):not(.page-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, section.pinned { height: 100%; width: 100%; display:flex; flex:1; } main { flex-direction: row; } main, main > section { background: var(--background-1); } section.pinned { order:100; } section.active ~ section.pinned, section.pinned ~ section.pinned { border-left: var(--border-size) solid var(--text-primary); } 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); } .pinned nav.menu a.active { box-shadow: inset var(--border-size) var(--border-size) var(--text-primary), inset calc(-1 * var(--border-size)) 0 var(--text-primary), inset 0 calc(-1 * var(--border-size)) var(--text-primary); } .pinned nav.menu a:first-child.active { box-shadow: inset calc(-1 * var(--border-size)) var(--border-size) var(--text-primary),inset 0 calc(-1 * var(--border-size)) var(--text-primary); } .pinned nav.menu a:last-child:not(:first-child).active { box-shadow: inset var(--border-size) var(--border-size) var(--text-primary),inset 0 calc(-1 * var(--border-size)) var(--text-primary); } nav a *, nav li * { pointer-events: none; } nav li.link a { pointer-events: all; } /* 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: calc(100% + 2vmin); margin-top: -2vmin; padding-top: 2vmin; } #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; display:flex; } #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%; } .art #pageMilkdrop { background-position: center; background-repeat: no-repeat; background-size: cover; } .art #canvasMilkdrop { mix-blend-mode: hard-light; } /* 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; } body.has-not-pressed-play #playerPlay svg, body.has-not-pressed-eq #navEQ h2, body.has-not-pressed-milkdrop #navMilkdrop h2, body.has-not-pressed-about #navSettings { animation: glow 2s linear infinite } @keyframes glow { 0% { opacity:0.5; } 50% { filter: drop-shadow(0 0 10px var(--gradient-stop-1)); opacity:1; } 100% {opacity:0.5;} } .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, #navSettings.pinned 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; } #pageAbout section article { padding: 3em 2em; max-width: 1060px; width:100%; margin: 0 auto; display: flex; gap: 1em; flex-direction: column; flex-shrink: 0; } #pageAbout section h1 { font-size: 1.5em; line-height: 1.5em; color: var(--text-active); text-shadow: 1px 1px 2px var(--gradient-stop-0), 0 0 1vmin var(--gradient-stop-0), 0 0 5px var(--gradient-stop-0); } #pageAbout section h2 { font-size: 1.2em; color: var(--text-active); text-shadow: 1px 1px 2px var(--gradient-stop-1), 0 0 1vmin var(--gradient-stop-1), 0 0 5px var(--gradient-stop-1); } #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; } }