body {
  font-family: Arial, sans-serif;
  padding: 40px;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}


.box{
  width: 100px;
  height: 100px;
  background-image: url('./ai/robot.png');
 background-size: cover;
 
}

.poruszaj {
animation: moveBox 5s infinite;
}

@keyframes moveBox {
  0% {
    transform: translate(0, 0) rotate(0deg);
    background-color: red;
  }

  25% {
    transform: translate(200px, 0) rotate(90deg);
      background-color: blue;
      width: 150px;
      height: 150px;
  }
  
  50% {
    transform: translate(200px, 200px) rotate(180deg);
      background-color: green;
  }

  75% {
        transform: translate(0, 200px) rotate(270deg);
          background-color: yellow;
  }

  100%{
    transform: translate(0, 0) rotate(360deg);
      background-color: red;
  }

}