body {
    margin: 0;
    height: 100vh;
	font-family: sans-serif;
    background-color: #f0f0f0;
  }
  
.level{
	display:none;
}  

.bewegung{
	position: relative;
}

.ziel{
	position: absolute;
}
#spieltitel{
	margin:0;
	padding:0;
	font-size: x-large;
}
#spielfeld{
	position:absolute;
	width:800px;
	height:600px;
	border:2px solid #888;
}
#spielerDiv {
	position: absolute;
	width: 30px;
	height: 20px;
}
#spielinfo{
	color: red;
	font-size: large;
}


#fliege1{
	position: absolute;
	animation: fliege1 10s infinite normal linear;
}
@keyframes fliege1 {
    0% { transform: translateX(0px) translateY(0px) rotate(120deg)}
    33% {transform: translateX(20px) translateY(10px);}
    70% {transform: translateX(3px) translateY(-18px)rotate(-180deg);}
    100% {transform: translateX(0px) translateY(0px) rotate(-240deg);}
}

#katze{
	position: absolute;
	animation: katze 20s infinite alternate linear;
}
@keyframes katze {
    0% { transform: translateX(0px) translateY(0px)}
    25% {transform: translateX(-85px) translateY(46px);}
    50% {transform: translateX(50px) translateY(120px);}
    75% {transform: translateX(50px) translateY(230px);}
    100% {transform: translateX(-100px) translateY(230px);}
}

#spinne1{
	position: absolute;
	animation: spinne1 8s infinite alternate linear;
}
@keyframes spinne1 {
    0% { transform: translateX(0px) translateY(0px)}
    100% {transform: translateX(0px) translateY(60px);}
}

#spinne2{
	position: absolute;
	animation: spinne2 12s infinite alternate linear;
}
@keyframes spinne2 {
    0% { transform: translateX(0px) translateY(0px)}
    50% {transform: translateX(0px) translateY(-35px);}
    100% {transform: translateX(0px) translateY(-35px);}
}

#spinne3{
	position: absolute;
	animation: spinne3 4s infinite alternate linear;
}
@keyframes spinne3 {
    0% { transform: translateX(0px) translateY(0px)}
    20% {transform: translateX(0px) translateY(-5px);}
    100% {transform: translateX(0px) translateY(30px);}
}

#kaefer1{
	position: absolute;
	animation: kaefer1 20s infinite normal linear;
}
@keyframes kaefer1 {
    0% { transform: translateX(0px) translateY(0px) rotate(180deg)}
    9% {transform: translateX(0px) translateY(15px) rotate(150deg);}
    22% {transform: translateX(40px) translateY(26px) rotate(100deg);}
    33% {transform: translateX(80px) translateY(26px) rotate(70deg);}
    44% {transform: translateX(100px) translateY(10px) rotate(30deg);} 
    55% {transform: translateX(100px) translateY(26px) rotate(-130deg);}
    66% {transform: translateX(70px) translateY(32px) rotate(-110deg);}
    77% {transform: translateX(40px) translateY(32px) rotate(-90deg);}
	 85% {transform: translateX(10px) translateY(24px) rotate(-60deg);}
	 100% {transform: translateX(0px) translateY(0px) rotate(180deg);}
}

#insekt2{
	position: absolute;
	animation: insekt2 4s infinite normal linear;
}
@keyframes insekt2 {
    0% { transform: translateX(0px) translateY(0px) scale(1, 1);}
    
    45% {transform: translateX(22px) translateY(10px) scale(1, 1);}
    53% {transform: translateX(22px) translateY(10px) scale(-1, 1);}
    
    92% {transform: translateX(0px) translateY(0px) scale(-1, 1);}
    100% {transform: translateX(0px) translateY(0px) scale(1, 1);}
}

#insekt3{
	position: absolute;
	animation: insekt3 10s infinite normal linear;
}
@keyframes insekt3 {
    0% { transform: translateX(0px) translateY(0px) rotate(0deg);}
    25% {transform: translateX(30px) translateY(-50px)rotate(-60deg);}
    40% {transform: translateX(10px) translateY(-70px)rotate(-160deg);}
    60% {transform: translateX(-20px) translateY(-20px)rotate(-200deg);}
    80% {transform: translateX(-10px) translateY(-10px)rotate(-330deg);}
    100% {transform: translateX(0px) translateY(0px)rotate(-350deg);}
}

#libelle1{
	position: absolute;
	animation: libelle1 8s infinite normal linear;
}
@keyframes libelle1 {
    0% { transform: translateX(0px) translateY(0px) rotate(0deg);}
    48% {transform: translateX(-70px) translateY(-20px)rotate(0deg);}
    52% {transform: translateX(-70px) translateY(-20px)rotate(180deg);}
    96% { transform: translateX(0px) translateY(0px) rotate(180deg);}
    100% { transform: translateX(0px) translateY(0px) rotate(0deg);}
}

#libelle2{
	position: absolute;
	animation: libelle2 8s infinite normal linear;
}
@keyframes libelle2 {
    0% { transform: translateX(0px) translateY(0px) rotate(0deg);}
    48% {transform: translateX(-40px) translateY(-20px)rotate(0deg);}
    52% {transform: translateX(-40px) translateY(-20px)rotate(180deg);}
    96% { transform: translateX(0px) translateY(0px) rotate(180deg);}
    100% { transform: translateX(0px) translateY(0px) rotate(0deg);}
}

#grashuepfer1{
	position: absolute;
	animation: grashuepfer1 6s infinite normal linear;
}
@keyframes grashuepfer1 {
    0% { transform: translateX(0px) translateY(0px) scale(1, 1);}
    
    23% { transform: translateX(10px) translateY(0px) scale(1, 1);}
    25% { transform: translateX(20px) translateY(-20px) scale(1, 1);}
    27% { transform: translateX(30px) translateY(0px) scale(1, 1);}
    
    45% {transform: translateX(40px) translateY(0px) scale(1, 1);}
    53% {transform: translateX(40px) translateY(0px) scale(-1, 1);}
    
    73% { transform: translateX(30px) translateY(0px) scale(-1, 1);}
    75% { transform: translateX(20px) translateY(-20px) scale(-1, 1);}
    77% { transform: translateX(10px) translateY(0px) scale(-1, 1);}
    
    92% {transform: translateX(0px) translateY(0px) scale(-1, 1);}
    100% {transform: translateX(0px) translateY(0px) scale(1, 1);}
}

#grashuepfer2{
	position: absolute;
	animation: grashuepfer2 10s infinite normal linear;
}
@keyframes grashuepfer2 {
    0% { transform: translateX(0px) translateY(0px) scale(1, 1);}
    
    23% { transform: translateX(30px) translateY(0px) scale(1, 1);}
    25% { transform: translateX(50px) translateY(-20px) scale(1, 1);}
    27% { transform: translateX(60px) translateY(0px) scale(1, 1);}
    
    45% {transform: translateX(100px) translateY(0px) scale(1, 1);}
    53% {transform: translateX(100px) translateY(0px) scale(-1, 1);}
    
    73% { transform: translateX(60px) translateY(0px) scale(-1, 1);}
    75% { transform: translateX(50px) translateY(-20px) scale(-1, 1);}
    77% { transform: translateX(30px) translateY(0px) scale(-1, 1);}
    
    92% {transform: translateX(0px) translateY(0px) scale(-1, 1);}
    100% {transform: translateX(0px) translateY(0px) scale(1, 1);}
}

 
#maikaefer1{
	position: absolute;
	animation: maikaefer1 8s infinite normal linear;
}
@keyframes maikaefer1 {
    0% { transform: translateX(0px) translateY(0px) scale(-1, 1)}
    6% { transform: translateX(0px) translateY(0px) scale(1, 1)}
    47% {transform: translateX(-50px) translateY(0px)scale(1, 1)}
    53% {transform: translateX(-50px) translateY(0px)scale(-1, 1)}
    100% {transform: translateX(0px) translateY(0px)scale(-1, 1)}
} 

#Fliegerahmen {
  width: 60px;
  height: 60px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 410px;
  left:600px;
}

#FliegeTeichBild{
	position: absolute;
  /* Animation anwenden */
  animation:FliegeTeichBild 8s linear infinite;
}
@keyframes FliegeTeichBild {
  from {
    /* Verschiebung nach außen und volle Drehung */
    transform: rotate(360deg);
  }
  to {
    /* translateX muss dem Radius entsprechen */
    transform: rotate(0deg);
  }
}


#FliegeTeich {

  position: absolute;
  /* Animation anwenden */
  animation: FliegeTeich 8s linear infinite;
}

@keyframes FliegeTeich {
  from {
    /* Verschiebung nach außen und volle Drehung */
    transform: rotate(360deg) translateX(65px) rotate(-360deg);
  }
  to {
    /* translateX muss dem Radius entsprechen */
    transform: rotate(0deg) translateX(65px) rotate(0deg);
  }
}

#katze2{
	position: absolute;
	animation: katze2 4s infinite normal linear;
}
@keyframes katze2 {
    0% { transform: translateX(0px) translateY(0px) scale(-1, 1)}
    3% {transform: translateX(0px) translateY(0px) scale(1, 1)}
    49% {transform: translateX(0px) translateY(40px) scale(1, 1)}
    51% {transform: translateX(0px) translateY(40px)scale(-1, 1)}
    100% {transform: translateX(0px) translateY(0px) scale(-1, 1)}
}

#ins31{
	position: absolute;
	animation: ins31 12s infinite normal linear;
}
@keyframes ins31 {
    0% { transform: translateX(0px) translateY(0px) rotate(-35deg)}
    
    24% { transform: translateX(0px) translateY(-90px) rotate(-35deg)}
    25% { transform: translateX(0px) translateY(-90px) rotate(50deg)}
    
    49% {transform: translateX(130px) translateY(-90px) rotate(50deg)}
    50% {transform: translateX(130px) translateY(-90px) rotate(150deg)}
    
    74% {transform: translateX(130px) translateY(0px) rotate(150deg)}
    75% {transform: translateX(130px) translateY(0px) rotate(240deg)}
    100% {transform: translateX(0px) translateY(0px) rotate(240deg)}
}