body {
	font-family: Arial, sans-serif;
	font-size: 18px;
}

p {
   text-align: center;	
}

table{
	width: 100%;
	table-layout: fixed;
	margin: 0 auto;
	border: 3px solid lightblue;
	border-collapse: collapse;
	padding: 8px;
	text-align: center;
}

th, td{
	width: 33.3%;
	margin: 0 auto;
	border: 3px solid lightblue;
	border-collapse: collapse;
	padding: 8px;
	text-align: center;
}


#centerdiv {
  width: 80%; /* Oder eine feste Breite wie 300px */
  margin-left: auto;
  margin-right: auto;
  /* Oder einfach: */
  /* margin: 0 auto; */ /* 0 für oben/unten, auto für links/rechts */

  background-color: transparent;
  padding: 20px;
  text-align: center;	
}

#dreher{
  width: 150px;
  animation: pendeln 2s ease-in-out infinite;
  border-radius: 45%;
}

#dreher2{
  width: 180px;
  animation: pendeln 1.8s ease-in-out infinite;
  border-radius: 45%;
}

#dreher3{
  width: 110px;
  animation: pendeln 1.5s ease-in-out infinite;
  border-radius: 5%;
}

#dreher4{
  width: 110px;
  animation: pendeln 1.7s ease-in-out infinite;
  border-radius: 5%;
}

#dreher5{
  width: 110px;
  animation: pendeln 1.4s ease-in-out infinite;
  border-radius: 5%;
}

#dreher6{
  width: 110px;
  animation: pendeln 1.9s ease-in-out infinite;
  border-radius: 5%;
}

@keyframes pendeln {
  0% {
    transform: rotate(12deg);
  }
  
  50% {
    transform: rotate(-12deg);
  }
  
  100% {
    transform: rotate(12deg);
  }
}


.pendler{
  width: 110px;
  animation: pendeln 2.5s ease-in-out infinite;
  border-radius: 5%;
}

@keyframes pendler {
  0% {
    transform: rotate(8deg);
  }
  
  50% {
    transform: rotate(-8deg);
  }
  
  100% {
    transform: rotate(8deg);
  }
}