*{
	box-sizing: border-box;
}


@font-face { font-family: "montserrat"; src: url("schrift/montserrat-light.ttf"); }

@font-face{
    src: url(schrift/StraightToHellBB.ttf);
    font-family: lucifer;
}

@font-face{
    src: url(schrift/OratorStd.otf);
    font-family: emre;
}

@font-face{
    src: url(schrift/DIABLO_L.TTF);
    font-family: papa;
}

@font-face{
    src: url(schrift/Quick\ Kiss\ Personal\ Use.ttf);
    font-family: lady;
}

@font-face {
  font-family: Emre;
  src: url("Emre.otf") format("opentype");
}


body div {
    font-family: 'MS Reference Sans Serif';
    color: black;
}

#win {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: rgb(0, 0, 0);
    overflow: hidden;
    display: flex;
    
}

.motherbox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
    width: 90%; /* Adjust the width and height of the boxes as needed */
    height: 90%;
  }

  .mothermotherbox {
    display: grid;
    justify-items: center;
    align-items: center;
    height: 100dvh; /* You can adjust the height as needed */
  }
  
  .box {
    width: 90%;
    height: 95%;
    display: flex;
    background-image: "dämon.jpg";
    align-items: center;
    justify-content: center;
    border: 0.2dvh solid #ffffff;
    margin: 10px; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
  }
 

.box2 {
    width: inherit;
    transform: scale(4.5);
  }
    
  .box3 {
    width: inherit;
    transform: scale(1.5);
  }

  .box4 {
    width: inherit;
    transform: scale(1.5);
  }

  .box5 {
    width: inherit;
    transform: scale(1.5);
  }


  .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    flex-flow: column-reverse;
    display: flex;
    left: 100%;
    transition: left 1s;
}

.wrapperrein{
    position: relative;
    width: 100%;
    height: 100%;
    flex-flow: column-reverse;
    display: flex;
    left: 0%;
    transition: all 1s ease;
  }

.motherbox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    align-items: center;
    width: 90%; /* Adjust the width and height of the boxes as needed */
    height: 90%;
}

.mothermotherbox {
    display: grid;
    justify-items: center;
    align-items: center;
    height: 100dvh; /* You can adjust the height as needed */
}

.bigbox2 {
    width: 90%;
    height: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.2dvh solid #ffffff;
    margin: 10px; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    opacity: 1;
    transition: all 0.5s ease;
}

.bigbox2inak {
    width: 90%;
    height: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.2dvh solid #ffffff;
    margin: 10px; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    opacity: 1;
    transition: all 0.5s ease;
     opacity: 0.2; 
}

.bigbox3 {
    width: 90%;
    height: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.2dvh solid #ffffff;
    margin: 10px; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    opacity: 1;
    transition: all 0.5s ease;
}

.bigbox3inak {
    width: 90%;
    height: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.2dvh solid #ffffff;
    margin: 10px; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    opacity: 1;
    transition: all 0.5s ease;
     opacity: 0.2; 
}

.bigbox4 {
    width: 90%;
    height: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.2dvh solid #ffffff;
    margin: 10px; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    opacity: 1;
    transition: all 0.5s ease;
}

.bigbox4inak {
    width: 90%;
    height: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.2dvh solid #ffffff;
    margin: 10px; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    opacity: 1;
    transition: all 0.5s ease;
     opacity: 0.2; 
}

.bigbox5 {
    width: 90%;
    height: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.2dvh solid #ffffff;
    margin: 10px; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    opacity: 1;
    transition: all 0.5s ease;
}

.bigbox5inak {
    width: 90%;
    height: 95%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.2dvh solid #ffffff;
    margin: 10px; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    opacity: 1;
    transition: all 0.5s ease;
     opacity: 0.2; 
}

.playbox2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.2dvh solid #ffffff;
    margin: auto; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    display: none;
    z-index: 91;
}

.playbox3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.2dvh solid #ffffff;
    margin: auto; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    display: none;
    z-index: 91;
}

.playbox4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.2dvh solid #ffffff;
    margin: auto; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    display: none;
    z-index: 91;
}

.playbox5 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.2dvh solid #ffffff;
    margin: auto; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    display: none;
    z-index: 91;
}

.fade-out {
    opacity: 0.2; /* Adjust the final opacity value as needed */
}

.blackbox {
    width: 100%;
  height: 100%;
  color: black;
  background: #000000;
  position: absolute;
  display: none;
  opacity: 90%;
  transition: all 0.5s ease;
}




.shop {
    width: 20%;
    height: 5%;
    display: none; /* Turn this into a flex container */
    align-items: center; /* Center items vertically in the container */
    justify-content: center; /* Center items horizontally in the container */
    border: 0.2dvh solid #ffffff;
    margin: auto; /* Adjust the margin between the boxes as needed */
    color: #ffffff;
    text-align: center;
    text-justify: auto;
    position: relative; /* Fix the position of the box */
    left: 10%; /* Center it horizontally */
    bottom: 4%;
    transform: translateX(-50%); /* Adjusts for exact centering */
    font-size: 3em;
    background-color: black;
    font-family: Emre;
    
  }

  .buch {
    width: 100%;
    height: auto; /* assuming the height is determined by the content and the width */
    object-fit: cover;
    transition: all 0.5s ease;
    position: absolute;   /* or you can use 'fixed' if you want to center it relative to the viewport */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* This is used to perfectly center the element */
  }

  .buch2 {
    width: 110%;
    height: auto; /* assuming the height is determined by the content and the width */
    object-fit: cover;
    transition: all 0.5s ease;
    position: absolute;   /* or you can use 'fixed' if you want to center it relative to the viewport */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* This is used to perfectly center the element */
  }
  
  .buchbox {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
  }





  .HL {
    color: white;
    font-size: 6em;
    
    margin-bottom: 3%; /* Ein kleiner Abstand zum nächsten Text */
    text-align: left; 
    opacity: 0%;
    transition: all 0.5s ease;
    font-family: Emre;
  }
  
  .HL2 {
    color: white;
    font-size: 6em;
    
    margin-bottom: 3%; /* Ein kleiner Abstand zum nächsten Text */
    text-align: left; 
    opacity: 100%;
    transition: all 0.5s ease;
    z-index: 99;
    font-family: Emre;
  }
  
  .inhalt {
    top: 60%; /* Dies sollte unter .textlinks stehen */
    color: white;
    font-size: 1em;
    
    transition: all 0.5s ease;
    opacity: 100%;
    font-family: Emre;
  }
  
  .textlinks {
    color: white;
    font-size: 8em;
    
    margin-bottom: 10px; /* Ein kleiner Abstand zum nächsten Text */
    text-align: right; 
    opacity: 0%;
    transition: all 0.5s ease;
    font-family: Emre;
  }
  
  .textlinks2 {
    color: white;
    font-size: 8em;
    
    margin-bottom: 10px;
    text-align: center;
    opacity: 100%;
    transition: all 0.5s ease;
    font-family: Emre;
  }
  
  .textlinks3 {
    color: white;
    font-size: 8em;
    
    margin-bottom: 10px;
    text-align: center;
    opacity: 0%;
    transition: all 0.5s ease;
    font-family: Emre;
  }
  
  .textlinksautor {
    top: 60%; /* Dies sollte unter .textlinks stehen */
    color: white;
    font-size: 1em;
    
    transition: all 0.5s ease;
    opacity: 0%;
    display: none;
    font-family: Emre;
  }
  
  .textlinksautor2 {
    top: 60%; /* Dies sollte unter .textlinks stehen */
    color: white;
    font-size: 1em;
    
    transition: all 0.5s ease;
    opacity: 100%;
    display: none;
    font-family: Emre;
  }
  
  .textlinksautor3 {
    top: 60%; /* Dies sollte unter .textlinks stehen */
    color: white;
    font-size: 1em;
    
    transition: all 0.5s ease;
    opacity: 0%;
    display: none;
    font-family: Emre;
  }
  
  .textrechts {
      color: white;
      font-size: 8em;
      
      transition: all 0.5s ease;
    opacity: 0%;
    font-family: Emre;
  }
  
  .textrechts2 {
    color: white;
    font-size: 8em;
    
    transition: all 0.5s ease;
  opacity: 100%;
  font-family: Emre;
  }
  
  .textrechts3 {
    color: white;
    font-size: 8em;
    
    transition: all 0.5s ease;
  opacity: 0%;
  font-family: Emre;
  }
  
  .wrapper2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 5%;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 7%;
    left: 0;
    transition: all 0.5s ease;
  }
  
  .wrapper2weg {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 5%;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 7%;
    left: 0;
    transition: all 0.5s ease;
    opacity: 0%;
   }
  
   .wrapper3 {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 5%;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 5%;
    right: 0;
    transition: all 0.5s ease;
}
  
  .wrapper3weg {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 5%;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 5%;
    right: 0;
    transition: all 0.5s ease;
    opacity: 0%;
  }
  
  .wrapper4 {
    display: flex;
    flex-direction: column;
    width: 60%;
    height: 100%;
    justify-content: center;
    align-items: flex-start;
    position: absolute;
    top: 0;
    left: 5%;
    transition: all 0.5s ease;
  }
  
  
  .startpagesecond {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    
    display: flex;
    transition: all 1s ease;
  }
  
  .startpagesecond2 {
    position: absolute;
    top: 0px;
    left: 30%;
    right: -35%;
    bottom: 0px;
    
    display: flex;
    transition: all 1s ease;
    transform: translateX(-174%);
  }
  
  
  .startpage {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    
    display: flex;
    transition: all 1s ease;
  }
  
  .startpage2 {
    position: absolute;
    top: 0px;
    left: 30%;
    right: -35%;
    bottom: 0px;
    
    display: flex;
    transition: all 1s ease;
  }
  
  .clickbox {
  height: 100%;
  width: 100%;
  display: none;
  position: absolute;
  }
  
  .clickbox2 {
    height: 100%;
    width: 100%;
    display: flex;
    position: absolute;
    z-index: 100;
    }
  
    .clickboxsecond {
      height: 100%;
      width: 100%;
      display: none;
      position: absolute;
      z-index: 99;
      }
  
      .clickboxsecond2 {
        height: 100%;
        width: 100%;
        display: flex;
        position: absolute;
        z-index: 101;
        }
  
        .clickboxsecond3 {
          height: 100%;
          width: 100%;
          display: none;
          position: absolute;
          
          }

          .insplaybox2 {
            width: 100%;
            height: 100%;
            object-fit: cover; /* This will make the video fit fully in the playbox */
            transition: all 0.5s ease;
        }

        .insplaybox3 {
          width: 100%;
          height: 100%;
          object-fit: cover; /* This will make the video fit fully in the playbox */
          transition: all 0.5s ease;
        }

        .insplaybox4 {
          width: 100%;
          height: 100%;
          object-fit: cover; /* This will make the video fit fully in the playbox */
          transition: all 0.5s ease;
        }

        .insplaybox5 {
          width: 100%;
          height: 100%;
          object-fit: cover; /* This will make the video fit fully in the playbox */
          transition: all 0.5s ease;
        }