html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#burst {
  position: absolute;
  width: 400vw;
  height: 400vh;
  animation: background-rotation 30s linear infinite;
  top: 50%;
  left: 50%;
}

#burst:after,
#burst:before {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, transparent 50%, #f4ea51 50%, #f4ea51),
    linear-gradient(82deg, transparent 50%, #e6863b 50%, #e6863b),
    linear-gradient(67deg, transparent 50%, #f4ea51 50%, #f4ea51),
    linear-gradient(52deg, transparent 50%, #e6863b 50%, #e6863b),
    linear-gradient(37deg, transparent 50%, #f4ea51 50%, #f4ea51),
    linear-gradient(22deg, transparent 50%, #e6863b 50%, #e6863b),
    linear-gradient(7deg, transparent 50%, #f4ea51 50%, #f4ea51),
    linear-gradient(-8deg, transparent 50%, #e6863b 50%, #e6863b),
    linear-gradient(-23deg, transparent 50%, #f4ea51 50%, #f4ea51),
    linear-gradient(-38deg, transparent 50%, #e6863b 50%, #e6863b),
    linear-gradient(-53deg, transparent 50%, #f4ea51 50%, #f4ea51),
    linear-gradient(-68deg, transparent 50%, #e6863b 50%, #e6863b),
    linear-gradient(-83deg, transparent 50%, #f4ea51 50%, #f4ea51),
    linear-gradient(-90deg, transparent 50%, #e6863b 50%, #e6863b);
  background-position: 0% 0%;
  background-size: 200% 100%;
  height: 100%;
  width: 50%;
}

#burst:before {
  left: 50%;
  transform: rotate(180deg);
}

@keyframes background-rotation {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

#corn {
  position: absolute;
  background-image: url("corn.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  top: 50%;
  left: 50%;
  animation: corn-rotation 10s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

@media only screen and (min-width: 720px) {
  #corn {
    width: 768px;
    height: 768px;
  }
}

@media only screen and (max-width: 720px) {
  #corn {
    width: 384px;
    height: 384px;
  }
}

@keyframes corn-rotation {
  0% {
    transform: translate(-50%, -50%) rotate(-40deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(-20deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-40deg);
  }
}