* {
  box-sizing: border-box;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue",  Arial, sans-serif;
  margin: auto;
}
body {
  
  background-color:#8b0000;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  background-size: cover;
  
}

.hero {
 width: 20%;
 height:60svh;
 position: relative;
 padding: 0 5%;
 display: flex;
 align-items: center;
 justify-content: center;
 
}

nav{
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px 8%;
display: flex;
align-items: center;
justify-content: center;

}

nav .logo{
width: 6em;
transform:scale(1.4);

}


.content {
text-align: center;
margin-top: 10px;

}

.content h1{
  margin-top: 190px;

  /*position: relative;*/
  text-align: center;
  color: #ff9e40;
  font-size: 80px;
  font-style: italic;
  font-weight: 600;
  line-height: 38px;
  margin-bottom: 80px;
  
  
  	text-transform: uppercase;
  	font-family: verdana;
  	text-shadow: 1px 1px 1px #97692F,
        1px 2px 1px #97692F,
        1px 3px 1px #97692F,
        1px 4px 1px #97692F,
        1px 5px 1px #97692F,
        1px 6px 1px #97692F,
        1px 7px 1px #97692F,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4);

animation: fade-in-down 1s ease;
}
@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.content a{
text-decoration: none;
display: inline-block;
color: #fff;
font-size: 24px;
border: 2px solid #fff;
padding: 14px 70px;
border-radius: 50px;
margin-top: 10px;

}


.content a:hover{
  background-color:rgba(255, 255, 255, 0.151);
  }
  .content a:onclick{
    background-color:rgba(255, 255, 255, 0.151);
  }

.back-video {
margin-top: 0.5em;
position: absolute;
z-index: -1;
transform:scale(2.4);
top: 50%;
/*bottom: 1%;*/
/*transform:translate(1%,0%); */

}


.social-media {
display: fixed;
 width: cover;
 height: auto;
 justify-content: center;
 align-items: center;
 margin-top: 60px;
 text-align:center;
 color: #fff;
  font-style: normal;
  font-weight: 450;
  font-size: 38px;
  line-height: 120%;
  text-align: center;
  color: #fff;
  flex-grow: 0;
  margin: 30px;

}


.social-media button {
display: inline-block;
justify-content: center;
align-items:center;
background-color: transparent;
color: #fff;
border-style: none;
font-size: 55px;
cursor: pointer;
padding: 30px;
}


.Flyer {
 display:flex;
 align-items:cetner;
 justify-content: center;
 margin-bottom: 50px;

}


.Karte {
  align-items:center;
  justify-content: center;
  display:grid;
  display: fixed;
 width: cover;
 height: auto;
 margin-bottom:50px;
 
  
}
.Karte p{
  justify-content: center;
  align-items: center;
  margin-top: 60px;
  text-align:center;
  color: #fff;
   font-style: normal;
   font-weight: 450;
   font-size: 38px;
   line-height: 120%;
   text-align: center;
   color: #fff;
   flex-grow: 0;
   margin-bottom: 30px;

}

.Shuttlebus {
  align-items:center;
  justify-content: center;
  display: grid;
 width: cover;
 height: auto;
  
}

   .Shuttlebus p {
    justify-content: center;
    align-items: center;
    margin-top: 80px;
    text-align:center;
    color: #fff;
     font-style: normal;
     font-weight: 450;
     font-size: 38px;
     line-height: 120%;
     text-align: center;
     color: #fff;
     flex-grow: 0;
     margin-bottom: 10px;
   
}

.Shuttlebus img {
 margin-top: -175px;
 transform:scale(0.6);
  
}


.footer {
  text-align:center;
  justify-content: center;
  margin-bottom:30px;
  font-size:18px;
  color:#fff;
  text-decoration:none;
  
}
.footer a{
  text-decoration:none;
  color:#fff;
}

@media (min-aspect-ratio: 1/1){
.back-video{
width: 100%;
height: auto;
}
}

@media (max-aspect-ratio: 1/1){
.back-video{
width: auto;
height: 100%;
}
}

@media (max-width: 1024px) {
  .back-video{
    transform:scale(0.7);
    top: 5%;
    
  }
  nav .logo {
    transform:scale(1);
  }
  .content h1{
    font-size: 42px;
    line-height: 36px;
    margin-bottom: 30px;
    margin-top: -100px;
    }
    .content a{
      text-decoration: none;
      display: inline-block;
      color: #fff;
      font-size: 22px;
      border: 2px solid #fff;
      padding: 14px 60px;
      border-radius: 50px;
      margin-top: 20px;
      }
.social-media {
  font-size: 22px;
  }
  .social-media button {
    font-size: 45px;
}

.Flyer{
  transform:scale(0.6);
  margin-top:-180px;
}
.Karte{
  transform:scale(0.55);
  margin-top:-320px;
}
.Shuttlebus {
  transform:scale(0.5);
  margin-top:-900px;
  margin-bottom: -900px;
}
.footer{
  transform:scale(0.75);
  margin-top:-100px;
}


}