@font-face {
  font-family: 'Impact Label Reversed';
  src: url('fonts/Impact Label Reversed.eot');
  src: url('fonts/Impact Label Reversed.eot?#iefix') format('embedded-opentype'),
    url('fonts/Impact Label Reversed.woff2') format('woff2'),
    url('fonts/Impact Label Reversed.woff') format('woff'),
    url('fonts/Impact Label Reversed.svg#Impact Label Reversed') format('svg');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0020-00FD;
}

@font-face {
  font-family: 'Droom Dit Hhbnedron';
  src: url('fonts/Droom Dit Hhbnedron Regular.eot');
  src: url('fonts/Droom Dit Hhbnedron Regular.eot?#iefix') format('embedded-opentype'),
    url('fonts/Droom Dit Hhbnedron Regular.woff2') format('woff2'),
    url('fonts/Droom Dit Hhbnedron Regular.woff') format('woff'),
    url('fonts/Droom Dit Hhbnedron Regular.svg#Droom Dit Hhbnedron Regular') format('svg');
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  unicode-range: U+0020-00A0;
}

@font-face {
  font-family: 'handelgothicregular';
  src: url('fonts/handelgothic_regular-webfont.woff2') format('woff2'),
    url('fonts/handelgothic_regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}


:root {
  --yellows: #E5B20B;
  --darkyellow: #4d421e;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

/* html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
} */

/* Zorg dat de content groeit en de footer naar beneden duwt */
.content {
  flex: 1;
}

html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

body {
  height: 100%;
  background-image: url("/images/bg.png");
  background-color: #000000;
  font-family: 'Impact Label Reversed';
  color: white;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  /* margin-right: calc(100vw - 100%); */
}

H1 {
  /* H1_S */
  font-family: 'handelgothicregular';
  font-style: normal;
  font-weight: 400;
  font-size: 22px;
  line-height: 24px;
  /* identical to box height */
  text-align: center;

  color: white;


  /* Inside auto layout */
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;

}


H2 {
  font-family: 'handelgothicregular';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  /* identical to box height */
  text-align: left;

  color: var(--yellows);


  /* Inside auto layout */
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1024px;
  padding: 20px;
  box-sizing: border-box;
}

.header img {
  height: 40px;
}

.logo {
  font-family: 'handelgothicregular';
  font-size: 36px;
  color: var(--yellows);
  top: 20;
  left: 20;
}

@media (max-width: 600px) {
  .menubutton:hover {
    filter: drop-shadow(0px 0px 5px var(--yellows));
    border-radius: 4px;
  }

  .menubutton {
    filter: drop-shadow(0px 0px 20px var(--yellows));
    border-radius: 2px;
  }

  .header img {
    height: 30px;
  }
}

.moon {
  position: fixed;
  top: 50%;
  right: 0px;
  width: 200px;
  z-index: -1;
  transform: translateY(-50%);
}

.rounded {
  border-radius: 15px;
  width: 100%;
}


.biocontainer {
  max-width: 1024px;
  width: 100%;
  position: relative;
  z-index: 1;
  /* background: rgba(255, 255, 255, 0.8); */
  padding: 20px;
  border-radius: 10px;
}

.muziekcontainer {
  max-width: 1024px;
  width: 100%;
  position: relative;
  z-index: 1;
  /* background: rgba(255, 255, 255, 0.8); */
  padding: 20px;
  border-radius: 10px;
}

.contactcontainer {
  max-width: 1024px;
  width: 100%;
  position: relative;
  z-index: 1;
  /* background: rgba(255, 255, 255, 0.8); */
  padding: 20px;
  border-radius: 10px;
}


.right {
  text-align: right;
  width: 50%;
}

.hidden {
  display: none;
}

.hero {
  max-width: 1024px;
  width: 100%;
  padding: 20px;
}

.hero-container {
  display: flex;
  justify-content: space-between;
  /* Zorgt dat de kolommen naast elkaar staan */
  gap: 20px;
  /* Ruimte tussen de kolommen */
}

.hero-column {
  width: 48%;
  /* Zorgt dat de kolommen netjes naast elkaar passen */
  text-align: center;
}

@media (max-width: 600px) {
  .hero-container {
    flex-direction: column;
    /* Stapel de kolommen onder elkaar */
    align-items: center;
    /* Centreer ze als dat gewenst is */
  }

  .hero-column {
    width: 100%;
    /* Laat de kolommen de volledige breedte innemen */
  }
}


.text-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  gap: 15px;
  margin-top: 30px;
}

.button {
  color: white;
  background-color: black;
  text-decoration: none;
  text-align: center;
  padding: 10px;
  border: 3px solid white;
  border-radius: 20px;
  min-width: fit-content;
  transition-behavior: normal;
  transition-duration: 0.23s;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
  transition-property: all
}

.button:hover {
  background-color: var(--yellows);
}

.uitgelicht {
  max-width: 1024px;
  width: 100%;
  padding: 20px;
}




.icontainer {
  display: flex;
  /* width: 80%; */
  /* max-width: 1024px; */
  /* gap: 20px; */

  max-width: 1024px;
  width: 100%;
  position: relative;
  z-index: 1;
  /* background: rgba(255, 255, 255, 0.8); */
  /* padding: 20px; */
  border-radius: 10px;
}

.icontainer .column {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.icontainer .content {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.icontainer .content img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0px 0px 5px var(--yellows));
  border-radius: 4px;
}

.icontainer .content a {
  width: 60%;
}

.icontainer .content p {
  width: 45%;
  font-size: 16px;
  line-height: 1.5;
}



@media (max-width: 600px) {
  .icontainer {
    flex-direction: column;
    /* Stapel de kolommen onder elkaar */
    align-items: center;
    /* Centreer ze als dat gewenst is */
  }

  .icontainer .column {
    width: 100%;
    /* Laat de kolommen de volledige breedte innemen */
  }

  .icontainer .content p {
    font-size: 14px;
    line-height: 1.2;
  }
}


.kop {
  /* display: flex; */
  /* flex-direction: column;
  align-items: stretch;
  width: max-content; */

  font-family: 'handelgothicregular';
  /* position: relative; */
  margin: 20px auto;
  margin-top: 50px;
  /* top: 0;
  right: 0;
  bottom: 0;ß
  left: 0; */
  /* height: 95px; */
  border-radius: 3px;
}

.line1,
.line2,
.line3 {
  display: flex;
}

.line1 {
  color: white;
  font-size: 24px;
  margin: 0px;
  justify-content: flex-start;
}

.line2 {
  color: var(--yellows);
  font-size: 36px;
  margin: 0px;
  margin-top: -5px;
  justify-content: space-between;
}

.line3 {
  color: white;
  font-size: 24px;
  margin: 0px;
  margin-top: -5px;
  justify-content: flex-end;
}

#gigs {
  border-collapse: collapse;
  position: relative;
  margin: 25px auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 800px;
  padding: 20px;
}

#gigs a {
  color: white;
}

#gigs td,
#gigs th {
  border: 0px solid #ddd;
  padding: 8px;
  text-align: left;
}


#gigs th {
  padding-top: 12px;
  padding-bottom: 12px;
  font-weight: bold;
  /* text-align: center; */
  color: white;
}


@media (max-width: 600px) {
  #gigs {
    width: 100%;
  }

  #gigs table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  #gigs thead {
    display: none;
    /* Verberg de koptekst op kleine schermen */
  }

  #gigs tr {
    margin-bottom: 10px;
    /* border: 1px solid black; */
    padding: 10px;
    border-bottom: 1px dashed white;
    /* Streep boven de footer */
  }

  #gigs td {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    /* border-bottom: 1px solid #ddd; */
  }

  #gigs td::before {
    content: attr(data-label);
    /* Haalt de kolomnamen op */
    font-weight: bold;
    margin-right: 20px;
    /* Zorgt voor 20px ruimte tussen label en tekst */
  }
}

.image-row {
  display: flex;
  justify-content: flex-start;
}

.image-row-right {
  display: flex;
  justify-content: flex-end;
}

.image-row img,
.image-row-right img {
  /* width: 60%;   */
  width: 400px;
  height: auto;
}

@media (max-width: 600px) {

  .image-row,
  .image-row-right {
    flex-direction: column;
    /* Stapel de kolommen onder elkaar */
    align-items: center;
    /* Centreer ze als dat gewenst is */
  }
}

.album {
  /* allround glow */
  filter: drop-shadow(0px 0px 5px var(--yellows));
  border-radius: 4px;
  max-width: 90%;
  width: 480px;
  height: 480px;
  padding: 20px;
}

.thumbnail {
  width: 240px;
  height: auto;
}

@media (max-width: 600px) {
  .thumbnail {
    width: auto;
    height: auto;
  }
}

.columns {
  display: flex;
  gap: 0px;
  margin-top: 20px;
  align-items: flex-start;
}

.column {
  width: 49%;
  /* background-color: lightgray; Alleen voor zichtbaarheid */
  padding: 10px;
}

.column img {
  margin-bottom: 10px;
}

.paragraph {
  text-align: left;
  width: 100%;
  font-family: 'Impact Label Reversed';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  /* border: 1px solid #000000; */
  margin-top: 0px;
  margin-bottom: 10px;

}

@media (max-width: 600px) {
  .columns {
    flex-direction: column;
    /* Stapel de kolommen onder elkaar */
    align-items: center;
    /* Centreer ze als dat gewenst is */
  }

  .column {
    width: 100%;
    /* Laat de kolommen de volledige breedte innemen */
  }
}

.email-link {
  font-family: 'Impact Label Reversed';
  text-decoration: none;
  color: white;
  text-align: left;
  display: block;
  margin-bottom: 10px;
}


.social-item {
  display: flex;
  align-items: center;
  /* Zorgt ervoor dat de icoon en tekst op dezelfde hoogte staan */
  justify-content: center;
  gap: 8px;
  /* Voegt ruimte toe tussen het icoon en de tekst */
}

.social-item a {
  display: flex;
  align-items: center;
  /* Zorgt ervoor dat de icoon en tekst op dezelfde hoogte staan */
  justify-content: center;
  text-decoration: none;
}

.icon {
  width: 40px;
  /* Pas de grootte van het icoon aan */
  height: 40px;
}


.icon-text {
  font-family: 'handelgothicregular';
  text-decoration: none;
  font-style: normal;
  font-size: 20px;
  font-weight: bold;
  color: #d4a300;
  padding: 10px;
}

.social-item img {
  width: 40px;
  height: 40px;
}

/* ******************* */
/* *** NIEUWSBRIEF *** */
/* ******************* */


#mc_embed_signup {
  /* background: #fff; */
  clear: left;
  padding: 0px;
  margin-left: 0px;
  left: 0px;
  border-radius: 0px;
  /* border: 1px solid #000000; */
}

#mc_embed_signup form {
  display: block;
  position: relative;
  text-align: left;
  margin: 0px
}

#mc_embed_signup h2 {
  font-weight: normal;
  padding: 0;
  margin: 0px;
}

#mc_embed_signup .button {
  color: white;
  background-color: black;
  text-decoration: none;
  text-align: center;
  font-family: 'Impact Label Reversed';
  font-size: 16px;
  padding: 10px;
  border: 3px solid white;
  border-radius: 20px;
  min-width: fit-content;
  /* height: 0px; */
  line-height: 0px;
}

#mc_embed_signup .button:hover {
  background-color: var(--yellows);
}

.subscribe-form {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 400px;
  padding-left: 0px;


}

.subscribe-form input {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #000000;
  border-radius: 4px;
  outline: none;
}

.subscribe-form button:hover {
  background-color: #b38b00;
}


/* ******************* */
/* *** MOBILE MENU *** */
/* ******************* */

.mobile-menu-container {
  z-index: 300;
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100%;
  background: black;
  opacity: 0.8;
  /* 50% transparantie */
  padding: 0 30px;
  transform: translateX(100%);
  transition: all 900ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-container.active {
  transform: translateX(0);
}

.mobile-menu-container .logo-container {
  display: flex;
  align-items: right;
  justify-content: right;
  padding-top: 20px;
}

.close-icon {
  width: 30px;
  height: 30px;
}

.mobile-menu-container .mobile-menuitems {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 0 50px;
}

.mobile-menu-container .mobile-menuitems a {
  font-family: 'Impact Label Reversed';
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  color: white;
}


/* ************ */
/* *** MENU *** */
/* ************ */

.menu {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: 1024px;
  padding: 0px 16px;
  gap: 16px;
  height: 118px;
  font-family: 'Impact Label Reversed';
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;

}

@media (max-width: 600px) {
  .menu {
    display: none;
  }
}

.menu .right {
  display: flex;
  justify-content: flex-end;
  position: relative;
  width: 620px;
  height: 118px;
  right: 0px;
  top: 0px;
}

.menu a {
  color: white;
  background-color: #000000;
  text-decoration: none;
}

#current::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  background-color: var(--yellows);
  filter: blur(10px);
  z-index: -1;
  transform: translate(-50%, -50%);
  border-radius: 10px;
}

.menu .menu-btn1 {
  position: absolute;
  left: 0%;
  right: 82.42%;
  top: 13.79%;
  bottom: 55.7%;

}

/* shows */
.menu .menu-btn2 {
  position: absolute;
  left: 24.19%;
  right: 58.23%;
  top: 6.03%;
  bottom: 63.46%;
}

/* muziek */
.menu .menu-btn3 {
  position: absolute;
  left: 45.81%;
  right: 33.06%;
  top: 44.83%;
  bottom: 24.66%;

}

.menu .menu-btn4 {
  /* Shop */

  position: absolute;
  left: 65.32%;
  right: 20.65%;
  top: 0%;
  bottom: 69.49%;
}

.menu .menu-btn5 {
  /* Bio */

  position: absolute;
  left: 29.84%;
  right: 59.68%;
  top: 68.97%;
  bottom: 0.53%;
}

.menu .menu-btn6 {
  /* contact */

  position: absolute;
  left: 75.48%;
  right: 0%;
  top: 60.34%;
  bottom: 9.15%;
}

.menu .menu-btn1:hover {
  background-color: var(--darkyellow);
}

.menu .menu-btn2:hover {
  background-color: var(--darkyellow);
}

.menu .menu-btn3:hover {
  background-color: var(--darkyellow);
}

.menu .menu-btn4:hover {
  background-color: var(--darkyellow);
}

.menu .menu-btn5:hover {
  background-color: var(--darkyellow);
}

.menu .menu-btn6:hover {
  background-color: var(--darkyellow);
}


/* ************** */
/* *** FOOTER *** */
/* ************** */

/* Stijlen voor de footer */
footer {
  border-top: 2px solid white;
  /* Streep boven de footer */
  padding: 10px 20px;
  text-align: center;
  /* background-color: #f8f8f8; Optioneel: achtergrondkleur */
}

/* Flexbox voor uitlijning */
.footer-content {
  display: flex;
  justify-content: space-between;
  max-width: 1024px;
  margin: 0 auto;
}

/* Responsieve aanpassing */
@media (max-width: 600px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
}