* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  background-color: rgb(230, 203, 63);
}

rect, polygon, path, ellipse {
  animation: fade-in 40s infinite;
}

.j {
  fill: #00a14b;
}

@keyframes fade-in {
  0%, 100% {
    opacity: 0;
    height: 0;
  }
  50% {
    opacity: 1;
    height: 100vh;
  }
}

@keyframes change-color {
  0% {
    fill:red; 
  }
  50% {
    fill: yellow; 
  }
  100% {
    fill: blue; 
  }
}

ellipse {
  animation:  fade-in 40s infinite;
  transform-origin: center center; 
}

@keyframes change-color {
  0% {
    fill: #ff5733; 
  }
  50% {
    fill: #4285f4; 
  }
  100% {
    fill: #ff5733; 
  }
}