*{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;color:#fff}body{height:100vh;width:100vw;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#212121}.main-body{width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:0}.sidebar{display:grid;grid-template-columns:repeat(1,auto);width:17%;height:100%;justify-items:center;background-color:#000}.logo{margin-top:4vh;width:50%;height:max-content;margin-right:2vw}.logo>img{width:100%}.home-option{display:flex;flex-direction:column;align-items:center;justify-content:center;width:max-content;height:max-content;font-weight:600;margin-right:2vw}.home{display:flex;justify-content:space-evenly;align-items:center;margin:1vh 2vw 1vh 0}.home:nth-child(3){margin-left:2.5rem}.home>p{margin-left:3vw}.home>img{width:1.5rem}.my-option{display:flex;flex-direction:column;align-items:center;justify-content:center;width:max-content;height:max-content;margin-right:2vw;font-weight:600}.my{display:flex;justify-content:space-evenly;align-items:center;margin:1vh 0}.my:nth-child(2){margin-right:1rem}.my>p{margin-left:2vw}.my>img{width:1.5rem}.fav{margin-right:2vw}.fav>p{margin:2vh 0;font-weight:600}.install{display:flex;justify-content:space-evenly;align-items:center;width:max-content;height:max-content;margin-right:4vw}.install>img{width:1.5rem}.install>p{margin-left:2vw;font-weight:600}.spotify-body{width:83%;height:100%}.nav{display:flex;justify-content:space-around;align-items:center;margin:2vh 0 5vh}.arrow{width:max-content;height:max-content}.arrow>img{width:30%}.profile{width:max-content;height:max-content;margin-left:47vw}.profile>img{width:70%}.recent{margin:5vh 2vw}.recent>h1{font-size:1.7rem}.recent-container{display:grid;grid-template-columns:repeat(4,auto);margin:4vh 0 7vh;grid-gap:1vw;height:max-content}.recent-item{display:flex;justify-content:space-between;align-items:center;background-color:#303030;height:max-content;width:19vw;border-radius:.2rem}.recent-item>img{width:5vw;overflow:hidden}.recent-item>p{font-weight:600;font-size:.9rem;margin-right:7vw}.recent-item:nth-child(5)>p{margin-right:3vw}.rec{margin:5vh 2vw}.rec>h1{font-size:1.4rem}.rec-container{display:grid;grid-template-columns:repeat(6,auto);margin:3vh 0 0;height:max-content}.rec-item{background-color:#181818;width:max-content;padding:1vw;height:max-content;border-radius:1rem;display:flex;flex-direction:column;justify-content:flex-start;font-weight:600;font-size:.9rem}.rec-item>img{width:10vw}.rec-item>p{margin:.5rem 0 0}.player{display:flex;flex-direction:column;width:100%;height:fit-content;align-items:center;justify-content:center;z-index:1}.audio-player{display:flex;justify-content:space-between;align-items:center;width:100%;background-color:#181818;padding:1vh 0}.song-profile{display:flex;justify-content:space-between;align-items:center;width:13%;margin-left:1vw}.song-logo>img{height:7vh}.title{color:#fff;font-size:.9rem}.writter{color:gray;font-size:.7rem}.like-button>img{height:2vh}.song-play{width:40%;height:80%;display:flex;justify-content:center;align-items:center}.song-play>img{width:100%}.other-option{width:20%;height:80%;display:flex;justify-content:center;align-items:center;margin-right:1vw}.other-option>img{width:100%}.device-player{width:100%;background-color:#1ed760;color:#000;font-weight:600;font-size:.9rem}.device-player>p{margin:.2% 0 .2% 80%}
