@media (max-width:1025px){
    body{
        max-height: 1vh;
    }
    .Name{
        /* margin-left:5%; */
    }
    .container{
        margin-top: 250px   ;
    }
    .playlist{
        height: 100%;
        width:10rem;
    }
}
@media (max-width:786px){
    .body{
        max-height:100vh;
        justify-items: center;
    }
    .navbar{
        grid-template-columns:20% 60% 20%;
    }
    .Name{
        text-align: center;
    }
    .box{
        width:22rem;
        
    }
    .image{
        width:300px;
        height:300px;
    }
    .title{
        font-size: 1.2rem;
    }
    .artist{
        font-size:1.1rem;
    }
    .current-time,.total-time{
        font-size: 14px;
    }
    .main-control{
        font-size: 40px;
    }
    .playlist{
        font-size: 14px;
    }
}
@media (max-width:400px){
    .container{
        margin-top: 0px;
    }
    .navbar{
        width:100%;
    }
    .collapse{
        margin-right:10px;
    }
    .box{
        width: 19rem;
        height:37rem;
    }
    .image{
        width:270px;
        height:270px;
    }
}