* {
  margin: 0;
  padding: 0;
}

body{
  background-color:#FF40FC;
}

a{
  color:#000;
}



.back{
  font-family: sans-serif;
  position:fixed;
  top:0;
  right:0;
  font-size:4rem;
  padding-right:2rem;
}
.back h1{
  text-decoration:none;
}

.back a{
  text-decoration:none;
}


.text{
  margin: 2rem 0;
}

.text p{
  font-family: sans-serif;
  margin-bottom:1em;
  padding: 0 4rem;
  max-width:70ch;
}

p.centered{
  text-align:center;
}

.text h1{
  font-family: sans-serif;
  margin-bottom:1em;
  padding: 0 4rem;
  max-width:70ch;
}

.text h2{
  font-family: sans-serif;
  margin-bottom:.5em;
  padding: 0 4rem;
  max-width:70ch;
}

.text h3{
  font-family: sans-serif;
  margin-bottom:.2em;
  padding: 0 4rem;
  max-width:70ch;
}

.text h4{
  font-family: sans-serif;
  margin-bottom:.0em;
  padding: 0 4rem;
  max-width:70ch;
}

.imprint p{
  font-size:.8rem;
  font-family: sans-serif;

}

.imprint{
  position:fixed;
  bottom:0.5rem;
  left:0;
  text-align:center;
  width:100vw;

}
.construction{
  background-color:#eaff00;
  padding:1rem;
  font-size:1rem;
  line-height:1.4em;
  font-family: sans-serif;
  outline:.5rem solid #000;
  position:fixed;
  bottom: -30rem;
  left:50%;
  transform:translateX(-50%);
  min-width:66vw;
  animation: moveIn 4s 3s cubic-bezier(0.535, 1.330, 0.555, 1.005) 1 forwards;
}

@keyframes moveIn {
  from {bottom: -30rem}
  to {bottom: 2.5rem;}
}

.backg{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  overflow:hidden;
}

.bg-image{
  position:absolute;
  top:0;
  left:5vw;
  width:90vw;
  height:90vh;
}


.bg-image-image{
  position:absolute;
}

.shop{
  top:-13%;
  left:45%;
  width:30vw;
  height:50vh;
  max-width:250px;
  transform:translate(50%,-50%);
}

.hoverimg{
  position:absolute;
  left:0;
  top:0;
  opacity:0;
}
.shop .outer{
transition: all 250ms cubic-bezier(0,1.85,.58,.99);
}

.shop:hover .outer{
  transform:scale(1.15);
}
.shop:hover .hoverimg{
opacity:1;
}



.fische{
  top:55%;
  left:34%;
  width:50vw;
  height:50vh;
  transform:translate(-50%,-50%);
}

.fliege{
  top:20%;
  left:35%;
  width:30vw;
  max-width:200px;
  transform:translate(-50%,-50%);
}

.tardi{
  top:60%;
  right:25%;
  width:50vw;
  height:66vh;
  transform:translate(50%,-50%);
}
.egel{
  top:30%;
  right:40%;
  width:70vw;
  height:50vh;
  transform:translate(50%,-50%);
  justify-content: center;

}

.bg-image > div{
  width:100%;
  height:100%;
}

.bg-image-image > div{
  width:100%;
  height: 100%;
}

.bg-image-image > div > div{
  width:100%;
  height: 100%;
}

.bg-image-image > div > div > div{
  width:100%;
  height: 100%;
}

.bg-image img{
  width:100%;
  height:100%;
  object-fit: contain;
}

.bg-image-image img{
  width:100%;
  height:100%;
  object-fit: contain;
}

.LR1{

  animation-name: LR;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction:  alternate;

}

.UD1{
  animation-name: UD;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: -1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.LR2{

  animation-name: LR;
  animation-duration: 3.3s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction:  alternate;

}

.UD2{
  animation-name: UD;
  animation-duration: 3.3s;
  animation-timing-function: ease-in-out;
  animation-delay: -1.7s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.LR3{

  animation-name: LR;
  animation-duration: 5.1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction:  alternate;

}

.UD3{
  animation-name: UD;
  animation-duration: 5.1s;
  animation-timing-function: ease-in-out;
  animation-delay: -2.6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}


.LR4{

  animation-name: LRXL;
  animation-duration: 2.5s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction:  alternate;

}

.UD4{
  animation-name: UD2;
  animation-duration: .8s;
  animation-timing-function: ease-in-out;
  animation-delay: -2.6s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.ROT1{
  animation-name: ROTATE;
  animation-duration: 3.3s;
  animation-timing-function: ease-in-out;
  animation-delay: -1.7s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.ROT2{
  animation-name: ROTATE2;
  animation-duration: 5.3s;
  animation-timing-function: ease-in-out;
  animation-delay: -1.7s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes LRXL {
  0% {transform: translateX(-20%);}
  20% {transform: translateX(20%);}

  20% {transform: translateX(20%);}
  50% {transform: translateX(-10%);}

  50% {transform: translateX(-10%);}
  70% {transform: translateX(10%);}

  70% {transform: translateX(10%);}
  100% {transform: translateX(-20%);}
}


@keyframes LR {
  from {transform: translateX(0.6%);}
  to {transform: translateX(-0.6%);}
}

@keyframes UD {
  from {transform: translateY(0.6%);}
  to {transform: translateY(-0.6%);}
}

@keyframes UD2 {
  0% {transform: translateY(0%);}
  25% {transform: translateY(-10%);}
  50% {transform: translateY(0%);}
  75% {transform: translateY(-5%);}
  100% {transform: translateY(-2%);}
}


@keyframes ROTATE {
  from {transform: rotate(2deg);}
  to {transform: rotate(-2deg);}
}

@keyframes ROTATE2 {
  0% {transform: rotate(2deg);}
  10% {transform: rotate(-5deg);}

  50% {transform: rotate(-5deg);}
  60% {transform: rotate(10deg);}

  80% {transform: rotate(6deg);}
  90% {transform: rotate(-3deg);}
}