:root{--border-color: #222;--spacing: 10px;--big-spacing: 100px;--box-width: 500px;--shadow: rgba(0, 0, 0, .3) 0px 8px 8px;--overlay-shadow: rgba(0, 0, 0, .9) 0px 8px 8px;--fill: rgba(0, 0, 0, .3);--overlay: rgba(0, 0, 0, .9);--border: 1px solid #333}body{margin:0;font-family:Saira,-apple-system,BlinkMacSystemFont,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background:#333;background:url(/assets/bg-Dy0lCsKm.jpg) no-repeat center center fixed!important;background-size:cover!important;color:#eee;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h2{margin:calc(var(--spacing) * 3);font-size:1.75em}h3{font-size:1.1em;text-transform:uppercase;margin:0 0 calc(var(--spacing) * 2)}h3 button{margin-left:var(--spacing);margin-top:3px;position:absolute}.App-header{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;color:#fff;margin-bottom:calc(var(--spacing) * 3);border-bottom:1px solid var(--border-color);background-color:var(--fill)}.center{text-align:center}.visible{display:block}.hidden{display:none}.App .track-name{font-weight:700}.App .filters{margin-top:calc(var(--spacing) * 2);margin-bottom:var(--spacing);margin-left:var(--big-spacing);position:relative}@media(max-width:1080px){.App .filters{margin-left:unset}}.App .main-content{display:flex;position:relative;margin-top:calc(var(--spacing) * 2);margin-bottom:50px}@media(max-width:1080px){.App .main-content{display:block}}.App .box{position:relative;width:var(--box-width);border:var(--border);margin-top:var(--spacing);padding:calc(var(--spacing) * 2);background-color:var(--fill);box-shadow:var(--shadow);border-radius:30px}.App .box div p{padding-top:.2em;text-align:left;line-height:7px;font-size:12px}.App .box div p:first-child{padding-top:var(--spacing)}.App .sort-panel{position:absolute;z-index:1;right:0;padding:calc(var(--spacing) * 1.5);margin-top:var(--spacing);background-color:var(--overlay);border-radius:8px;border:var(--border);box-shadow:var(--overlay-shadow);font-size:12px}.App .sort-panel h3{margin:0 0 var(--spacing)}.App .sort-panel span{-webkit-user-select:none;user-select:none;display:block;padding:4px 8px;border-radius:4px;cursor:pointer;text-align:left}.App .sort-panel span:hover{background-color:#ffffff1a}.App .centerflex{display:flex;flex-direction:column;align-items:center}.App table{align-self:flex-start;padding:var(--spacing);margin-left:var(--big-spacing);margin-top:20px;min-width:450px;background-color:var(--fill);border-radius:30px;border:var(--border);box-shadow:var(--shadow)}@media(max-width:1080px){.App table{width:calc(100% - 200px);min-width:375px}}.App tr{display:block;cursor:pointer;padding:var(--spacing);margin:var(--spacing);border:var(--border);border-radius:8px;background-color:var(--fill);position:relative}.App tr.current{background-color:#e6e6e60d}.App td{padding:0 0 0 2px;font-size:90%;display:block}.App td.genre{display:inline-block;margin-left:84%;position:absolute;filter:grayscale(1)}.App td.genre.current{filter:grayscale(0)}.App td.genre img{padding-top:3px}.App button{cursor:pointer;background-color:#333;border:1px solid #111;border-radius:4px;color:#fff;opacity:.666;filter:grayscale(.5);padding:1px 4px}.App button:hover{opacity:1}.App button.toggle-sort{margin-left:6px}.App select,.App input{font-family:Saira;color:#fff;border:1px solid #111;background-color:#333;font-weight:600;border-radius:16px;padding:2px 2px 2px 5px;margin:0 var(--spacing);width:172px;opacity:.75}.App select:hover,.App input:hover{opacity:1}.App select::placeholder,.App input::placeholder{color:#eee}.App select:focus,.App input:focus{outline:none}.App select[type=text],.App input[type=text]{padding:3px 3px 3px 10px}.App .visualizer-container{margin-top:calc(var(--spacing) * 2);margin-left:calc(var(--big-spacing) * .5);margin-right:var(--big-spacing);width:100%}@media(max-width:1080px){.App .visualizer-container{display:none}}.App .visualizer-container .canvas-wrapper{position:sticky;top:calc(var(--spacing) * 2)}.App .visualizer-button{width:calc(50% - 20px);border-radius:16px;padding:4px 6px;margin:0 10px}.App canvas{width:100%;-webkit-user-select:none;user-select:none;cursor:pointer;margin-top:calc(var(--spacing) * 2)}.App canvas.waveform{margin:calc(var(--spacing)*2) var(--spacing) 0 var(--spacing);width:calc(var(--box-width) - var(--spacing) * 5)}.App audio{width:calc(var(--box-width) - var(--spacing) * 2);opacity:.8;height:50px}.App audio:focus{outline:none}@property --accent-1{syntax: "<color>"; inherits: true; initial-value: #ccc;}@property --accent-2{syntax: "<color>"; inherits: true; initial-value: #ccc;}@property --accent-3{syntax: "<color>"; inherits: true; initial-value: #ccc;}@property --accent-angle{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@keyframes accent-spin{to{--accent-angle: 360deg}}:root{transition:--accent-1 .8s,--accent-2 .8s,--accent-3 .8s}.accent .App .box:before,.accent .App tr.current:before{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;padding:1px;border-radius:inherit;background:conic-gradient(from var(--accent-angle),var(--accent-1) 0deg 90deg,var(--accent-2) 120deg 210deg,var(--accent-3) 240deg 330deg,var(--accent-1) 360deg);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;pointer-events:none;animation:accent-spin 8s linear infinite}.footer{position:fixed;width:100vw;bottom:-12px;background-color:#202020cc;padding-top:0}p.title,div.title{padding:1.5em;text-align:center;font-weight:700;font-size:2.5em;text-shadow:1px 1px 3px rgba(55,55,55,.5)}a,a:visited,a:hover{text-decoration:none}a:hover{text-decoration:underline}P{padding-left:2em;padding-top:.5em;line-height:1.5em;font-size:1em}P.left{padding-left:1em;line-height:1.2em}.small{text-align:center;font-size:.75em}P.lowtitle{font-size:1.5em;line-height:1.2em;padding-top:0;padding-left:1.1em;padding-bottom:1.5em}P.subtitle{font-size:1.75em;font-weight:700;line-height:1.1em;padding-top:0;padding-left:1.1em;padding-bottom:.1em}a,a:visited,a:active,a:hover{color:#fff6e2;text-shadow:1px 1px 3px rgba(0,0,0,.5)}div.container{width:95%}div.row{clear:both}div.column-left img{box-shadow:0 0 16px #00000080}div.column-left{width:340px;text-align:right;float:left;padding-right:24px}div.column-right{max-width:1200px;min-height:264px;margin-left:340px;padding-bottom:24px}div.column-right-s{max-width:1200px;min-height:206px;margin-left:340px;padding-bottom:24px}div.footer{padding-bottom:8px}