/* Place your CSS styles in this file */
*{margin: 0;
padding: 0;}

body{background-color: black;
padding: 0;
margin: 0;}

body,html {
  height: 100%;
}

.background {background-color: black;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
background-position: top center;
position:relative ;
height:100%;
}

.background-home {background-image:url("images/VEN_3576-min.jpg");} 

.background-home::after {
  content: "";
  display: block;
  height: 20px;
  background: linear-gradient(to bottom, transparent, black);
  position: absolute;
  bottom: 0;
  width: 100%;
}


.background-news {background-image: url("images/IMG-e83142f5408076beaa21c0a96a369c14-V-min.jpg");
background-position:center;
}

.background-news::after{
  content: "";
  display: block;
  height: 20px;
  background: linear-gradient(to bottom, transparent, black);
  position: absolute;
  bottom: 0;
  width: 100%;
}

.submithub {display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 20px;}

.logo { width:15vw ;height: auto;}

.container {position: relative;}

.pozicija {position: absolute;
top: 0;
left: 50%;
transform: translateX(-55%);}

ul {list-style-type: none;
  display: flex;
  justify-content: center;
  padding: 0;
  font-family: 'Metal Mania', cursive;
  font-weight: bold;
  font-size:x-large;
  margin:0;
  }

li {
padding: 15px;
color: white;
transition: transform 0.3s;
}

li:hover{transform: scale(1.2)}

a:hover {
  color: rgb(54, 84, 139);
  cursor: pointer;
  transform: scale(1.2);
  
}

a {text-decoration: none;
color: white;
transition: transform 0.3s;}

.social-media a { font-size: clamp(2rem, 6vw, 4rem);
transition: transform 0.3s;}

.social-media {
  display: flex;
  gap: 3vw; /* space between icons */
  position: absolute;
  bottom: 30px;
  justify-content: center;
  align-items: center;
  width: 100%;
  }

.social-media a:hover {transform: scale(1.2);}


.metal-heading {
  font-family: 'Metal Mania', cursive;
  font-size: 3vw;
  text-align: center;
  color: #fff;
  font-weight: 100;
  position: relative;
  top: 5dvh;
  padding-bottom:5dvh;
  }


p {font-family: 'Metal Mania', cursive;
color: white;
font-size: 2vw;
padding-left:2vw;
}  


.about {display: flex;
align-items: center;
}

.members {display: flex;
gap:5%;
justify-content: center;
padding-top: 1%;}

.members img {width:20%;}

.members a {
  display: inline-block;
  width: 20%;
}

.members a img {
  width: 100%;
  height: auto;
  display: block;
}

.members a:hover img {
  transform: scale(1.1);
  transition: transform 0.3s;
}

.music {display: flex;
justify-content: center;
flex-direction: column;
vertical-align: center;
align-items: center;
gap: 20px;
}

.background-gigs {background-image: url("images/VEN_3620 2-min.jpg");}

table{color:#fff;
font-family: 'Metal Mania', cursive;
width: 100%;
text-align: center;
border-collapse: collapse;
font-size: 30px;
margin: auto;
margin-top: 0;

}

tr, th, td {border-bottom-style: solid;
border-bottom-color:#fff;
padding: 50px;
transition: transform 0.3s;
}

td a {color: #fff;
transition: transform 0.3s}

td a:hover {  color: rgb(24, 182, 37);
  cursor: pointer;
  transform: scale(1.2);
  
}

td:hover {transform: scale(1.2)}

#insta-contact {font-size: 3vw;}

.gallery {display:grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 10px;
} 

h1 { font-family: 'Metal Mania',cursive;
text-align: center;
color:#fff;
font-size: 3vw;}

.gallery img {width: 100%;
height:auto;
display: block;
}

.gallery a:hover{transform: none;}

.menu {display:none}

.menu-icon{
  display: none;
  background:transparent;
  color: #fff;
  padding: 12px 20px;
  font-size: 25px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  font-weight: bold;
  font-family: 'Metal Mania',cursive;
}

.menu-icon:hover{color: rgb(54, 84, 139);
  cursor: pointer;
  transform: scale(1.2);  }

.menu-checkbox {display: none;}

#contact-mobile {display:none;}

@media (max-width: 600px) {
  .background-home { background-image:none;
  }

  .background {height: auto;}

  .background-home::after{display:none}

  .container {display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;}

  .logo {
  display: block;
  width: 80%;}

  .pozicija {left:0;
  transform: translateX(0);}

  ul {flex-direction: column;
  font-size:large;
  display: none;
  align-items: center;
 }

 li { padding: 10px;}

.menu-icon {display: block;}

.menu-checkbox:checked ~ ul {display: flex;}

li:hover{transform: none}

a:hover { color:#fff;
transform: none;}

a:active {
  color: rgb(54, 84, 139);
  cursor: pointer;
  transform: scale(1.2);
}

.menu-icon:hover{color: #fff;
  transform: none;  }

  .menu-icon:active { color:rgb(54, 84, 139)}

.social-media a:hover{transform: none;}

.social-media {bottom: 5%;}

   .metal-heading {font-size: larger;
  top:2%;
  padding-bottom: 3%;}

.submithub {padding-top: 1%;}

.picture-about {display:none}

p {font-size: larger;
text-align: center;
padding-bottom: 3%;}

.members {flex-direction: column;
align-items: center;
gap:5%}

.members img {width:100%;}

.members a {
  display: inline-block;
  width: 100%; }

 .members a:hover img {
  transform: none;
}   

.spotify-embed {width:80%;}

  .background-gigs { background-image:none;}

  th {display:none}

  td, tr{ display:block;
  font-size:large;
border-bottom-style: none;
padding:2vw;}


tr { display:block;
  font-size:large;
border-bottom-style:solid;
padding:2vw;}


td a:active {  color: rgb(24, 182, 37);
  cursor: pointer;
  transform:none;
  }

td:hover {transform: none;}

#insta-contact {display: none;}

#contact {display:none}

#contact-mobile {display:block;
padding-top: 5%;}

a {text-decoration: underline;}

}

@media (min-width: 601px) and (max-width:1366px) {

.background-home { background-image:none;
  }

  .background-home::after{display:none}

   .background {height: auto;}

  .container {display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;}

  .logo {
  display: block;
  width: 80%;}


  li:hover{transform: none}

a:hover { color:#fff;
transform: none;}

a:active {
  color: rgb(54, 84, 139);
  cursor: pointer;
  transform: scale(1.2);
}

.menu-icon:hover{color: #fff;
  transform: none;  }

  .menu-icon:active { color:rgb(54, 84, 139)}

.social-media a:hover{transform: none;}

  .metal-heading {font-size: 3vw;
  top:5%;
  padding-bottom: 5%;}

  .picture-about {display:none}

p {font-size: larger;
text-align: center;
padding-bottom: 5%;}

.members {display: grid;
grid-template-columns: auto auto;
padding-bottom: 50px;}

.members img {width:100%;}

.members a {
  display: inline-block;
  width: 100%; }

 .members a:hover img {
  transform: none;
}   

  th {display:none}

  td, tr{ display:block;
  font-size:large;
border-bottom-style: none;
padding:1vw;}


tr { display:block;
  font-size:large;
border-bottom-style:solid;
padding:1vw;}


td a:active {  color: rgb(24, 182, 37);
  cursor: pointer;
  transform:none;
  }

td:hover {transform: none;}

#insta-contact {display: none;}

#contact {display:none}

#contact-mobile {display:block;
padding-top: 5%;}

 .background-gigs { background-image:none;}
}