@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&family=Varela&family=Varela+Round&display=swap');

body{
    background-color:rgb(171, 238, 216) ;

}

A {
  text-decoration: none;
  color:white;

}
*{
    padding: 0;
    margin: 0;
}
nav{
    font-family: 'Oswald', sans-serif;
    color: aliceblue;
}
 nav ul{
    display: flex;
    align-items: center;
    list-style-type: none;
    height: 65px;
    background-color: black;
 }
 nav ul li {
    padding: 0 10px;
    cursor: pointer;
    color:white;
    text-decoration: none;
 }

 .brand img{
    width:64px;

 }

 .brand{
    display:flex;
    align-items: center;
    font-weight: bolder;
    font-size: 1.3rem;
 }

 /* .image{
  
  
  width: 35%;
  float:right;
  
  
 } */

 .clock{
  height:30px;
  padding-right:15px;
  opacity: 0;
  transition: opacity 0.4s ease-in;
 }

 h1{
  font-family: 'Oswald', sans-serif ;
 }

 .container{
    min-height: 70vh;
    background-color: black;
    color:white;
    font-family: 'Varela Round', sans-serif;
    display:flex;
    width:80%;
    margin: 30px auto;
    border-radius:12px ;
    padding:30px;
    background-image: url("music.gif");
    background-size: 200px;
    flex-direction: column;
   

 }

 

 .songitems{
   /* width:50%; */
   height:50px;
   display: flex;
   justify-content: space-between;
   width: 95%;;
   align-items: center;
   background-color: white;
   border-radius: 100%;
   color:black;
   margin: 12px 0px;
   padding:0px 5px;
 } 

 .songlist{
  width:70%;
 }
 .timestamp{
   margin:0 23px;
   
   
 }

 .songitems img{
   border-radius: 34px;
   cursor: pointer;
 }

 .bottom{
    position:sticky;
    height:120px;
    background-color: black;
    display:flex;
    align-items: center;
    justify-content: center;
    color:white;
    flex-direction: column;
    
 }

 .songinfo{
   position:absolute;
   left:10vw;
   font-family: 'Varela Round', sans-serif;
 }

 .songinfo img{
   opacity: 0;
   transition: opacity 0.4s ease-in;
 }

 #myprogressbar{
    width:130vh;
    cursor: pointer;
 }

 


 .icons{
   margin-top: 14px;
 }
 .icons img{
   cursor:pointer
 }