:root {
  --white-color: #ffffff;
  --black-color: #000000;
  --youtube-color: #ff0000;
  --apple-color: rgb(251, 63, 89);
  --spotify-color: rgb(30, 215, 96);
  --beatport-color: rgb(1, 255, 149);
  --gray-color: rgb(160, 160, 160);
  --title-hover-color: rgba(0, 0, 0, 0.7);
  --light-green-hover-color: #bbfab7;
  --gradient-gray-color: #656965;
  --gradient-green-color: #3e5536;
} 

body {
  font-family: "Oxanium", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
  margin: 0;
}



a {
  text-decoration: none;
  color: var(--white-color);
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/*header*/





.link-menu {
 
  padding: 70px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  



  @media (min-width: 769px) {
    display: flex;
      justify-content: center;
      align-items: center;
     height: 44px;
      padding: 70px 10px;
      
      
    }

}


.releases-header{
  padding: 50px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    background: black;
   
  
  
    @media (min-width: 769px) {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 44px;
      padding: 50px 10px;
  
  
    }
}

.link {

  padding: 8px 16px;
  border-radius: 8px;
  transition: 1.01s;
  box-shadow: 0px 5px 10px 0px rgba(0, 255, 234, 0.7);


  @media (min-width: 769px) {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 44px;
 
  padding: 4px 20px;
    }

}

.link:hover {


box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.7);
transition: 1.01s;
}

.home-border{
  padding: 8px 26px;
    border-radius: 8px;
    transition: 1.01s;
    box-shadow: 0px 5px 10px 0px rgba(0, 255, 234, 0.7);
  
  
    @media (min-width: 769px) {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 44px;
  
      padding: 4px 30px;
    }
}

/*header*/

/*main*/

.back{
background-image: url("./img/background.jpg");
  background-size: cover;
}

.home {
  height: 600px;
  

  display: flex;
  justify-content: center;
  align-items: center;



}

.home-releases {
background: black;
  display: flex;
  justify-content: center;

 
  

}

.title {
  margin: 0;
  font-size: 90px;
  color: var(--white-color);
  transition: 1.1s;
 
}

.title:hover {
  color: var(--title-hover-color);
  transition: 1.1s;
}

/*main*/

/*releases*/






.all-releases{


    @media (min-width: 376px) {
        display: flex;
        flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
      }
}




.list-releases {
  padding-top: 20px;
  padding-bottom: 20px;
background-color: #f2f3f5;
  border-radius: 14px;
  margin: 20px 20px;
  transition: 1s;



  @media (min-width: 376px) {
  
      padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
       
        border-radius: 10px;
        margin: 20px 20px;
        transition: 1s;
    }

}

.list-releases:hover {
  transform: scale(1.03);
  transition: 1s;
box-shadow: inset 0px -392px 90px 0px rgba(0, 0, 0, 0.7);
}

.name {
  font-size: 16px;
  color: var(--black-color);
  text-align: center;
}

.img-cover {
  border-radius: 10px;
  margin: auto;
  display: block;
}

.audio {
  margin: auto;
  display: block;
  width: 260px;
  height: 48px;
}

.inform-all-releases {
  color: var(--white-color);
  margin: 20px;
  text-align: center;
}

/*releases*/

/*footer*/



.footer-container {
  background: linear-gradient(45deg, var(--black-color), var(--white-color));

 
box-shadow: inset 0px 15px 10px 0px rgba(0, 0, 0, 0.7);

}

.footer-menu {
  display: flex;
  justify-content: center;
  gap: 30px;
  padding-top: 36px;

  @media (min-width: 769px) {
    padding-top: 16px;
    }

}

.address-info {
  display: flex;
  justify-content: center;



}

.social-list {
  gap: 30px;
  padding: 20px 10px;

@media (min-width: 426px) {
display: flex;
  flex-wrap: wrap;
justify-content: space-between;
max-width: 300px;
 
  }

    @media (min-width: 769px) {
      display: flex;
flex-wrap: nowrap;
justify-content: center;

    }

}

.footer-button {
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.7);
  margin-top: 20px;
}

.footer-button:hover {

  margin-top: 20px;
  box-shadow: 0px 5px 10px 0px rgba(0, 255, 234, 0.7);
}


.social-logo {
  width: 100px;
  fill: var(--white-color);
  transition: 1.05s;


}

.social-logo:hover {
  scale: 1.14;
  transition: 1.05s;
}

.hover-beatport:hover {
  fill: var(--beatport-color);
}

.hover-spotify:hover {
  fill: var(--spotify-color);
}

.hover-apple:hover {
  fill: var(--apple-color);
}

.hover-youtube:hover {
  fill: var(--youtube-color);
}

.hover-youtube:hover {
  fill: var(--youtube-color);
}

.copyright {
  color: var(--white-color);
  display: flex;
  justify-content: center;
  padding-top: 4px;
  padding-bottom: 36px;
  font-size: 16px;
}

/*footer*/