/*
Theme Name: Die Rockzipfl - Under Construction 
Author: Die Rockzipfl
*/

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}

@font-face {
  font-family: chunkFive;
  font-display: swap;
  src: url(font/ChunkfiveEx.ttf);
}

body{
    width:100vw;
    height:auto;
}
.body-wrapper {  
    height:100%;
    width:100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 50% auto 0.125fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "title title title"
      "main main main"
      "footer footer footer";
  }
  

 .header{
  grid-area: title;
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
 }

 .header-picture-mobile{
  display:none;
 }

.mobile-image{
  display:none;
}

.desktop-image{
  display:flex;
}
 #header-picture{
    width:100%;
    height:auto;
 }

 .header-logo{
  display: flex;
  align-items: center;
  justify-content: center;
 }
 #band-logo{
  max-width: 75%;
 }

 .header-title-wrapper{
  font-family: chunkfive;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: #000000;
  -webkit-text-fill-color: #ffffff;
  display: flex;
  width:100%;
  height:100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color:white;
  font-size: 3vw;
  margin: auto;
  padding: 5rem 0;
  background-image: url("../assets/images/titelbild.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
 }
 .header-title{
  text-shadow: 0px 0px 8px #00000038;
 }

 .header-footer{
  height:5%;
  width:100%;
  background-color: #688A87;
  -webkit-box-shadow: 0px 15px 15px -5px #00000066;
  box-shadow: 0px 15px 15px -5px #00000066;
  
 }
  
  main { 
    grid-area: main; 
    background-image: url("../assets/images/hintergrund_rot-min.png");
    background-repeat: no-repeat;
    background-size: cover;

}


.tourdates-wrapper{
  width:75%;
  margin:2.5% auto;
  font-family: chunkfive;
  font-size: 1vw;
  -webkit-text-stroke-width: 0.25px;
  -webkit-text-stroke-color: #000000;
  -webkit-text-fill-color: #ffffff;
}

.tourdate{
  background-color: #688A87;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding:1%;
  margin-top:2%;
}

.main-title{
  text-align:center;
  font-size: 1.5vw;
}


.tourdate-date, .tourdate-city, .tourdate-type{
  min-width: 15%;

}

.tourdate-type{
  text-align: right;
}



#successSection {
display:none;
justify-content:center;
background: #8de88d;
padding: 1rem;
margin-left: auto;
margin-right: auto;
width: 37%;
color: #15881c;
margin: 1rem;
border-radius: 0.25rem;
}

  
 footer { 
    grid-area: footer; 
    display:none;
}
.footer-wrapper{
  display: none;
  flex-direction:row;
  justify-content: space-around;
  font-family: Verdana;
  font-weight:bold;
  -webkit-text-stroke-width: 0.25px;
  -webkit-text-stroke-color: #000000;
  -webkit-text-fill-color: #ffffff;
} 

.footer-content a{
 text-decoration:none;
}

.footer-content a:visited, .footer-content a{
color:white;
}