*{
    margin:0;
    padding:0;
    font-family: 'Courier New', Courier, monospace;
    box-sizing: border-box;
}
.container{
    width:100%;
    min-height: 100vh;
    background: linear-gradient(135deg, #153677, #4e085f);
    padding: 10px;
}
.music-player{
    width:100%;
    max-width:540px;
    margin:100px auto 20px;
    background-color: #b3c4e1;
    padding:40px 30px 70px ;
    border-radius: 10px;
    text-align: center;
}
nav{
    display:flex;
    justify-content: space-between;
    margin-bottom:30px;
}
nav .circle{
    border-radius:50%;
    width:40px;
    height:40px;
    line-height:40px;
    background:#fff;
    color:#f53192;
    box-shadow: 0 5px 10px rgba(255, 26, 26, 0.22);

}
.song-img{
    width:220px;
    border-radius:50%;
    border:8px solid  #b0b0e2;
    box-shadow: 0 10px 60px rgba(255,26 26,0.22);
}
.music-player h1{
    font-size:20px;
    font-weight:400;
    color:#333;
    margin-top:20px;
}
.music-player p{
    font-size: 14px;
    color:#333;
}
#progress{
    ~webkit-appearance:none;
    width:100%;
    height:6px;
    background:#f53192;
    border-radius:4px;
    cursor:pointer;
    margin:40px 0;

}
#progress::-webkit-slider-thumb{
    ~webkit-appearance:none;
    background:#f53192;
    width:30px;
    height: 30px;
    border-radius:50%;
    border:8px solid #fff;
    box-shadow: 0 5px 5px rgba(255,26,26,0.22);
}
.controls{
    display:flex;
    justify-content: space-evenly;
    align-items: center;
}
.controls div{
    width: 60px;
    height: 60px;
    background:#fff;
    display: inline-flex;
    align-items:center;
    justify-content: center;
    border-radius:50px;
    color:#f53192;
    box-shadow: 0 5px 5px rgba(255,26,26,0.22);
    cursor:pointer;
}
.controls div:nth-child(2){
    transform:scale(1.5);
    background:#f53192;
    color:white;
}