/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */*,:before,:after{box-sizing:border-box}html{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";line-height:1.15;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,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}table{border-color:currentcolor}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}.app__container{display:flex;flex-direction:column;position:relative;z-index:1;justify-content:center;align-items:center;min-height:100vh;color:var(--clr-light)}button{display:inline-block;padding:1rem;border:none;background:none;cursor:pointer;color:inherit}.background{position:fixed;top:0;left:0;width:100vw;height:100vh;background:url(/applemusicbackground.jpg) no-repeat center center;background-size:cover;filter:blur(8px);z-index:-1}canvas{border:1px solid white;display:block;margin:20px auto}.tip{margin-top:2rem;font-size:1rem}.music__container{border:2px solid black;border-radius:2rem;height:36rem;width:34rem;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;background-color:var(--clr-light);box-shadow:0 15px 30px #000c;margin-top:1.5rem}.image__container{border-radius:3rem;border:1px solid var(--clr-rose);box-shadow:0 5px 30px 5px #0009;backdrop-filter:blur(5.5px);-webkit-backdrop-filter:blur(5.5px);position:absolute;height:13rem;width:13rem;top:24%;left:50%;transform:translate(-50%,-50%);transition:transform .2s ease}.image__container:hover{transform:translate(-50%,-52%)}.music__container-CS{display:flex;justify-content:center;color:var(--clr-dark);font-weight:600;font-size:1.7rem;margin-bottom:1rem;width:100%}@media (max-width: 320px){.music__container{height:20rem;width:calc(20rem / 1.19);margin-top:1rem}.image__container{top:15%;width:13rem;height:13rem}.music__container-CS{font-size:1.25rem;position:relative;top:10%}}@media (min-width: 321px) and (max-width: 475px){.music__container{height:27rem;width:calc(27rem / 1.19);margin-top:1.2rem}.image__container{width:18rem;height:18rem;top:20%}.music__container-CS{font-size:1.5rem}}@media (min-width: 476px) and (max-width: 640px){.music__container{height:30rem;width:calc(30rem / 1.19);margin-top:1.3rem}.image__container{width:20rem;height:20rem;top:22%}}@media (min-width: 641px) and (max-width: 768px){.music__container{height:32rem;width:calc(35rem / 1.19);margin-top:1.4rem}.image__container{width:22rem;height:22rem;top:23%}}@media (min-width: 769px){.music__container{height:34rem;width:calc(37rem / 1.19);margin-top:1.5rem}.image__container{width:23rem;height:23rem;top:24%}}.btn{display:inline-block;font-weight:600;text-decoration:none;letter-spacing:-.05em;background-color:var(--clr-rose);color:var(--clr-dark);padding:.5em 1em;border-radius:6px;transition:transform .3s,box-shadow .3s}.container{width:100%;margin-left:auto;margin-right:auto;padding-left:.5rem;padding-right:.5rem}.section{margin-top:5rem}@media (min-width: 475px){.container{max-width:475px}}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1024px){.container{max-width:1024px}.section{margin-top:10rem}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1536px){.container{max-width:1536px}}.lower__container{margin-top:auto;width:80%}.audio-controls__container{display:flex;justify-content:center}.progress-container{background:#e0e0e0;height:10px;border-radius:5px;cursor:pointer;margin:auto .5rem}.progress{background:linear-gradient(84deg,#ff6425 19%,#e11d48 93%);height:100%;border-radius:5px}.time-container{display:flex;font-size:0rem}.audio-controls__prev,.audio-controls__pause-play,.audio-controls__next{color:var(--clr-slate800);font-size:2rem}.timestamp-container{display:flex;justify-content:space-between;width:95%;position:relative;top:1%;left:3%;color:var(--clr-dark)}.timestamp-container p{font-size:1rem;margin:0}.offcanvas{color:var(--clr-light);background-color:var(--clr-dark);width:100%;max-width:325px}.offcanvas-body{display:flex;flex-direction:column;font-size:var(--size-2xl);justify-content:flex-start;text-align:center;width:100%;padding:0 .5rem 1rem;overflow-y:auto}.btn-close{background-color:var(--clr-rose)}.songs__ul{display:flex;flex-direction:column;padding:0 .5em;margin:1rem 0;max-height:calc(100vh - 100px);overflow-y:auto}.songs__li{list-style:none;margin-bottom:.4rem;border:1px solid var(--clr-slate800);border-radius:.5rem;padding:.5rem 1rem;cursor:pointer;background-color:var(--clr-light);color:var(--clr-dark);font-weight:500}.songs__li:hover{background-color:var(--clr-slate400)}:root{--clr-dark: #070a13;--clr-light: #f1f5f9;--clr-slate400: #94a3b8;--clr-slate600: #475569;--clr-slate800: #1e293b;--clr-rose: #e11d48;--clr-indigo: #4f46e5;--size-xxs: .5rem;--size-xs: .75rem;--size-sm: .875rem;--size-base: 1rem;--size-lg: 1.125rem;--size-xl: 1.25rem;--size-2xl: 1.5rem;--size-3xl: 1.875rem;--size-4xl: 2.25rem;--size-5xl: 3rem;--size-6xl: 3.75rem;--size-7xl: 4.5rem;--size-8xl: 6rem;--size-9xl: 8rem;--size-10xl: 10rem}*{margin:0;line-height:calc(1em + .5rem)}html{scroll-behavior:smooth}.light-mode{--clr-light: #070a13;--clr-dark: #f1f5f9;--clr-slate400: #1e293b;--clr-slate600: #1e293b;--clr-slate800: #1e293b}body{margin:0}