@import url('https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@500&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing:border-box
}
body{
    font-family: "Roboto" ,sans-serif;
    background: #222;
    min-height: 100vh;
}
.container{
    background: radial-gradient(#111,#444);
    box-shadow: -60px -60px 90px rgba(41,51,51,0.9);
    width: 600px;
    height: 50%;
    position: absolute;
    top: 20%;
    left: 25%;
    border-radius: 25px;
    color: #fff;
    z-index: 1;
}
.title{
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 1;
    background: rgba(0, 0, 0,0.9);
    width: 100%;
    height: 135px;
    
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

}
.title::before{
position: absolute;
content: "";
top: 0;
left: 0;
width: 600px;
height: 135px;
background:url(./Despacito-video-1200x794.jpg) no-repeat center center/cover;
z-index: -1;

}
.title h1{
    font-family: "Sansita Swashed",cursive;
}
title-txt h1
title-txt h5{
    margin: 1rem;
}
.fa-ellipsis-vertical{
    color: #ff4200;
    cursor: pointer;
    padding: 10px;
}
.title-img img{
    width: 70%;
    height: 70%;
    border-radius: 50%;
    padding: 20px;
}
.top-icon,
.bottom-icon{
display: flex;
align-items: center;
justify-content: space-between;
height: 25%;
padding: 2rem;
color: #ff4200;
}
.bottom-icon{
    height: 10%;
    
}
.top-icon i,
.bottom-icon i{
cursor: pointer;
font-size: 20px;
transition: all .3s ease-in-out;
}
.top-icon i:not(.fa-play):hover,
.bottom-icon i:hover{
    font-size: 24px;
    color: #ff4200;
}
.fa-play:hover{
    font-size: 28px;
    animation: rotate 0.5s linear forwards;
    
}
.bar-1{
height: 3px;
background: #333;
}
.bar-2{
position: absolute;
bottom: 33.5%;
left: 8%;
cursor: pointer;
width: 220px;
height: 3px;
background: #ff4200;
}
.bar-circle{
    position: absolute;
    bottom: 32%;
    left: 43%;
    width: 15px;
    border-radius: 50%;
    background: #ff4200;
    cursor: pointer;
}
.bar-txt{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    height: 10%;
    font-size: 80%;
}
.circle-1,
.circle-2{
    position: absolute;
    top: 51%;
    left: 48%;
    width: 20px;
    height: 20px;
    border: 1px solid #ff4200;
    z-index: -1;;
}
.circle-1{

  animation: rotate 11s infinite linear forwards;
}

@keyframes rotate{
    from{
        transform: rotateZ(0deg);
    }
    to{
        transform: rotateZ(360deg);
    }
}