/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--primary-color: #88c696;--primary-color-dark: #394e38;--secondary-color: #181818;--bg-color: #121212;--text-color: #fff;--border-color: #272727;--grey-light: #9c9c9c;--border-radius: 10px;--default-transition: .3s ease-in-out}body.offline{--primary-color: #b31212;--primary-color-dark: #3d0909}html,body{height:100%}body{display:flex;flex-direction:column;background-color:var(--bg-color)}header{display:flex;justify-content:space-between;align-items:center;flex-shrink:0;padding:30px;height:60px;background:linear-gradient(0deg,var(--bg-color) 0%,var(--primary-color-dark) 150%);#logo{text-decoration:none;font-size:2rem;text-shadow:0 0 10px #000;&.animated .material-icons{animation-duration:2s;animation-name:logo-scale;animation-iteration-count:infinite}.material-icons{font-size:3rem;vertical-align:middle;color:var(--primary-color)}}#search-wrapper{display:flex;align-items:center;gap:10px;position:relative;#search-input{position:absolute;right:4rem;height:3rem;width:200px;padding:1rem;border:1px solid;border-radius:var(--border-radius);outline:none;color:var(--secondary-color);visibility:hidden;opacity:0;transition:opacity var(--default-transition);&.active{visibility:visible;opacity:1}}#search-trigger{.material-icons{font-size:3rem;text-shadow:0 0 10px #000}&:disabled .material-icons{color:var(--grey-light)}}}}@keyframes logo-scale{25%{transform:scale(1.15)}75%{transform:scale(.85)}}main{flex-grow:1;padding:50px 30px;overflow-y:auto;>*{flex-direction:column;display:flex;margin:auto;max-width:1200px}page-player{height:100%;padding:0;justify-content:center;align-items:center}}spot-footer{flex-shrink:0;height:100px;background:var(--secondary-color);border-top:1px solid var(--border-color);nav{height:100%;display:flex;a{flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;text-align:center;text-decoration:none;*{transition:color var(--default-transition)}&.active *,&:hover *{color:var(--primary-color)}.material-icons{font-size:2.5rem}}}@media(max-width:768px){height:80px;nav a span:last-of-type{display:none}}}*{font-family:Montserrat,sans-serif;font-size:14px;color:var(--text-color)}h1{font-size:4rem;&.hero{font-size:4.5rem;font-weight:100;text-align:center;@media(max-width:768px){font-size:3.5rem}}}h2{font-size:3.5rem}h3{font-size:3rem}h4{font-size:2.5rem}h5{font-size:2rem}h6{font-size:1.5rem}.material-icons{vertical-align:middle}button.icon-button{margin:0;padding:5px;border:none;background-color:transparent;line-height:0;cursor:pointer;&.align-right{float:right;line-height:100%}&:hover{.material-icons{color:var(--primary-color)}}.material-icons{transition:color var(--default-transition)}}.list{display:flex;flex-direction:column;>*{display:flex;gap:1rem;align-items:center;margin:0;padding:.75rem 1rem;border-bottom:1px solid var(--border-color);transition:background-color var(--default-transition);&:hover{background-color:var(--secondary-color)}&:first-of-type{border-top:1px solid var(--border-color)}a{flex:1;display:flex;align-items:center;text-decoration:none}.list-item-title{flex-grow:1}}}artist-list{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:1rem;&:has(>:hover)>:not(:hover) img{opacity:.1}>*{display:block;position:relative;height:150px;width:150px;color:#000;text-align:center;text-decoration:none;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&:hover img{opacity:.9;transform:scale(1.1)}.artist-list-item-title{position:absolute;height:100%;width:100%;line-height:150px;text-shadow:0 0 10px #000}img{position:absolute;top:0;left:0;height:100%;width:100%;object-fit:cover;opacity:.4;transition:all .5s ease-in-out}}}#player{display:flex;flex-direction:column;justify-content:center;gap:2rem;max-width:400px;#player-thumbnail{align-self:center;height:200px;width:200px;box-shadow:0 0 15px #000;img{height:100%;width:100%;object-fit:cover}}#player-infos{text-align:center;#player-infos-song *{font-size:1rem}#player-infos-artist *{color:var(--grey-light);font-size:.8rem}}#player-controls{display:flex;justify-content:space-evenly;align-items:center;gap:1rem;width:100%;.player-control{margin:0;padding:1.5rem;background-color:var(--secondary-color);border-radius:50%;border:1px solid var(--border-color);line-height:0;cursor:pointer;transition:box-shadow var(--default-transition);&:hover{box-shadow:0 0 10px var(--primary-color-dark);.material-icons{color:var(--primary-color)}}&.player-control-small .material-icons{font-size:2rem;line-height:2rem}.material-icons{font-size:3rem;line-height:3rem;color:#fff;transition:color var(--default-transition)}}}#player-progress{#player-progress-bar{width:100%;transition:box-shadow var(--default-transition);&:hover{box-shadow:0 0 15px var(--primary-color-dark)}}#player-times{display:flex;justify-content:space-between}}}