*{
	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: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh; /* You can adjust the height as needed */
  }

  .mothermotherbox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh; /* You can adjust the height as needed */
    transition: all 0.5s ease;
  }
  
  .bigbox2 {
    width: 20%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: "dämon.jpg" ;
    border: 0.2vh solid #ffffff;
    margin: 2%; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    opacity: 1;
    transition: all 0.5s ease; 
  }

  .bigbox2inak {
    width: 20%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: "dämon.jpg" ;
    border: 0.2vh solid #ffffff;
    margin: 2%; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    transition: all 0.5s ease;
     opacity: 0.2;
  }

  .bigbox3 {
    width: 20%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: "dämon.jpg" ;
    border: 0.2vh solid #ffffff;
    margin: 2%; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    opacity: 1;
    transition: all 0.5s ease;
  }

  .bigbox3inak {
    width: 20%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: "dämon.jpg" ;
    border: 0.2vh solid #ffffff;
    margin: 2%; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0.2;
  }

  .bigbox4 {
    width: 20%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: "dämon.jpg" ;
    border: 0.2vh solid #ffffff;
    margin: 2%; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    opacity: 1;
    transition: all 0.5s ease;
  }

  .bigbox4inak {
    width: 20%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: "dämon.jpg" ;
    border: 0.2vh solid #ffffff;
    margin: 2%; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    transition: all 0.5s ease;
     opacity: 0.2;
  }

  .bigbox5 {
    width: 20%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: "dämon.jpg" ;
    border: 0.2vh solid #ffffff;
    margin: 2%; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    opacity: 1;
    transition: all 0.5s ease;   
  }

  .bigbox5inak {
    width: 20%;
    height: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: "dämon.jpg" ;
    border: 0.2vh solid #ffffff;
    margin: 2%; /* Adjust the margin between the boxes as needed */
    overflow: hidden;
    transition: all 0.5s ease;
    opacity: 0.2;
  }

.box2 {
    width: 100%;
  height: auto;
  transform: scale(4.5);
  transition: all 0,5s ease;
}
  
  .box3 {
    width: 100%;
  height: auto;
  transform: scale(1.5);
  transition: all 0,5s ease;
  }

  .box4 {
    width: 100%;
  height: auto;
  transform: scale(1.5);
  transition: all 0,5s ease;
  }

  .box5 {
    width: 100%;
  height: auto;
  transform: scale(1.5);
  transition: all 0,5s ease;
  }


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

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

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

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


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

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

.buchvideo2 {
    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;
}

.buchvideo3 {
    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;
}

.buchvideo4 {
    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;
}

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

  .wrapper {
    position: relative; /* Set the wrapper as the reference for absolute positioning */
}

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

.upscale2{
    transform: scale(5.0)
}

.upscale3{
    transform: scale(1.7);
}

.upscale4{
    transform: scale(1.7);
}

.upscale5{
    transform: scale(1.7);
}

.boxupscale{
    border: 0.4vh solid #ffffff;
}

.hide {
    opacity: 0%;
}


.shop {
  width: 10%;
  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.2vh solid #ffffff;
  margin: auto; /* Adjust the margin between the boxes as needed */
  color: #ffffff;
  text-align: center;
  text-justify: auto;
  position: fixed; /* Fix the position of the box */
  bottom: 5%; /* Position it at the bottom */
  left: 0; 
  right: 0; 
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(to right, white 0%, transparent 0%);
  transition: all 0.5s ease;
  font-family: Emre;
  font-weight: bold;
  font-size: 1.5em;
}

#shop:hover {
  background: linear-gradient(to right, white 100%, transparent 100%);
  color: black;
  transition: all 0.5s ease;
}


.wrapper{
    position: relative;
    display: flex;
    flex-direction: column;
    margin-left: auto; 
    float: left; 
    vertical-align: center;
    left: 100%;
    transition: all 1s ease;
}

.wrapperrein{
  position: relative;
  display: flex;
  flex-direction: column;
  margin-left: auto; 
  float: left; 
  vertical-align: center;
  left: 0;
  transition: all 1s ease;
}

.buch {
  width: 40%;
  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: 45%;
  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: 3em;
  font-weight: bold;
  margin-bottom: 3%; /* Ein kleiner Abstand zum nächsten Text */
  text-align: right; 
  opacity: 0%;
  transition: all 0.5s ease;
  font-family: Emre;
}

.HL2 {
  color: white;
  font-size: 3em;
  font-weight: bold;
  margin-bottom: 3%; /* Ein kleiner Abstand zum nächsten Text */
  text-align: right; 
  opacity: 100%;
  transition: all 0.5s ease;
  font-family: Emre;
}

.inhalt {
  top: 60%; /* Dies sollte unter .textlinks stehen */
  color: white;
  font-size: 1em;
  font-weight:normal;
  transition: all 0.5s ease;
  opacity: 100%;
  font-family: Emre;
}

.textlinks {
  color: white;
  font-size: 3.5em;
  font-weight: bold;
  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: 3.5em;
  font-weight: bold;
  margin-bottom: 10px; /* Ein kleiner Abstand zum nächsten Text */
  text-align: right; 
  opacity: 100%;
  transition: all 0.5s ease;
  font-family: Emre;
}

.textlinks3 {
  color: white;
  font-size: 3.5em;
  font-weight: bold;
  margin-bottom: 10px; /* Ein kleiner Abstand zum nächsten Text */
  text-align: right; 
  opacity: 0%;
  transition: all 0.5s ease;
  font-family: Emre;
}

.textlinksautor {
  top: 60%; /* Dies sollte unter .textlinks stehen */
  color: white;
  font-size: 1.5em;
  font-weight: bold;
  transition: all 0.5s ease;
  opacity: 0%;
  font-family: Emre;
}

.textlinksautor2 {
  top: 60%; /* Dies sollte unter .textlinks stehen */
  color: white;
  font-size: 1.5em;
  font-weight: bold;
  transition: all 0.5s ease;
  opacity: 100%;
  font-family: Emre;
}

.textlinksautor3 {
  top: 60%; /* Dies sollte unter .textlinks stehen */
  color: white;
  font-size: 1.5em;
  font-weight: bold;
  transition: all 0.5s ease;
  opacity: 0%;
  font-family: Emre;
}

.textrechts {
    color: white;
    font-size: 3em;
    font-weight: bold;
    transition: all 0.5s ease;
  opacity: 0%;
  font-family: Emre;
}

.textrechts2 {
  color: white;
  font-size: 3em;
  font-weight: bold;
  transition: all 0.5s ease;
opacity: 100%;
font-family: Emre;
}

.textrechts3 {
  color: white;
  font-size: 3em;
  font-weight: bold;
  transition: all 0.5s ease;
opacity: 0%;
font-family: Emre;
}

.wrapper2 {
 display: flex;
 flex-direction: column;
 width: 33%;
 height: 100%;
 justify-content: center;
 align-items: flex-end;
 position: absolute;
 top: 0;
 left: 0;
 transition: all 0.5s ease;
}

.wrapper2weg {
  display: none;
  flex-direction: column;
  width: 33%;
  height: 100%;
  justify-content: center;
  align-items: flex-end;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.5s ease;
  opacity: 0%;
 }

.wrapper3 {
  display: flex;
  flex-direction: column;
  width: 33%;
  height: 100%;
  justify-content: center;
  align-items: flex-start;  /* Ändern Sie dies, um das Element links im Container auszurichten */
  position: absolute;
  top: 0;
  right: 0;
  transition: all 0.5s ease;
}

.wrapper3weg {
  display: none;
  flex-direction: column;
  width: 33%;
  height: 100%;
  justify-content: center;
  align-items: flex-start;  /* Ändern Sie dies, um das Element links im Container auszurichten */
  position: absolute;
  top: 0;
  right: 0;
  transition: all 0.5s ease;
  opacity: 0%;
}

.wrapper4 {
  display: flex;
  flex-direction: column;
  width: 40%;
  height: 100%;
  justify-content: center;
  align-items: flex-start;  /* Ändern Sie dies, um das Element links im Container auszurichten */
  position: absolute;
  top: 0;
  left: 20%;
  transition: all 0.5s ease;
}


.startpagesecond {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: hidden;
  display: flex;
  transition: all 1s ease;
}

.startpagesecond2 {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: hidden;
  display: flex;
  transition: all 1s ease;
  transform: translateX(-100%);
}


.startpage {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: hidden;
  display: flex;
  transition: all 1s ease;
}

.startpage2 {
  position: absolute;
  top: 0px;
  left: 30%;
  right: -35%;
  bottom: 0px;
  overflow: hidden;
  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;
        
        }