*,*:before,*:after{box-sizing:border-box}html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}ul,ol,ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{text-rendering:optimizeSpeed;line-height:1.5}html,body{min-height:100%}a:not([class]){text-decoration-skip-ink:auto}a{text-decoration:none}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--primary-clr: hsl(335, 57%, 51%);--secondary-clr: hsl(217, 24%, 17%);--tertiary-clr: hsl(217, 12%, 34%);--white-clr: hsl(220, 13%, 91%);--font-family: "Inter", sans-serif;--fw-semi-bold: 600;--fw-bold: 700;--fs-name: 1rem;--fs-author: .75rem;--fs-small: .625rem}body{font-family:var(--font-family);min-height:100vh;display:grid;place-items:center;background-image:url(../img/bg.jpg);background-size:cover;background-position:center center;background-repeat:no-repeat;padding:1.25rem;overflow-x:hidden}.music{--main-width: 25rem;width:min(100%,var(--main-width));background-color:var(--secondary-clr);border-radius:1rem;padding-block:min(1.25rem,2.5vh);padding-inline:1.25rem}.music__img{width:100%}.music__img img{width:100%;height:100%;border-radius:1rem;object-fit:cover;aspect-ratio:1/1}.music__info{text-align:center;margin-block-start:min(1rem,2vh);margin-block-end:min(1.25rem,2.5vh)}.music__info .music--title{font-size:var(--fs-name);font-weight:var(--fw-semi-bold);letter-spacing:.0625rem;color:var(--white-clr);line-height:1.8}.music__info .music--name{font-size:var(--fs-author);font-weight:var(--fw-semi-bold);color:var(--tertiary-clr)}.music__progress div{display:flex;justify-content:space-between;align-items:center}.music__progress div .music--duration{font-size:var(--fs-small);font-weight:var(--fw-bold);color:var(--tertiary-clr)}.music__progress .music--progress-container{width:100%;height:.3125rem;background-color:var(--white-clr);border-radius:100vmax;margin-block-start:min(.25rem,.5vh);cursor:pointer}.music__progress .music--progress-container .music--progress{height:100%;background-color:var(--primary-clr);border-radius:100vmax;transition:width .12s ease-in-out;cursor:pointer}.music__navigation{display:flex;align-items:center;justify-content:center;gap:1rem;margin-block-start:min(1.5rem,3vh);margin-block-end:min(1rem,2vh)}.music__navigation .music--btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;background:none;display:grid;place-items:center;width:2.8125rem;height:2.8125rem;padding:0;cursor:pointer}.music__navigation .music--btn:focus-visible{outline:auto}.music__navigation .music--btn img{width:2.5rem;height:2.5rem}.music__navigation .music--btn.play-btn{display:grid;place-items:center;width:3.75rem;height:3.75rem;border-radius:100vmax;background-color:var(--primary-clr)}.music__navigation .music--btn.play-btn i{font-size:1.3rem;color:var(--white-clr)}