@import"https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap";.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media(prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.App{display:flex;align-items:center;flex-direction:column}body{background:#281f35;background:linear-gradient(90deg,#281f35,#3d2e53);color:#ebebeb;font-family:Architects Daughter,cursive;margin:0}h1{margin:1em 0 0;font-size:3rem}h2{margin-bottom:2em}.radio{max-width:60em;width:100%}.options{margin:.25em;border:1px solid #e36bae;border-radius:10px;padding:.25em .75em;background-color:transparent;color:#ebebeb;font-size:1.2rem;font-family:Architects Daughter,cursive}.options:hover{cursor:pointer;background:linear-gradient(to bottom right,#e36bae,#fb743e)}.filters{display:flex;justify-content:center;flex-wrap:wrap;margin-bottom:2em;font-size:1.2rem;width:100%}.filters span{margin:.25em;border:1px solid #e36bae;border-radius:10px;padding:.25em .75em}.filters span:hover{cursor:pointer}.filters .selected,.filters span:hover{background:linear-gradient(to bottom right,#e36bae,#fb743e)}.favourite{color:red;position:absolute;top:0;right:0;margin-right:.25em;margin-top:.25em;cursor:pointer}.selectedStation{display:grid;grid-template-columns:repeat(3,33%);width:100%;align-items:center;justify-content:center;margin-bottom:1em}.stations{display:grid;grid-template-columns:repeat(3,33.33%);width:100%}.station{position:relative;font-size:1.2em;border:1px solid #4c3e5f;margin:.25em;border-radius:10px;padding:1em;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.station:hover{border-color:#e36bae}.stationName{display:flex;flex-direction:row;margin-bottom:1em;width:100%;align-items:center;justify-content:flex-start}.name{width:100%;text-align:center}img{display:block;width:2.5em;height:2.5em;border-radius:50%;border:2px solid #4c3e5f;margin:0 .25em}.playButton{width:100%;background-color:#4c3e5f;color:#ebebeb;border-radius:10px;border:none;padding:12px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;font-family:Architects Daughter,cursive;position:relative;height:2.85em}.playButton:hover{cursor:pointer}.playButton.selected,.playButton:hover{background:linear-gradient(to bottom right,#e36bae,#fb743e)}audio{width:100%}.rhap_container{width:30%!important;position:relative;right:0;margin-right:.6em}.rhap_container.player{box-shadow:none;background-color:transparent;display:flex;justify-items:center}.rhap_stacked .rhap_controls-section{margin-top:0!important}.rhap_controls-section .rhap_volume-controls{margin-right:1em}.rhap_controls-section .rhap_main-controls button[aria-label=Play] svg path{fill:#ebebeb!important}.rhap_controls-section .rhap_main-controls button[aria-label=Pause] svg path{fill:#e36bae!important}@media only screen and (max-width:600px){.selectedStation,.stations{grid-template-columns:repeat(1,100%)}.rhap_container{width:100%!important}.fixedStationName{position:relative!important;width:auto!important}.fixedPlayerLogo{margin-left:.1em!important;margin-right:.1em!important}}.fixedContainer{position:relative;height:60px}.fixedPlayer{border:1px solid #e36bae;border-bottom:none;background-color:#4c3e5f;position:fixed;bottom:0;max-width:60em;width:100%;max-height:55px;height:100%}.fixedPlayerName{width:100%;height:100%;display:flex;align-items:center}.fixedPlayerLogo{margin-left:1.6em;margin-right:1.6em}.fixedStationName{position:absolute;text-align:center;width:100%}.loader,.loader:after,.loader:before{background:#fff;animation:load1 1s ease-in-out infinite;width:1em;height:4em;position:relative}.loader{color:#fff;text-indent:-9999em;margin:auto;position:relative;font-size:11px;transform:translateZ(0);animation-delay:-.16s}.loader:after,.loader:before{position:absolute;top:0;content:"";text-align:center}.loader:before{left:-1.5em;animation-delay:-.32s}.loader:after{left:1.5em}@keyframes load1{0%,80%,to{box-shadow:0 0;height:4em}40%{box-shadow:0 -2em;height:5em}}