.fa-play-circle{color:#ffcb19}.fa-redo,.fa-backward,.fa-forward,.fa-random,.fa-volume-down,.fa-heart,.fa-plus,.fa-download{color:lightgrey}header{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:10vh;text-align:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:2vh 0}header h1{-webkit-box-flex:1;-ms-flex:1;flex:1;font-weight:900}header .search{-webkit-box-flex:3;-ms-flex:3;flex:3}header .user{-webkit-box-flex:1;-ms-flex:1;flex:1}.search{display:-webkit-box;display:-ms-flexbox;display:flex;background-color:#f9f9fb;border-radius:1.5rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.search i{margin-left:2rem;margin-right:2rem;color:lightgrey}.search input{-webkit-box-flex:1;-ms-flex:1;flex:1;height:4vh;border:none;outline:none;border-radius:1.5rem;font-size:1.5rem;background-color:transparent}.search input::-webkit-input-placeholder{color:grey}.search input:-ms-input-placeholder{color:grey}.search input::-ms-input-placeholder{color:grey}.search input::placeholder{color:grey}.user{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;gap:1rem}.user i{color:#ffcb19}@media screen and (max-width: 425px){header{display:-ms-grid;display:grid;grid-template-areas:'h1 user'
 'search search';-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}header h1{-ms-grid-row:1;-ms-grid-column:1;grid-area:h1}header .search{-ms-grid-row:2;-ms-grid-column:1;-ms-grid-column-span:2;grid-area:search}header .user{-ms-grid-row:1;-ms-grid-column:2;grid-area:user}}main{display:-webkit-box;display:-ms-flexbox;display:flex;height:70vh}main nav{-webkit-box-flex:1;-ms-flex:1;flex:1;height:100%}main .main-section{-webkit-box-flex:4;-ms-flex:4;flex:4;height:100%;display:-ms-grid;display:grid;-ms-grid-columns:3fr 2fr;grid-template-columns:3fr 2fr;-ms-grid-rows:50% 50%;grid-template-rows:50% 50%;gap:5%}@media screen and (max-width: 425px){main{display:block;height:auto}main nav{display:none}main .main-section{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}main .main-section section{margin:5% 0}main .main-section section h2{margin-bottom:3%}}nav .nav-header{font-weight:bold;color:lightgrey;padding:5%;margin-left:10%}nav .nav-header:last-of-type{margin-top:10%}nav .nav-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;width:70%;padding:4% 5%;margin-left:10%;margin-top:3%;background-color:transparent;border-radius:3rem;text-decoration:none;font-weight:bold;color:black}nav .nav-item i{margin-right:10%}nav .active{background-color:#ffcb19}.card-container{margin:0 0;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;gap:10%;height:90%}.card-container .card{-webkit-box-flex:0;-ms-flex:0 1 25%;flex:0 1 25%}.card-image img{border-radius:5%;width:100%;height:50%}.card-footer{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-top:1vh}.card-footer .card-text{-webkit-box-flex:4;-ms-flex:4;flex:4;font-weight:bold}.card-footer .card-text .track-author{color:lightgrey;font-size:1.2rem}.card-footer .card-control{-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:end;margin:0 5% 0 0;color:lightgrey}.album-container{height:90%;position:relative}.album-container img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:5%}.album-text{position:absolute;top:0;width:40%;margin:5% 0 0 5%}.album-text .album-description,.album-text .album-author{margin-bottom:5%}.album-text .album-description{font-weight:bold;color:lightgrey}.album-text .album-author{font-weight:900}.trending-container{width:80%;height:90%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:10%}.trending-box{-webkit-box-flex:0;-ms-flex:0 1 25%;flex:0 1 25%;border-radius:5%;background-color:#f9f9fb;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.trending-box i{-webkit-box-flex:1.5;-ms-flex:1.5;flex:1.5}.trending-box .trending-text,.trending-box .trending-duration{font-weight:bold}.trending-box .trending-text{-webkit-box-flex:8;-ms-flex:8;flex:8}.trending-box .trending-text .trending-author{color:lightgrey;font-size:1.2rem}.trending-box .trending-duration{-webkit-box-flex:2;-ms-flex:2;flex:2}@media screen and (max-width: 425px){.trending-container{width:100%;gap:1%;height:80%}.trending-box{padding:2vh 0}}.popular-container{width:80%;height:90%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:5%}.popular-box{-webkit-box-flex:0;-ms-flex:0 1 25%;flex:0 1 25%;border-radius:5%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.popular-box img{-webkit-box-flex:2;-ms-flex:2;flex:2;-o-object-fit:cover;object-fit:cover;max-width:4rem;height:4rem;border-radius:50%;margin-right:1rem}.popular-box .popular-text{-webkit-box-flex:8;-ms-flex:8;flex:8;font-weight:bold}.popular-box .popular-text .popular-followers{color:lightgrey;font-size:1.2rem}.popular-box i{-webkit-box-flex:2;-ms-flex:2;flex:2;color:lightgrey}@media screen and (max-width: 425px){.popular-container{width:100%;gap:1%;height:80%}.popular-box{padding:2vh 0}}footer{position:fixed;bottom:0;height:12.5vh;width:100%;background-color:white;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}footer .player-left,footer .player-middle,footer .player-right{-webkit-box-flex:1;-ms-flex:1;flex:1}@media screen and (max-width: 425px){footer,#progress-bar{display:none}}.player-middle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:10%}.player-left{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:3%;margin-left:2%}.player-left img{-webkit-box-flex:1.5;-ms-flex:1.5;flex:1.5;max-width:10%;height:10%;border-radius:5%}.player-left .player-left-text,.player-left .timestamp{font-weight:bold}.player-left .player-left-text{-webkit-box-flex:8;-ms-flex:8;flex:8}.player-left .player-left-text .description{color:lightgrey;font-size:1.2rem}.player-left .timestamp{-webkit-box-flex:2;-ms-flex:2;flex:2;color:lightgrey}.player-right{display:-webkit-box;display:-ms-flexbox;display:flex;margin-right:2%}.player-right .volume-control,.player-right .user-control{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex}.player-right .volume-control i{-webkit-box-flex:1;-ms-flex:1;flex:1}.player-right .volume-control #volume-slider{-webkit-box-flex:9;-ms-flex:9;flex:9;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;outline:none;opacity:0.7;cursor:pointer}.player-right .user-control i{text-align:right;-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%}#progress-bar{height:0.5vh;width:55%;background:#ffcb19;position:fixed;bottom:12vh;z-index:1}#volume-slider::-webkit-slider-runnable-track{width:100%;height:0.5vh}#volume-slider::-webkit-slider-thumb{-webkit-appearance:none;height:1vh;width:1vh;border-radius:50%;background:#ffcb19;margin-top:-0.25vh}#volume-slider::-moz-range-progress{width:100%;height:0.5vh;background-color:#ffcb19}#volume-slider::-moz-range-track{width:100%;height:0.5vh;background-color:#f9f9fb}#volume-slider::-moz-range-thumb{-webkit-appearance:none;height:1vh;width:1vh;border-radius:50%;background:#ffcb19;margin-top:-0.25vh;outline:none;border:none}#volume-slider::-ms-track{background:#ffcb19}#volume-slider::-ms-thumb{-webkit-appearance:none;height:1vh;width:1vh;border-radius:50%;background:#ffcb19;margin-top:-0.25vh}#volume-slider::-ms-fill-lower{width:100%;height:0.5vh;background-color:#f9f9fb}#volume-slider::-ms-fill-upper{width:100%;height:0.5vh;background-color:#ffcb19}*{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;font-size:10px;font-family:'Urbanist', sans-serif}@media screen and (max-width: 1024px){*{font-size:8px}}@media screen and (max-width: 425px){body{margin:0 5%}}img{max-width:100%}h1{font-size:3rem}h2{font-size:2.5rem}p{font-size:1.5rem}