*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;   
}
html{
    font-size: 62.5%;

}
.main{
    width: 100vw;
    height: 100vh;
    background-color: #f6f6f6;
    display: grid;
    place-items: center;
}
.music-container{
    width: 65rem;
    height: 55rem;
    background-color: #ffffff;
    border-radius: 2rem;
    box-shadow: 0 1.2rem 3rem 0.5rem rgba(0, 0, 0, 0.2);
    padding: 3rem;
    text-align: center;
}
.music-container #title{
    text-transform: uppercase;
    letter-spacing: 2rem;
    word-spacing: 0.5rem;
    color: #171717;
    margin: 2rem 0 0.5rem 0;
    font-size: 2.5rem;
    font-weight: 500;
    text-shadow: 0 0.3rem 0.5rem rgba(0,0,0,0.3);
}
.music-container #artist{
    color: #cccaca;
    text-transform: capitalize;
    letter-spacing: 0.1rem;
    font-size: 2rem;
    margin-bottom: 4rem;
    font-weight: 300;
}
.img-contener{
    width: 25rem;
    height: 25rem;
    margin: auto;

}
img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 1.2rem 3rem 0.5rem rgba(0,0,0,0.4);
}
.music-controns {
    display: flex;
    flex-direction: row;
    margin: auto;
    gap: 10rem;
    margin-top: 8rem;
}
i{
    font-size: 5rem;
}
.anime{
    animation: rotet 6s linear infinite;
}
@keyframes rotet {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}






.progerss_con{
    width: 100%;
    height: auto;
    padding: 1rem 0;
    margin-top: 1rem;
}
.progress{
    width: 100%;
    height: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07),0 2px 4px rgba(0, 0, 0, 0.07),0 4px 8px rgba(0, 0, 0, 0.07),0 8px 16px rgba(0, 0, 0, 0.07),0 16px 32px rgba(0, 0, 0, 0.07),0 32px 64px rgba(0, 0, 0, 0.07);
    border-radius: 4rem;
    position: relative;
    margin-top: 0.5rem;
    transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.progr{
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: black;
    transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.duration_meeter{
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
}
.bi{
    cursor: pointer;
}