body{
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /*centers items on the line (the x-axis by default)*/
  align-items: center; /*centers items on the cross-axis (y by default)*/
  background-color: rgb(50, 20, 21);
  font-family: 'Roboto-Slab', serif;
}

h1,h2,h3,h4,.shadow {
  font-family: Fugaz;
  transform-origin: 0 0;
  transform: rotate(355deg);
}

  h1 {
    position: absolute;
    top: 240px;
    left: 60px;
    font-size: 80px;
    background: -webkit-linear-gradient(#CF1902, #FFD503);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: white 1px;
    transform-origin: 0 0;
  }

  .shadow { 
    position: absolute;
    opacity: 0;
    top: 290px;
    left: 60px;
    font-size: 80px;
    color: black;
    text-shadow: 3px 3px 0 #000, -5px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 4px 6px 0 #000;
    animation-name: showShadow;
    animation-delay: 1s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
  }

  @keyframes showShadow {
    from {opacity: 0;}
    to {opacity: 1;}
  }

  h2 {
    position: absolute;
    top: -200px;
    transform: rotate(355deg);
    left: 200px;
    font-size: 64px;
    color: black;
    animation-name: falling;
    animation-duration: 1s;
    animation-fill-mode: forwards;
 }

 @keyframes falling {
  from {top: -200px;}
  to {top: 300px;}
}

  h3 {
    position: absolute;
    top: 80px;
    left: 320px;
    font-size: 36px;
    color: rgb(240, 164, 0);
  }

  .container  {
    display: flex;
    flex-direction: column;
    margin: auto;
    width: 100%;
    height: 800px;
    min-height: 800px;
  }

  .stage {
    position: relative;
    background-image: url('images/stage.webp');
    background-size:cover;
    width: 709px;
    height: 621px;
    margin: auto;
 }

 .content {
  display: flex;
  flex-direction: column;
   position: relative;
   top: 440px;
   margin: auto;
   text-align: center;
  font-size: 24px;
  color: black;
 }
 
 .ages {
  font-size: 24px;
  color: #CF1902;
  font-weight: bold;
 }

 .camel {
  position: absolute;
  opacity: 0;
  top: 90px;
  left: 0px;
  z-index: 1;
  width: 45%;
  animation-name: appear;
  animation-delay: 1.5s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.camel:hover {
  width: 48%;
  transform: rotate(5deg);
}
 
@keyframes appear {
  0% {opacity: 0;}
  50% {opacity: 1;}
  75% {width: 48%; transform: rotate(5deg); }
  100% {width: 45%; transform: rotate(0deg); opacity: 1; }
}
 .contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
   padding: 20px;
   text-align:center;
   font-size: 24px;
  font-family: 'Roboto-Slab', serif;
  color: white;
 }

 .contact a {
  color: white;
  text-decoration: underline;
 }

 .impressum {
   text-align: right;
   font-size: 16px;
 }

 
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


@media only screen and (max-width: 800px) {
  

  h1 {
    top: 120px;
    left: 30px;
    font-size: 40px;
    -webkit-text-stroke: white 0.25px;
  }

  .shadow { 
    top: 150px;
    left: 30px;
    font-size: 40px;
    text-shadow: 1px 1px 0 #000, -2px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 2px 3px 0 #000;
  }

  @keyframes showShadow {
    from {opacity: 0;}
    to {opacity: 1;}
  }

  h2 {
    top: -200px;
    left: 80px;
    font-size: 36px;
 }

 @keyframes falling {
  from {top: -155px;}
  to {top: 155px;}
}

  h3 {
    top: 40px;
    left: 180px;
    font-size: 20px;
  }

  .container  {
    display: flex;
    flex-direction: column;
    margin: auto;
    width: 100%;
    height: 800px;
    min-height: 800px;
  }

  .stage {
    position: relative;
    background-image: url('images/stage.png');
    width: 354px;
    height: 340px;
    margin: 30px auto ;

 }

 .camel {
   top: 40px;
 }

 .content {
  top: 240px;
  font-size: 16px;
}


.ages {
  font-size: 20px;
 }

 .contact {
   font-size: 16px;
 }
 
 .impressum {
  font-size: 12px;
}
}