#volume-slider{-webkit-appearance:none;appearance:none;margin:var(--default-margins);width:200px;height:12px;cursor:pointer;border-radius:var(--default-boarder-radius)}#volume-slider::-webkit-slider-runnable-track{height:12px;cursor:pointer;background:var(--scrollbar-color);border-radius:var(--default-boarder-radius)}#volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary-accent);margin-top:-2px;cursor:pointer;transition:.2s}#volume-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.main-content{background-color:var(--background-primary-complementary);padding:0 var(--default-margins) 0 var(--default-margins);border-radius:var(--default-boarder-radius);flex:1;overflow-y:auto;overflow-x:hidden}.backgrond-color-container{background-color:var(--background-color);padding:var(--default-margins);border-radius:var(--default-boarder-radius)}#home-container{display:flex;flex-direction:column;height:100vh;width:100vw}#content-container{display:flex;flex-direction:row;margin:0 var(--default-margins) 0 var(--default-margins);min-height:0;flex:1}#home-main{background-color:var(--background-primary-complementary);border-radius:var(--default-boarder-radius);flex:1;overflow-y:auto;min-height:0}#playlist-bar{margin-right:var(--default-margins);background-color:var(--background-primary-complementary);border-radius:var(--default-boarder-radius);width:400px;scrollbar-gutter:stable;overflow-y:auto;overflow-x:hidden;padding-left:var(--default-margins);min-height:0}#playlist-bar:has(#playlist:hover)::-webkit-scrollbar-thumb,#playlist-bar:has(h2:hover)::-webkit-scrollbar-thumb,#playlist-bar:has(hr:hover)::-webkit-scrollbar-thumb,#playlist-bar::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-color);border-radius:var(--default-boarder-radius)}#playlist{display:flex;flex-direction:row;width:auto;box-sizing:border-box;height:100px;transition:transform .2s ease,background-color .2s ease;transform-origin:left center}#playlist:hover{opacity:.8;background-color:color-mix(in srgb,var(--background-color) 10%,white 10%);transform:scale(1.05);cursor:pointer}#music-project-container{display:flex;flex-direction:row;justify-content:space-evenly;flex-wrap:wrap}#music-project{width:150px;height:200px;display:flex;flex-direction:column;margin:var(--default-margins);transition:transform .2s ease}#music-project:hover{transform:scale(1.05);background-color:color-mix(in srgb,var(--background-color) 10%,white 10%)}#songTitle{display:flex;flex-direction:column;margin-top:var(--default-margins);margin-bottom:var(--default-margins);justify-content:center}#songTitle p,h3{margin:0}.footer{margin:var(--default-margins);height:100px;min-height:100px;border-radius:var(--default-boarder-radius);background-color:var(--background-primary-complementary);color:#fff;display:flex;justify-content:space-between;align-items:center}.header{margin:var(--default-margins);display:flex;justify-content:space-between;height:60px;min-height:60px;border-radius:var(--default-boarder-radius);background-color:var(--background-primary-complementary);color:#fff}.header h2,h3{margin:0 var(--side-margins) 0 var(--side-margins);align-self:center}.header h3{color:#4ac46f}#playlist-cover{max-width:auto;max-height:90%;min-height:90%;aspect-ratio:1 / 1;margin:var(--default-margins);align-self:center;border-radius:var(--default-boarder-radius)}#playlist-title-desc{box-sizing:border-box;padding:0;height:100%;width:auto;align-content:center}#playlist-title-desc p,h3{margin:0;align-items:center}#playlist-bar-h2{padding:var(--default-margins);margin:0}#album-cover{max-width:auto;max-height:70%;aspect-ratio:1 / 1;margin:var(--default-margins);align-self:center;border-radius:var(--default-boarder-radius)}#playlist-main-cover{border-radius:var(--default-boarder-radius);aspect-ratio:1 / 1;width:170px;height:170px}#click-to-start-container{position:fixed;inset:0;background:var(--background-color);color:var(--primary-accent);z-index:999;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:50px;cursor:pointer;transition:transform .6s ease}#click-to-start-container.started{transform:translateY(-100vh)}.loading-spinner{width:100px;height:100px;border:calc(50px/ 3) solid color-mix(in srgb,var(--background-color) 10%,white 10%);border-top-color:#000;border-radius:50%;box-sizing:border-box;animation:loading .75s ease infinite}@keyframes loading{0%{transform:rotate(8deg)}to{transform:rotate(1turn)}}:root{--background-color: hsl(254, 50%, 21%);--background-primary-complementary: hsl(240, 37%, 29%);--primary-accent: white;--scrollbar-color: hsla(210, 32%, 57%, .401);--default-boarder-radius: 8px;--default-margins: 15px;--side-margins: 30px;--scrollbar-width: 15px}body,html #root{width:100vw;height:100vh;margin:0;padding:0;background-color:var(--background-color)}h3,h2,h1,p{color:var(--primary-accent)}hr{margin:0;padding-left:var(--default-margins);border:none;border-top:2px solid color-mix(in srgb,var(--background-primary-complementary) 20%,hsl(254,50%,21%))}::-webkit-scrollbar{width:var(--scrollbar-width)}::-webkit-scrollbar-track{background:transparent}:-webkit-scrollbar-thumb{background:transparent}