*{box-sizing:border-box;margin:0;padding:0}body,html{overflow:hidden}body{justify-content:center;align-items:center;height:100vh;display:flex;overflow:hidden}header{z-index:1001;color:#000000d9;text-align:right;position:absolute;top:1.25rem;right:1.25rem}header h1{text-transform:uppercase;font-family:dunbar-tall;font-size:2.25rem}header h2{letter-spacing:1px;color:#000000a6;font-family:Times New Roman,Times,serif;font-size:1rem;font-style:italic;font-weight:400}header h2 a{color:#000000a6}section.background{background:url(background.9f13a2fa.jpg) 0 0/cover no-repeat;width:100%;height:100%;position:absolute;top:0;left:0}section.border{z-index:20001;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0;box-shadow:inset 0 0 0 .25rem #000000a6}section.soundtrack{z-index:1001;background-color:#00000080;border-radius:.25rem;align-items:center;padding:1rem;display:flex;position:absolute;bottom:1.25rem;right:1.25rem}section.soundtrack img{float:left;border:2.5px solid #fff;border-radius:3rem;width:120px;overflow:hidden}section.soundtrack ul.information{float:left;width:100%;margin-left:.5rem;list-style-type:none;overflow:hidden}section.soundtrack ul.information li{color:#fff;text-align:center;font-family:dunbar-tall}section.soundtrack ul.information li h3{color:#fff}section.soundtrack ul.information li a{text-transform:uppercase;color:#d3d3d3;font-size:11px}@media (max-width:520px){section.soundtrack{width:calc(100vw - 1rem);padding:.5rem;bottom:.5rem;right:.5rem}section.soundtrack .player .controls{flex-direction:column;padding:.75rem .75rem 0}section.soundtrack .player .controls .volume-container .volume-slider{position:unset;left:unset}}audio{display:none}.player{color:#fff;-webkit-user-select:none;user-select:none;grid-template-rows:.5rem auto;width:100%;margin-top:.5rem;display:grid;overflow:hidden}.player .timeline{cursor:pointer;background:#ffffffa6;position:relative}.player .timeline .progress{background:#008cff;width:0;height:100%;transition:all .25s}.player .controls{justify-content:space-between;align-items:stretch;padding:1.25rem 1.25rem 0;display:flex}.player .controls>*{justify-content:center;align-items:center;display:flex}.player .controls .toggle-play.play{cursor:pointer;border:7.5px solid #0000;border-left:13px solid #fff;width:1.25rem;height:15px;position:relative;left:0}.player .controls .toggle-play.play:hover{transform:scale(1.1)}.player .controls .toggle-play.pause{cursor:pointer;width:1.25rem;height:15px;position:relative}.player .controls .toggle-play.pause:before{content:"";background:#fff;width:3px;height:15px;position:absolute;top:0;left:0}.player .controls .toggle-play.pause:after{content:"";background:#fff;width:3px;height:15px;position:absolute;top:0;right:8px}.player .controls .toggle-play.pause:hover{transform:scale(1.1)}.player .controls .time{display:flex}.player .controls .time>*{padding:2px}.player .controls .volume-container{cursor:pointer;z-index:2;position:relative}.player .controls .volume-container .volume-button{align-items:center;height:26px;display:flex}.player .controls .volume-container .volume-button .volume{transform:scale(.7)}.player .controls .volume-container .volume-slider{z-index:-1;background:#fff;width:0;height:.85rem;transition:all .25s;position:absolute;left:-3px}.player .controls .volume-container .volume-slider .volume-percentage{background:#008cff;width:75%;height:100%}.player .controls .volume-container:hover .volume-slider{width:120px;left:-123px}section.visualizer{z-index:102;width:100%;height:100%;position:absolute;top:0;left:0}section.visualizer svg{z-index:103;opacity:.75;width:100%;height:100%;animation:45s linear infinite main-rotation;top:0;left:0}div.canvas-container{position:relative}@keyframes main-animation{0%{filter:blur(5px)sepia(0%)grayscale(0%)}25%{filter:blur()sepia(0%)grayscale(0%)}50%{filter:blur()sepia(50%)grayscale(0%)}75%{filter:blur(5px)sepia(0%)grayscale()}to{filter:blur()sepia(20%)grayscale(20%)}}@-o-keyframes main-animation{0%{-o-filter:blur(5px)sepia(0%)grayscale(0%)}25%{-o-filter:blur(0)sepia(0%)grayscale(0%)}50%{-o-filter:blur(0)sepia(50%)grayscale(0%)}75%{-o-filter:blur(5px)sepia(0%)grayscale(100%)}to{-o-filter:blur(0)sepia(20%)grayscale(20%)}}@-moz-keyframes main-animation{0%{-moz-filter:blur(5px)sepia(0%)grayscale(0%)}25%{-moz-filter:blur(0)sepia(0%)grayscale(0%)}50%{-moz-filter:blur(0)sepia(50%)grayscale(0%)}75%{-moz-filter:blur(5px)sepia(0%)grayscale(100%)}to{-moz-filter:blur(0)sepia(20%)grayscale(20%)}}@-webkit-keyframes main-animation{0%{-webkit-filter:blur(5px)sepia(0%)grayscale(0%)}25%{-webkit-filter:blur()sepia(0%)grayscale(0%)}50%{-webkit-filter:blur()sepia(50%)grayscale(0%)}75%{-webkit-filter:blur(5px)sepia(0%)grayscale()}to{-webkit-filter:blur()sepia(20%)grayscale(20%)}}@keyframes main-rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@-o-keyframes main-rotation{0%{-o-transform:rotate(0)}to{-o-transform:rotate(360deg)}}@-moz-keyframes main-rotation{0%{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@-webkit-keyframes main-rotation{0%{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}