body{
            background-color:rgb(27, 27,27);
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            color: antiquewhite;
        }
        span{
            color:#1DB954;
            
        }
        a {
            text-decoration: none;
            color:#1DB954;    
        }
        .head
        {
            text-align: center;
            color: #1DB954;
            background-color:rgb(47, 47,47);
            padding-top: 15px;
            padding-bottom: 15px;
            left: -8px;
            width: 1905px;
            position: relative;
            top: -21px;
        }
        
        .songs{ 
            display: grid;
            grid-template-columns: auto auto;
            grid-gap:10px; 
            position: relative;
              
        }
        .sec1{
            grid-area: 1 / 1 /span 2/ span 2;
            display: grid;
            gap:20px;
            position: relative;
            left: 205px;
            
        }
        .sec2{
            grid-area: 1 / 3 /span 1/ span 1;
            position: relative;
            top: -10px;
            height: 815px;
            width: 450px;
            border-radius: 7px;
        }
  
        .jo{
            display: grid;
            grid-template-rows: auto;
            grid-template-columns: 1fr 2fr;
            border-radius: 7px; 
            position: relative;
            height: 180px;
            
            
        }
        .husn{
            display: grid;
            grid-template-rows: auto;
           grid-template-columns: 1fr 2fr;
           border-radius: 7px; 
            
             position: relative;
            height: 180px;
            
        }
        .baarishein{
                    display: grid;
            grid-template-rows: auto;
            grid-template-columns: 1fr 2fr;
            border-radius: 7px; 
            position: relative;
            height: 180px;
            
        }
        .alag{
                    display: grid;
            grid-template-rows: auto;
            grid-template-columns: 1fr 2fr;
            border-radius: 7px; 
            position: relative;
            height: 180px;
            
        }
        .jo:hover{
         /*transform: scale(1.008);*/
         transform: translate(20px,0px);
         transition: 100ms ease-out; 
         background-color: rgb(44, 44, 44);      
        }
        .husn:hover{
         /*transform: scale(1.008);*/
         transform: translate(20px,0px);
         transition: 100ms ease;
         background-color: rgb(44, 44, 44);
        }
        .baarishein:hover{
         /*transform: scale(1.008);*/
         transform: translate(20px,0px);
         transition: 100ms ease;
         background-color: rgb(44, 44, 44);
        }
        .alag:hover{
         /*transform: scale(1.008);*/
         transform: translate(20px,0px);
         transition: 100ms ease;
         background-color: rgb(44, 44, 44);
        } 
        .jo_p{
            
            position: relative;
            left: 100px;
            top: 13px;
        }
        .husn_p{
            position: relative;
            left: 100px;
            top: 13px;

        }
        .baarishein_p{
            position: relative;
            left: 100px;
            top: 13px;

        }
        .alag_p{
            position: relative;
            left: 100px;
            top: 13px;
        }
             /* Code for Animation*/ 
    .songs .jo:hover .jo_p { visibility: visible; transition-delay: 150ms; } 
    .songs .jo .jo_p {position: relative; visibility: hidden; }
    .songs .jo:hover h1 { display: none; transition-delay: 150ms; }

    .songs .husn:hover .husn_p { visibility: visible; transition-delay: 150ms;} 
    .songs .husn .husn_p {position: relative; visibility: hidden;}
    .songs .husn:hover h1 { display: none; transition-delay: 150ms;}

    .songs .baarishein:hover .baarishein_p { visibility: visible; transition-delay: 150ms; } 
    .songs .baarishein .baarishein_p {position: relative; visibility: hidden;}
    .songs .baarishein:hover h1 { display: none; transition-delay: 150ms; }

    .songs .alag:hover .alag_p { visibility: visible;transition-delay: 150ms;} 
    .songs .alag .alag_p {position: relative; visibility: hidden;}
    .songs .alag:hover h1 { display: none; transition: 150ms ease-in-out;} 

    .songs h1 {
             position: relative;
             top: 30px;
             text-align: center;
             left: -200px;    }

                         /*sec2 */
    .sec2{
        display: grid;
        gap:10px;
        background-color:rgb(47, 47,47);
            position: relative;
            left: 150px;
    } 
    .sec2 h2{
        position: relative;
        left: 35px;
    }
    .sec2 button{
        position: relative;
        left:90px;
        background-color: black;
    }                    
    .sec2 button:hover{
        transform: scale(1.008);
         transition: 100ms ease;
         box-shadow:0 0 5px beige;
    } 
    .sec2 h3{
        display: inline;
        position: relative;
        top: -30px;
        left: 140px; }

    .item1:hover{position: relative; background-color: rgb(70, 70, 70); border-radius: 10px; color: #39aa61;}
    .item2:hover{position: relative; background-color: rgb(70, 70, 70); border-radius: 10px; color: #39aa61;}
    .item3:hover{position: relative; background-color: rgb(70, 70, 70); border-radius: 10px; color: #39aa61;}
    .item4:hover{position: relative; background-color: rgb(70, 70, 70); border-radius: 10px; color: #39aa61;}
    .item5:hover{position: relative; background-color: rgb(70, 70, 70); border-radius: 10px; color: #39aa61;}
    .item6:hover{position: relative; background-color: rgb(70, 70, 70); border-radius: 10px; color: #39aa61;}
    .item7:hover{position: relative; background-color: rgb(70, 70, 70); border-radius: 10px; color: #39aa61;}