body {
  background-color: #f5f5f5;
  text-align: center;
  transition: background-color 1s;
  justify-content: center;
  
  align-items: center;
}
#head {
  width: 100px;
  height: 80px;
  
  margin: 0 auto;
  border-radius: 10px 10px 0 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
 background-color: silver;
  
}
#middle-section {
  display: flex;
  justify-content: center;
  
}
#body {
  width: 120px;
  height: 120px;
  background-color: steelblue;
  border-radius: 10px;
}
#lower-section {
  justify-content: center;
  display: flex;
  gap: 20px;
}
.arm {
  width: 30px;
  height: 100px;
  background-color: gray;
  margin: 0 5px;
  border-radius: 15px;
  transform-origin: top center;
}

.leg {
  width: 40px;
  height: 110px;
  background-color: slategray;
  border-radius: 0 0 10px 10px;
}
button {
  margin-top: 30px;
  padding: 10px 20px;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 5px;
  border: 2px solid black;
}
@keyframes bounce {
  0%,
  100%{
    transform: translateX(0px);
  }

  50%{
    transform: translateY(-30px);
  }
}
@keyframes pumpArms {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(170deg);
  }
}
@keyframes disco {
  0% {
    background-color: orange;
    
  }
  33% {
    background-color: green;
  }
  66% {
    background-color: blue;

  }
  100% {
    background-color: orange;
  }
  
}

.dance-body{
  animation: bounce 0.4s infinite;
}
.dance-arms{
  animation: pumpArms 0.4s infinite;
}
.disco-floor {
  animation: disco 1s infinite;
}
#left-eye {
  height: 30px;
  width: 30px;
  background-color: yellow;
  border-radius: 5px;
  transition: background-color 1s;
  
}
#right-eye {
  height: 30px;
    width: 30px;
    background-color: yellow;
    border-radius: 5px;
    transition: background-color 1s;
}
@keyframes szpagat {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
    100% {
      transform: rotate(0deg);
   }
}
.do-a-trick {
  animation: szpagat 3s;
}
@keyframes car {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.carflip {
animation: car 1s infinite;
}