:root{
    --Accentcolor1: beige;
    --Accentcolor2: rgb(18, 155, 18);
    --bgAccentcolor2: rgba(18, 155, 18, 0.24);
    --dropdowncolor: rgba(15, 15, 15, 0.685);
    scrollbar-width: none;/* Hide the scrollbar in Firefox */
    -ms-overflow-style: none; /* Hide the scrollbar in IE/Edge */


}

/* -----------------------------------

        Universal Properties 

--------------------------------------  */

*::-webkit-scrollbar {
    display: none; /* Hide the scrollbar in Chrome/Safari */
  }
body{
    background-image: url('Assests/mainbg.jpg');
    background-size: cover;
    background-repeat:repeat-y;
    color: var(--Accentcolor1);
    font-family:'Courier New', Courier, monospace;
    caret-color: transparent;
     scrollbar-width: none;/* Hide the scrollbar in Firefox */
    -ms-overflow-style: none; /* Hide the scrollbar in IE/Edge */
    animation: 1s ease-out 0s 1 slideIn;
}
body::-webkit-scrollbar {
    display: none; /* Hide the scrollbar in Chrome/Safari */
  }
section{
    margin-bottom: 6%;
}

a{
    color: inherit;
    text-decoration: none;
}

/* -----------------------------------

        Reusable classes 

--------------------------------------  */


.ring{
    margin: 1vw;
    height: 3.5vw;
    width: 3.5vw;
    background-size: cover;
    background-repeat: no-repeat;
    border:3px solid var(--Accentcolor1);
    border-radius: 50%;
}
.flexdisplay{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.rightalign{
    position: relative;
    left:20px;
}
.smallf{
    font-size: 0.9rem;
}
/* ----------------------
    
    whole page Animation
    
 ------------------------ */


@keyframes slideIn {
    0% {
      transform: translateY(-100%);
    }
    100% {
      transform: translateY(0);
    }
  }
/* ----------------------
    
    Navigation bar
    
 ------------------------ */
 nav{
    width: 100vw;
    width:100dvw;
    position: sticky;
    top:0;
    z-index: 9000; /*Its over 9000*/
    background-image: url('Assests/mainbg.jpg');
    background-size: cover;

}
#navbar{
    border-bottom: 3px solid var(--Accentcolor1);
    width: 100vw;
    width:100dvw;
 
}
    /* 
        Left side of navigation bar
                                        */
    
    #navlogo{
        background-image: url('Assests/logo.png');
    }
    #player_name{
        margin: 1vw;
        margin-top: 2vw;
    }
    #pname1{
        font-weight: bolder;
    }
    #pname2{
        font-size: 1.1rem;
        font-weight: bolder;
    }
    #page1,#page2,#page3{
        font-size: 1.1rem;
        margin-left:3vw;  
        font-weight: bolder;
        cursor: pointer;
    }
    /* 
        Right side of navigation bar
                                        */

    #account{
        background-image: url('Assests/pro\ dp\ 2.jpg');
    }
    #searchbar{
        background-color: rgb(109, 109, 109);
        border: 0;
        border-radius: 15px;
       
        color :var(--Accentcolor1);
        padding: 8px;
        margin: 2vw;
    }
    #searchbar input{
        background-color: transparent;
        width: 20vw;
        border: 0;
        color: var(--Accentcolor1);
    }
    @media screen and (max-width:768px){
        #searchbar input{
            width: 15vw;
        }
    }
    @media screen and (max-width:425px){
        #player_name{
            display: none;
        }
        #searchbar input{
            width: 10vw;
        }
        #page1,#page2,#page3{
            font-size: 0.8rem;
            margin-left:1vw;  
        }
        #notibell{
            font-size: 1rem!important;
        }
    }
    #notibell{
        font-size: 1.8rem;
    }

    /* -------------------------------
    
        Main and Aside formatting 
        
    -----------------------------------*/
   
    main{
            height: fit-content;
            position: relative;
            padding-top: 20px;
            display: inline-block;
            margin-left:2vw;
            margin-right: 1%;
            margin-top: 7%;
            padding :2%;
            width:60dvw;
            /* border: 2px dotted red; */
            overflow-x: visible;

   }
   aside{
            position: absolute;
            display: inline-block;
            margin-left:0.5vw;
            margin-right: 2vw;
            margin-top: 7%;
            padding:1%;
            width:30dvw;
            overflow-x: visible;
            /* border: 2px dotted blue; */
   }
   @media screen and (max-width:768px) {
    main{
        display:block;
        width: 100%;
     
    }
    aside{
        display:flex;
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
    .part1aside{
        display: inline-block;
        max-width: 50%;
    }   
    .part2aside{
        position: relative;
        left: 20%;
        display: inline-block;
        max-width: 40%;
    } 
   }

   /* -------------------------------
    
        Mobile View Corrections 
        
    -----------------------------------*/

    @media screen and (max-width:425px) {
        main{
            margin-left: auto;
        }
        aside{
            width: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            
        } 
        .part1aside{
            position: relative;
            left: 10%;
            display: inline-block;
            max-width: 80%;
        }   
        .part2aside{
            position: relative;
            left: 10%;
            display: inline-block;
            max-width: 80%;
        } 
        .shcontainer {
            flex-wrap: wrap;
            flex-direction: column;
        }
        .shsong{
            width: 90% !important; /* It was breaking in mobile view thats why */
        }
        .ltsongname{
            font-size: x-small;
        }
        
       }
      
 /* ---------------------------- 
          
       Artist Card Formattig 
 
    ----------------------------*/ 
.Artist-Bio-container{
    display: flex;
    overflow: hidden;
    
}
 /* ---------------------------- 
       Artist Photo 
    ----------------------------*/ 
.Artist-pic{
    flex-shrink: 2;
}
.Artist-pic img{
    display: flex;
    margin-right: 2vw;
}
 /* ---------------------------- 
       Artist Bio 
    ----------------------------*/ 
.Artist-Bio{
    display: inline-block;
}
.name{
    font-size: 3rem;
}
.info{
    padding-left: 1vw;
}
.para{
    font-size: small;
}
@media screen and (max-width:1024px) {
    .para{
        font-size: x-small;
    }   
    .Artist-pic img{
        height: 30vh;
        width: 20vw;
        display: flex;
        margin-right: 2vw;
    }
}
@media screen and (max-width:768px) {
    .para{
        font-size: small;
    }   
    .Artist-pic img{
        display: none;
        
    }
}

/*------------------------------------
      
His Album Section  

-------------------------------------      */
.hisalbums{
margin-top: 2vh;
/* border: 1px dotted green; */
height: 50dvh;
width: 100%;
display: flex;
flex-direction: column;
overflow-y: scroll; 
scrollbar-width: none;/* Hide the scrollbar in Firefox */
-ms-overflow-style: none; /* Hide the scrollbar in IE/Edge */
}

.hisalbums::-webkit-scrollbar {
display: none; /* Hide the scrollbar in Chrome/Safari */
}

.tsong{
padding: 0.2vw;
padding-left: 0.4vw;
padding-right: 0.6vw;
margin-bottom: 1vw;
background-color: var(--bgAccentcolor2);
}
.tsong-leftwing{
display: flex;
align-items: center;
}
.tsongart{
height: 6vw;
width: 6vw;
margin-right: 0.5vw;
background-size: cover;
background-position: center;
}
 /* ---------------------------- 
       Play Button 
    ----------------------------*/
.playbutton button{
    width: 10vw;
    height: 5vh;
    border: none;
    background-color: #378b29;
    background-image: linear-gradient(135deg, #378b29 0%, #4a8551 74%);
    color: var(--Accentcolor1);
    font-weight: bolder;
}
.records{
    margin-top: 2vh;
    font-size: small;
} 
.follow{
    margin-left: 09vw;
}
 /* ---------------------------- 
          
       Making of dropdown here 
 
    ----------------------------*/

 .dropdown{
    display: inline-block;
}
.dropdown .dropdown_trigger{
    font-size: 1.1rem;
    background-color: none;
    color: var(--Accentcolor2);
    cursor: pointer;
}
.dropdown .dropdown-cell{
    display: block;
    color: var(--Accentcolor2);
    border-bottom: 1px solid var(--dropdowncolor);
    padding: 2px;

}
.dropdown .dropdown-content{
    display: none;
    background-color: var(--dropdowncolor);
    position: absolute;
    min-width: 100px;
    box-shadow: 2px 2px 5px var(--Accentcolor2);
    z-index: 100;
}
.leftwing{
    position: absolute;
    left:0;
}
.dropdown:hover .dropdown-content{
    display: block;
    z-index: 100;
}
.dropdown:hover .dropdown_trigger{
    background-color: var(--dropdowncolor);
}
.dropdown .dropdown-content .dropdown-cell:hover{
    background-color: var(--Accentcolor1);
}


/* -----------------------------

        SuperHits section       
 
  ------------------------------ */
.shcontainer{
    flex-wrap: wrap;
}
.shsong{
    width: 90%;
    margin: 5px;
    margin-bottom: 15px;
}
.songart.lr1{
    background-image: url(Assests/lr1.jpeg);
}
.songart.lr2{
    background-image: url(Assests/moye.jpeg);
}
.songart.lr3{
    background-image: url(Assests/lr3.jpeg);
}
.songart.lr4{
    background-image: url(Assests/tswift.jpeg);
}
/* -----------------------

        Play button code 
        
    ------------------------*/
.play-toggle-container{
    visibility: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.315);
}
.songart:hover .play-toggle-container{
    visibility: visible;
}
.play-pause-icon{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-image: url('Assests/play.png');
    background-size:30%;
    background-repeat: no-repeat;
    background-position: center;
}
.play-toggle{
    display: none;
}
  .play-toggle:checked + .play-pause-icon{
    background-image: url('Assests/pause.png');
  }
.timestamp{
    font-size: 0.8rem;
    color:gray
}
.lrdetails
{
    display: flex;
    align-items: center;
}

/* ----------------------------------

    Used in Artist Songs
    
    ----------------------------------*/
.ltcontainer{
    margin-top: 5vh;
    margin-bottom: 5vh;
    justify-content: space-evenly;
}
.ltsong{
    height: 8vw;
    width: 8vw;
    background-size: cover;
    margin-bottom: 2vh;
}
.ltdate{
    font-size: x-small;
    color:grey;
}

.songart{
    content: ''; 
    display: inline-block;
    width: 50px; /* Set the width */
    height: 50px; /* Set the height */
    background-size: cover; /* Adjust the background size */
    margin-right: 15px;
   }
    
/*  -----------------------------------------------
      
        Part-2 Aside - Trending, Premium plans  

    -------------------------------------------------    */
   

      .profile{
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 1.5rem;
        font-weight: bolder;
        color: var(--Accentcolor2);
      }
      .hr{
        width: 100%;
        border-top:2px solid var(--Accentcolor2) ;
      }
      .offers{
        color: var(--Accentcolor2);
      }
      .buynow button{
            width: 90%;
            padding: 5px 0px;
            font-size: large;
            font-weight: bolder;
            border-radius: 18px;
            color: var(--Accentcolor2);
            background-color: black;
            
      }
   
/*  ------------------------------------
      
        Premium offers

    -------------------------------------      */
   .premium{ 
        margin-top: 2vh;
        display: flex;
        overflow-x: hidden; 
        /* border: 1px dotted yellow; */
        height:max-content;
        width: fit-content;
        background-color: var(--Accentcolor1);
        
       }
      
    
      .plan-card{
        margin: 0.6vw;
        padding: 1vw;
        background-color: var(--bgAccentcolor2)
      }
      .tperiod{
        padding: 0.4rem;
        width: fit-content;
        border-radius: 10px;
        background-color: var(--Accentcolor2);
        font-weight: bolder;
        margin-bottom: 0.5vw;
      }
      .otpa{
        
        padding: 0.2rem;
        width: fit-content;
        border-radius: 6px;
        background-color: transparent;
        color: var(--Accentcolor2);
        border:1px solid var(--Accentcolor2);
        font-weight: bolder;
        margin-bottom: 0.5vw;
        text-wrap: nowrap;
        
        
      
      }

  /*-------------------------------------
        Left Side of Play Bar - Song info
        ------------------------------------*/
    #player{
        border-top: 4px solid var(--Accentcolor1);
        display: none; 
        position: absolute;
        height: 8vh;
        width: 100%;     
        background-color:  rgb(13, 46, 13);
        z-index: 999;
        
       
    }
    #player:target{
        display: flex;
        
        justify-content: space-between;
        position: fixed;
        bottom:0;    
    }
    .now-playing{
        display: flex;
        justify-content: space-evenly;
    }
    #stopsign{
        margin-left: 1vw;
    }

/*-------------------------------------
    Middle of Play Bar - Seekbar
 ------------------------------------*/
.Seekbar-icons{
    display: flex;
    justify-content: center;
}
.Seekbar-icons i{
    margin-left: 1vw;
    margin-right: 1vw;
}


.Seekbar {
    display: flex;
    align-items: center;
    width: 30vw;
    position: relative;
}

.before-content, .after-content {
    position: absolute;
}

.before-content {
    left: 0;
}

.after-content {
    right: 0;
}
 /*  ------------------------------------
      
        Seekbar customisation

    -------------------------------------      */
input[type="range"].custom-range {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  background: #ddd;
  border-radius: 5px;
  outline: none;
}

/* Color on the left of thumb */
input[type="range"].custom-range::-webkit-slider-runnable-track {
    background-color: #129B12;
    border-radius: 5px;
}

/* Color on the right of thumb */
input[type="range"].custom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
}

/* Styles for Firefox */
input[type="range"].custom-range::-moz-range-thumb {
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
}

/* Styles for IE */
input[type="range"].custom-range::-ms-thumb {
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5);
}

  /* -------------------------------------
        Right Side of Play Bar - Controls
        ------------------------------------ */
.extra-control{
    display: flex;

}

.extra-control i{
    margin-left: 0.1vw;
    margin-right: 0.1vw;
}
.volbar{
    width: 5vw;
    margin-right: 1vw;
}