body{

    font-family: 'Vazir';
}

.section1 > button {

    margin-top: 100px;
}


.discotitle span{
   

width: 100%;
font-weight: 300;
text-align: center;
font-size: 3vw;

	color: #fffff7;
	font-family: 'Vazir';
text-shadow: 2px 2px 4px #000000;

}


.discotitle{
position: relative;

width: 100%;
text-align: center;
font-size: 5vw;
color: #f68b1f;
transition: 1s ease-in;
/* font-family: 'Playfair Display SC', serif; */
/* font-family: 'Poppins', sans-serif; */
font-family: 'Vazir';
text-shadow: 4px 4px 2px #000000;
}

.albumcontainer{

    display: flex;
    flex-direction: column;
}


.albumcontainer .box1{
    display: flex;
    flex-direction: row;
 
}

.albumimg{
    flex: 1;
    margin-right: 15%;
    

}
.albuminfo{
    flex: 1;
    font-size: 16px;
    font-family: 'Vazir';
    margin-right: 5%;


}
.albumtitle{
    font-size: 2vw;
    font-family: 'Vazir';

    /* font-family: 'Cormorant Garamond', serif; */

}
.albumtitle span{
    font-size: 1.5vw;
    font-family: 'Vazir';
   color: #FFFFF7;

    /* font-family: 'Cormorant Garamond', serif; */

}
.albumpara{
    font-weight: 400;

}
.availability{
    font-size: 14px;
    color: whitesmoke;
}



/* Dark Version */


.albumcontainerd{

    display: flex;
    flex-direction: column;
}


.albumcontainerd .box1{
 
    display: flex;
    flex-direction: row;
 
 
}

.albumimgd{
    flex: 1;
    margin-right: 15%;

}
.albuminfod{
    flex: 1;
    font-size: 16px;
    color: #4d4e49;
    font-family: 'Vazir';
    margin-right: 5%;


}
.albumtitled{
   font-size: 2vw;
    font-family: 'Vazir';
    color: black;

    /* font-family: 'Cormorant Garamond', serif; */

}
.albumtitled span{
    font-size: 1.5vw;
    font-family: 'Vazir';
    color: #252525;

    /* font-family: 'Cormorant Garamond', serif; */

}

.albumparad{
    font-weight: 400;

}
.availabilityd{
    display: none;
    font-size: 14px;
    color: #4d4e49;
}

a.linktoout:link {
	color: white;
	text-decoration: none;
 

    
	
  }


  a.linktoout:hover{
	color: #f68b1f;
	text-decoration: none;
 

    
	
  }

  a.linktoout {
	color: white;
  
	text-decoration: none;
    
	
  }
/* 
dark link */


a.linktooutdark:link {
    color: darkslategray;
	text-decoration: none;
 

    
	
  }


  a.linktooutdark:hover{
	color: #f68b1f;
	text-decoration: none;
 

    
	
  }

  a.linktooutdark {
    color: darkslategray;
  
	text-decoration: none;
    
	
  }

  .wrapperdisco .button {
    flex: 2;
   display: inline-block;
    width: 50px;
    height: 50px;
    margin: 10px 10px 0 0 ;
    background: white;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 10px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease-out;
    overflow: hidden;
    color: #2F1A1A;
    
   
   
}
.wrapperdisco .button:hover {
   
transform: scale(1.3);

    
   
   
}




.wrapperdisco .button .icon{
   display: inline-block;
    width: 50px;
    height: 50px;
border-radius: 10px;
    box-sizing: border-box;
    text-align: center;
    line-height: 40px;
    
   
   
}
.wrapperdisco .button:nth-child(1) .icon{
    background-color: #FFFFF7;
        color: #4267B2;
        
       
       
    }
    
    .wrapperdisco .button:nth-child(2) .icon{
        background-color: #FFFFF7;
        color: #833AB4;
        
       
       
    }
    .wrapperdisco .button:nth-child(3) .icon{
        background-color: #FFFFF7;
        color: #1DB954;
        
       
       
    }
    .wrapperdisco .button:nth-child(4) .icon{
        background-color: #FFFFF7;
        color: #833AB4;
        
       
       
    }
    .wrapperdisco .button:nth-child(5) .icon{
        background-color: #FFFFF7;
        color:#F4B400;
       
       
    }
    .wrapperdisco .button:nth-child(6) .icon{
        background-color: #FFFFF7;
        color: #FF0000;
       
        
        
       
       
    }

.wrapperdisco .button:nth-child(1):hover .icon{
background-color: #4267B2;
    color: #FFFFF7;
    
   
   
}

.wrapperdisco .button:nth-child(2):hover .icon{
background-color: #833AB4;
    color: #E7E6E6;
    
   
   
}
.wrapperdisco .button:nth-child(3):hover .icon{
background-color: #1DB954;
    color: white;
    
   
   
}
.wrapperdisco .button:nth-child(4):hover .icon{
background-color: #833AB4;
    color: whitesmoke;
    
   
   
}
.wrapperdisco .button:nth-child(5):hover .icon{
background-color: #DB4437;
    color:#F4B400;
   
   
}
.wrapperdisco .button:nth-child(6):hover .icon{
background-color: #FF0000;
    color: white;
   
    
    
   
   
}


.wrapperdisco .button .icon i{ 
font-size: 25px;


    line-height: 50px;
    
   
   
}
.wrapperavar .button {
	display: inline-block;
	 width: 50px;
	 height: 50px;
	 margin: 10px 10px 0 0 ;
	 background: white;
	 border-radius: 10px;
	 cursor: pointer;
	 box-shadow: 0 10px 10px rgba(0,0,0,0.1);
	 transition: all 0.3s ease-out;
	 overflow: hidden;
	 color: #2F1A1A;
	 
	
	
}
 .wrapperavar .button:hover {
	
transform: scale(1.3);


	 
	
	
}




 .wrapperavar .button .icon{
	display: inline-block;
	 width: 50px;
	 height: 50px;
border-radius: 10px;
	 box-sizing: border-box;
	 text-align: center;
	 line-height: 40px;
	 
	
	
}


 .wrapperavar .button:nth-child(1) .icon{
background-color: #4267B2;
	 color: white;
	 
	
	
}

 .wrapperavar .button:nth-child(2) .icon{
background-color: #00cc66;
color:whitesmoke;
	 
	
	
}
 .wrapperavar .button:nth-child(3) .icon{
background-color: whitesmoke;
color: #FF0000;
	 
	
	
}
 .wrapperavar .button:nth-child(4) .icon{
background-color:whitesmoke;
	 
	 
	
	
}
 .wrapperavar .button:nth-child(5) .icon{
background-color: #ffffff ;
	 color:#ff6600;
	
	
}
 .wrapperavar .button:nth-child(6) .icon{
background-color: whitesmoke;
	 color: #FF0000;
	
	 
	 
	
	
}
.wrapperavar .button:nth-child(6):hover .icon{
    background-color:#FF0000;
         color: #ffffff;
        
         
         
        
        
    }


 .wrapperavar .button .icon i{ 
font-size: 25px;
 
 
	 line-height: 50px;
	 
	
	
}




 .wrapperavar .button span{ 
font-size: 20px;
 margin-left: 10px;
 
	 line-height: 40px;
	 
	
	
}

 .wrapperavar{
	display: inline-block;
	
}


  @media only screen and (max-width: 1024px) {


 
    
    



  }

@media only screen and (max-width: 600px) {
    body {
      background-color: rgb(0, 0, 0);
    }

    .albumcontainer .box1{
        display: flex;
        flex-direction: column;
       margin-top: 20%;
      

     
    }


 


    .albumcontainer{
    
        display: flex;
        flex-direction: row;
       height: 100vh;
  
    }
    
    
    .albumcontainer .box1{
        display: flex;
        flex-direction: column;
align-items: flex-start;

     
    }
    
    .albumimg{
        flex: 1;
        padding-top: 0;
        margin-right: 5%;
        width: 55%;
      
    
    }
    .albuminfo{
        flex: 3;
        font-size: 2.5vw;
        color: white;
        font-family: 'Vazir';
        margin-right: 5%;
        align-items: center;
        margin-right: 5%;
       
    
    
    }
    .albumtitle{
        font-size: 4vw;
        font-family: 'Vazir';
        color: white;
        margin-right: 5%;
   
        /* font-family: 'Cormorant Garamond', serif; */
    
    }
    .albumtitle span{
        font-size: 2.5vw;
        font-family: 'Vazir';
        color: white;
    
        /* font-family: 'Cormorant Garamond', serif; */
    
    }
    
    .albumpara{
        font-weight: 400;
    
    }
    .availability{
        font-size: 8px;
        color: #4d4e49;
        display: none;
    }
    
    
    
    /* Dark Version */
    
    
    .albumcontainerd{
    
        display: flex;
        flex-direction: row;
       height: 100vh;
       margin-top: 20%;
  
    }
    
    
    .albumcontainerd .box1{
        top: 200px;
        display: flex;
        flex-direction: column;
align-items: flex-start;

     
    }
    
    .albumimgd{
        flex: 1;
        margin-right: 5%;
        width: 55%;
 
      
    
    }
    .albuminfod{
        flex: 3;
        font-size: 12px;
        color: #4d4e49;
        font-family: 'Vazir';
        margin-right: 5%;
        align-items: center;
        margin-right: 5%;
       
    
    
    }
    .albumtitled{
        font-size: 4vw;
        font-family: 'Vazir';
        color: black;
        margin-right: 5%;
        /* font-family: 'Cormorant Garamond', serif; */
    
    }
    .albumtitled span{
        font-size: 2.5vw;
        font-family: 'Vazir';
        color: #4d4e49;
        margin-right: 5%;
    
        /* font-family: 'Cormorant Garamond', serif; */
    
    }
    
    .albumparad{
        font-weight: 400;
    
    }
    .availabilityd{
        font-size: 8px;
        color: #4d4e49;
        display: none;
        margin-right: 5%;
    }
    
    .wrapperdisco .button {
        flex: 2;
       display: inline-block;
        width: 35px;
        height: 35px;
        margin: 10px 10px 0 0 ;
        background: white;
        border-radius: 5px;
        cursor: pointer;
        box-shadow: 0 10px 10px rgba(0,0,0,0.1);
        transition: all 0.3s ease-out;
        overflow: hidden;
        color: #2F1A1A;
        
       
       
    }
    .wrapperdisco .button:hover {
       
    transform: scale(1);
    
        
       
       
    }
    
    
    
    
    .wrapperdisco .button .icon{
       display: inline-block;
        width: 35px;
        height: 35px;
    border-radius: 5px;
        box-sizing: border-box;
        text-align: center;
        line-height: 40px;
        
       
       
    }
    .wrapperdisco .button .icon i{ 
        font-size: 15px;
         
         
             line-height: 30px;
             
            
            
        }

        hr{
            display: none;
        }


        .wrapperavar .button {
            flex: 2;
           display: inline-block;
            width: 35px;
            height: 35px;
            margin: 10px 10px 0 0 ;
            background: white;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 10px 10px rgba(0,0,0,0.1);
            transition: all 0.3s ease-out;
            overflow: hidden;
            color: #2F1A1A;
            
           
           
        }
        .wrapperavar .button:hover {
           
        transform: scale(1);
        
            
           
           
        }
        
        
        
        
        .wrapperavar .button .icon{
           display: inline-block;
            width: 35px;
            height: 35px;
        border-radius: 5px;
            box-sizing: border-box;
            text-align: center;
            line-height: 40px;
            
           
           
        }
        .wrapperavar .button .icon i{ 
            font-size: 15px;
             
             
                 line-height: 30px;
                 
                
                
            }

  }