@font-face{font-family:quicksand;src:url("../fonts/quicksand.ttf")}@font-face{font-family:icons;src:url("../fonts/icons.ttf")}*{padding:0;margin:0;box-sizing:border-box}button{background:none;border:none;font:inherit;color:inherit;text-align:inherit;display:flex;align-items:center;padding:15px 18px;border-radius:10px;transition:.3s;cursor:pointer}@media(max-width: 1200px){button{padding:3vw 0 3vw 3vw;border-radius:0}}button::before{content:"";width:35px;font-family:icons;font-size:24px;color:hsla(0,0%,100%,.2);transition:.3s}@media(max-width: 1200px){button::before{width:7.5vw;font-size:5.5vw}}button.playing::before{content:""}button.active,button:hover{background:rgba(0,0,0,.3)}button.active::before,button:hover::before{color:hsla(0,0%,100%,.5)}html{background:#000}body{display:flex;flex-direction:column;align-items:center;min-height:100vh;background:linear-gradient(rgb(125, 24, 47), rgb(16, 2, 6));font-family:quicksand,arial;color:#e6e6e6}main{position:relative;display:grid;grid-template-columns:400px 700px;gap:30px;margin-top:30px}@media(max-width: 1200px){main{display:flex;flex-direction:column;align-items:center;gap:0;width:100vw;margin-top:3vw}}main .progress{grid-column:span 2;height:20px;border-radius:10px;background:hsla(0,0%,100%,.2);overflow:hidden;cursor:pointer}@media(max-width: 1200px){main .progress{width:94vw;height:5vw}}main .progress .bar{width:0px;height:100%;background:hsla(0,0%,100%,.3)}main .meta{cursor:default}@media(max-width: 1200px){main .meta{width:94vw;margin-top:3vw}}main .meta .image{display:block;width:400px;height:400px;border-radius:10px;background:rgba(0,0,0,.3)}@media(max-width: 1200px){main .meta .image{width:94vw;height:94vw}}main .meta .title{margin-top:20px;font-size:24px;font-weight:500;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}@media(max-width: 1200px){main .meta .title{margin-top:4vw;font-size:5.8vw}}main .meta .artist{font-size:24px;font-weight:400;color:#c8c8c8}@media(max-width: 1200px){main .meta .artist{font-size:5.8vw}}main .playlist{display:flex;flex-direction:column}@media(max-width: 1200px){main .playlist{width:100vw;margin-top:5vw}}main .playlist .track-title,main .playlist .track-length{font-size:22px;font-weight:400}@media(max-width: 1200px){main .playlist .track-title,main .playlist .track-length{font-size:5vw}}main .playlist .track-length{margin-left:auto}@media(max-width: 1200px){main .playlist .track-length{display:none}}main .icons{position:absolute;bottom:0;right:0;display:flex;column-gap:20px}@media(max-width: 1200px){main .icons{position:static;column-gap:8vw;padding:10vw 0 4vw 0}}main .icons .soundcloud,main .icons .youtube{font-family:icons;font-size:44px;text-decoration:none;color:hsla(0,0%,100%,.2);transition:.3s}main .icons .soundcloud:hover,main .icons .youtube:hover{color:hsla(0,0%,100%,.5)}@media(max-width: 1200px){main .icons .soundcloud,main .icons .youtube{font-size:10vw}}main .icons .soundcloud::before{content:""}main .icons .youtube::before{content:""}