@import "https://fonts.googleapis.com/css?family=Lato:100,300,400,700|Open+Sans:300,400,600,700,800|Quicksand:300,400,500,600,700|Raleway:100,200,300,400,500,600,700,800,900&display=swap";@import "https://fonts.googleapis.com/css?family=Questrial&display=swap";@import "https://fonts.googleapis.com/css?family=Sarala:400,700&display=swap";body{background:linear-gradient(358deg,#016699,#24b4a4,#1f8acc) 50%/cover no-repeat fixed;font-family:Questrial,sans-serif;animation:30s infinite bgGradientGenerator;overflow:hidden}@keyframes bgGradientGenerator{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}.main-content-container{flex-direction:column;place-content:center flex-start;width:100%;height:100vh;display:flex}body h1{text-align:center;color:#40d9ff;opacity:.9;z-index:2;margin-top:1.1em;margin-bottom:30px;margin-left:-50px;font-family:Questrial,sans-serif;font-size:4em;font-weight:200;animation:1s ease-in fadein}#of-blue{color:#fff;opacity:.9}#app{color:#d3d3d3;position:fixed;bottom:10px}#dropdown-container{z-index:2;width:30rem;margin:0 auto;font-family:Lato,sans-serif}#station_id{width:28rem;max-width:9 0%;color:#084769;text-align:center;opacity:.8;background-color:#084769;border-color:#838f96;border-radius:10px;height:2.2em;margin-bottom:5px;padding:10px 30px;font-size:1.5em;font-weight:700}#station-id:hover{border:2px solid #16bccc}#station_id:focus{outline:none}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}.custom-select{z-index:1000;width:28rem;max-width:90%;margin:0 auto 5px;font-family:Lato,sans-serif;position:relative}.custom-select__trigger{color:#fff;-webkit-backdrop-filter:blur(10px)saturate(140%);letter-spacing:.5px;text-align:left;cursor:pointer;background:rgba(255,255,255,.12);border:none;border-radius:999px;justify-content:space-between;align-items:center;width:100%;padding:.85rem 1.6rem;font-size:1.2em;font-weight:300;transition:background-color .3s,box-shadow .3s,transform .2s;display:flex;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 4px 18px rgba(0,0,0,.18)}.custom-select__trigger:hover,.custom-select.is-open .custom-select__trigger{background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 6px 24px rgba(15,138,150,.35)}.custom-select__trigger:focus-visible{outline:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 3px rgba(15,138,150,.45)}.custom-select__label{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.custom-select__label.is-placeholder{opacity:.75;font-style:italic}.custom-select__chevron{color:#fff;opacity:.85;flex-shrink:0;width:1.1em;height:1.1em;margin-left:.75rem;transition:transform .25s}.custom-select.is-open .custom-select__chevron{transform:rotate(180deg)}.custom-select__panel{-webkit-backdrop-filter:blur(28px)saturate(180%);z-index:1001;background:rgba(12,50,65,.67);border:1px solid rgba(255,255,255,.25);border-radius:18px;max-height:18rem;margin:0;padding:.4rem 0;list-style:none;animation:.18s ease-out custom-select-fade;position:absolute;top:calc(100% + 8px);left:0;right:0;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.25),0 14px 40px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.12)}@keyframes custom-select-fade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.custom-select__option{color:#fff;letter-spacing:.3px;cursor:pointer;padding:.55rem 1.5rem;font-size:1em;font-weight:300;transition:background-color .15s}.custom-select__option:hover{background:rgba(15,138,150,.35)}.custom-select__option[aria-selected=true]{background:rgba(15,138,150,.55);font-weight:500}.custom-select__panel::-webkit-scrollbar{width:6px}.custom-select__panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:3px}.organ-buttons{place-content:center;width:27rem;display:flex}#select-button,#stop-button{color:#fff;letter-spacing:1.5px;text-align:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);z-index:2;border:none;border-radius:999px;width:13rem;margin:1rem 1.2rem;font-size:1.56em;font-weight:600;transition:transform .25s,background-color .35s,box-shadow .35s,color .35s;padding:.91rem .13rem!important}.play-button{background-color:rgba(19,81,131,.45);animation:2.4s ease-in-out infinite play-pulse;box-shadow:0 0 0 1px rgba(255,255,255,.15),0 0 18px rgba(15,138,150,.35)}.play-button:hover{background-color:rgba(15,138,150,.65);animation:none;transform:scale(1.05);box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 28px rgba(15,138,150,.85),0 0 60px rgba(15,138,150,.45)}.stop-button{background-color:rgba(60,60,60,.45);animation:none;box-shadow:0 0 0 1px rgba(255,255,255,.15),0 0 14px rgba(0,0,0,.35)}.stop-button:hover{background-color:rgba(140,140,140,.6);transform:scale(1.05);box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 24px rgba(255,255,255,.25)}@keyframes play-pulse{0%,to{transform:scale(1);box-shadow:0 0 0 1px rgba(255,255,255,.15),0 0 18px rgba(15,138,150,.35)}50%{transform:scale(1.03);box-shadow:0 0 0 1px rgba(255,255,255,.25),0 0 32px rgba(15,138,150,.65)}}@media (prefers-reduced-motion:reduce){.play-button{animation:none}}.input-wrapper-play,.input-wrapper-stop{width:200px;position:relative}input:visited,input:focus{outline:none}.button-explanation{text-align:center;opacity:0;color:#ff6b6b;text-shadow:1px 1px rgba(0,0,0,.7);z-index:1;margin-top:10px;font-size:1.5em;line-height:1.2em;transition:opacity .3s}.intro-explanation{letter-spacing:.2px;text-align:left;text-shadow:1px 1px rgba(0,0,0,.5);opacity:0;color:#fff;z-index:1;width:70%;margin-left:15%;margin-right:15%;font-size:2em;line-height:1.2em;transition:opacity 2s ease-out;animation-name:fadeInHold;animation-duration:10s;animation-iteration-count:1;animation-delay:50ms;animation-fill-mode:forwards;position:relative;top:5%}.intro-explanation.fade-out{animation:3s forwards introFadeOut}.intro-explanation.auto-fade{animation:20s forwards introFadeOut}@keyframes introFadeOut{0%{opacity:1}to{opacity:0}}.intro-explanation span#blue-text{color:#40d9ff;font-weight:900;opacity:1!important}.audio-explanation{text-align:center;text-shadow:.5px .5px rgba(0,0,0,.5);opacity:0;color:#d3d3d3;z-index:2;width:70%;margin-left:15%;margin-right:15%;font-size:1.5em;font-style:italic;line-height:1.2em;animation-name:fadeInOut;animation-duration:12s;animation-delay:13s;position:absolute;bottom:5%}#footer-logo{opacity:.7;z-index:2;width:6rem;height:auto;position:fixed;bottom:2rem;left:2rem}#viz-canvas{z-index:1;filter:blur(1.5px);width:100%;height:100vh;position:fixed;top:0}#open-about{right:1.25rem;bottom:calc(env(safe-area-inset-bottom,0px) + 1.25rem);cursor:pointer;z-index:10;font-size:2em;line-height:0;position:fixed}#open-about svg{display:block}#open-about-bg:hover{fill:#16bccc;transition:all .4s}#about-overlay{z-index:20;background:#16435a;justify-content:center;align-items:center;width:100%;height:0%;transition:height .5s,backdrop-filter .5s;display:flex;position:fixed;bottom:0;right:0;overflow-y:auto}.about-content{color:rgba(255,255,255,.92);width:1000px;max-width:90%;padding:5rem 0 4rem;font-family:Questrial,Helvetica Neue,Helvetica,Arial,sans-serif;animation:.45s .1s both aboutContentFade;position:relative}@keyframes aboutContentFade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}#about-overlay .closebtn{color:rgba(255,255,255,.45);padding:.5rem 1rem;font-size:2.25rem;font-weight:200;line-height:1;text-decoration:none;transition:color .2s;position:absolute;top:1rem;right:1rem}#about-overlay .closebtn:hover,#about-overlay .closebtn:focus{color:rgba(255,255,255,.95)}.about-title{text-align:center;letter-spacing:4px;color:#7dd4e0;margin-bottom:3.25rem;font-size:64px;font-weight:200}.about-title-organ{font-weight:300}.about-title-of{color:#fff;opacity:.9;font-size:72px;font-weight:200}.about-title-divider{background:rgba(125,212,224,.4);width:80px;height:1px;margin:16px auto 0}.about-description{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:18px;margin-bottom:2rem;padding:3rem 3.5rem}.about-description-lead{color:rgba(255,255,255,.92);margin:0 0 2rem;font-size:22px;font-weight:300;line-height:1.65}.about-description-detail{color:rgba(255,255,255,.62);margin:0;font-size:20px;font-weight:300;line-height:1.65}#inner-overlay-link{color:#5dd8b5;font-weight:400;text-decoration:none;transition:color .2s}#inner-overlay-link:hover{color:#9beed1}.about-credits-grid{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:2.25rem;display:grid}.about-credit-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:2rem 2.5rem;transition:background-color .2s,border-color .2s}.about-credit-card:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}.about-credit-label{text-transform:uppercase;letter-spacing:2.5px;color:rgba(255,255,255,.4);margin-bottom:14px;font-size:14px;font-weight:400}.about-credit-value{color:#5dd8b5;font-size:22px;font-weight:400;text-decoration:none;transition:color .2s;display:inline-block}.about-credit-value:hover{color:#9beed1}.about-credit-sub{color:rgba(255,255,255,.4);margin-top:6px;font-size:16px;font-weight:300}#about-footer{letter-spacing:1px;text-align:center;color:rgba(255,255,255,.32);margin-top:1rem;font-size:14px;font-weight:300}.connect-list{place-content:center;width:250px;margin:0 auto;display:flex}.connect-list a{margin-top:-10px;margin-bottom:10px}i{margin-left:10px;margin-right:10px;font-size:1.5em;font-style:normal}@keyframes fadein{0%{opacity:0}to{opacity:.9}}@keyframes fadeInOut{0%{opacity:0;animation-timing-function:ease}50%{opacity:1;animation-timing-function:ease-in}to{opacity:0;animation-timing-function:ease-out}}@keyframes fadeInHold{0%{opacity:0;animation-timing-function:ease}20%{opacity:1;animation-timing-function:ease-in}to{opacity:1}}@media only screen and (max-width:710px){*{transition:all .4s}body h1{text-align:center;margin-left:0}#dropdown-container{width:95%;max-width:500px}#station_id{box-sizing:border-box;opacity:.8;width:100%;max-width:100%;height:2.2em;margin:0 0 5px;font-size:1.3em}.organ-buttons{box-sizing:border-box;justify-content:center;align-items:center;width:100%;margin:0 auto;padding:0 20px;display:flex}#select-button,#stop-button{width:10rem;margin:1rem auto}.intro-explanation{width:90%;margin-left:5%;margin-right:5%;font-size:1.6em}#footer-logo{opacity:0!important}.about-content{box-sizing:border-box;width:100%;max-width:100%;padding:3rem 10px 2rem}.about-credits-grid{grid-template-columns:1fr;gap:12px;margin-bottom:1.5rem}.about-title{letter-spacing:2px;margin-bottom:2rem;font-size:36px}.about-title-of{font-size:40px}.about-title-divider{width:48px;margin-top:10px}.about-description{border-radius:14px;margin-bottom:1rem;padding:1.5rem 1.25rem}.about-description-lead{margin-bottom:1rem;font-size:16px}.about-description-detail{font-size:14px}.about-credit-card{border-radius:12px;padding:1.25rem}.about-credit-label{letter-spacing:1.5px;margin-bottom:8px;font-size:11px}.about-credit-value{font-size:16px}.about-credit-sub{font-size:12px}#about-overlay .closebtn{padding:.5rem .75rem;font-size:1.75rem;top:.5rem;right:.5rem}#about-footer{font-size:12px}}@media screen and (max-width:450px){*{transition:all .4s}body h1{text-align:center;margin-top:3rem;margin-left:0;font-size:2.5em}#dropdown-container{box-sizing:border-box;width:95%;margin:0 auto;padding:0 20px}#station_id{box-sizing:border-box;width:100%;max-width:100%;padding:8px 15px;font-size:1.1em}.organ-buttons{box-sizing:border-box;justify-content:center;align-items:center;width:100%;margin:0 auto;padding:0 30px;display:flex}#select-button,#stop-button{box-sizing:border-box;text-align:center;justify-content:center;align-items:center;width:11rem;margin:1rem auto;font-size:1.3em;display:flex;padding:.91rem 20px!important}.intro-explanation{font-size:1.3em}.audio-explanation{font-size:1.2em}.about-content{padding:2.5rem 10px 1.5rem}.about-title{margin-bottom:1.5rem;font-size:30px}.about-title-of{font-size:34px}.about-description{padding:1.25rem 1rem}.about-description-lead{font-size:15px}.about-description-detail{font-size:13.5px}.about-credit-card{padding:1rem}.about-credit-value{font-size:15px}}