body {
  display: flex;
  justify-content: center;
  align-items: end;
  min-height: 100vh;
  overflow: hidden;
  background-color: #202121;
}

.sun-flower {
  position: absolute;
  top: 0;
  left: 80%;
  transform: translateY(-100%) rotate(1deg);
  z-index: 1;
}
.sun-flower__wrapper {
  position: absolute;
  animation: moving 10s infinite;
}
.sun-flower__circle {
  width: 10vmin;
  height: 10vmin;
  border-radius: 50%;
  position: relative;
}
.sun-flower__circle > div {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6vmin;
  height: 6vmin;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background-color: #b84900;
}
.sun-flower__circle > div::after {
  content: "";
  position: absolute;
  z-index: 100;
  left: 50%;
  top: 50%;
  width: 8vmin;
  height: 8vmin;
  border-radius: 50%;
  transform: translate(-110%, 5%);
  border: 0.2vmin solid #faa200;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(112.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(22.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(67.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(157.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(112.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(67.5deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 12px), linear-gradient(90deg, #b84900, #b84900);
}
.sun-flower__circle--small {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vmin;
  height: 10vmin;
  border-radius: 100% 2% 100% 2%;
  background-color: #ffc628;
  transform-origin: left bottom;
}
.sun-flower__circle--small:nth-child(1) {
  transform: translate(-50%, -50%) rotate(40deg);
  z-index: 2;
}
.sun-flower__circle--small:nth-child(2) {
  transform: translate(-50%, -50%) rotate(80deg);
  z-index: 2;
}
.sun-flower__circle--small:nth-child(3) {
  transform: translate(-50%, -50%) rotate(120deg);
  z-index: 2;
}
.sun-flower__circle--small:nth-child(4) {
  transform: translate(-50%, -50%) rotate(160deg);
  z-index: 2;
}
.sun-flower__circle--small:nth-child(5) {
  transform: translate(-50%, -50%) rotate(200deg);
  z-index: 2;
}
.sun-flower__circle--small:nth-child(6) {
  transform: translate(-50%, -50%) rotate(240deg);
  z-index: 2;
}
.sun-flower__circle--small:nth-child(7) {
  transform: translate(-50%, -50%) rotate(280deg);
  z-index: 2;
}
.sun-flower__circle--small:nth-child(8) {
  transform: translate(-50%, -50%) rotate(320deg);
  z-index: 2;
}
.sun-flower__circle--small:nth-child(9) {
  transform: translate(-50%, -50%) rotate(360deg);
  z-index: 2;
}
.sun-flower__circle--small:nth-child(10) {
  transform: translate(-50%, -50%) rotate(400deg);
  z-index: 2;
}
.sun-flower__circle--top {
  transform-origin: left bottom;
  transform: translate(-50%, -50%) rotate(20deg) !important;
}
.sun-flower__circle--top > * {
  background-image: linear-gradient(to left bottom, #fbd603 40%, #ff7d04);
}
.sun-flower__line .line {
  width: 12vmin;
  height: 36vmin;
  border-radius: 100% 0 0 0;
  border-left: 1.2vmin solid #bec827;
  border-top: 1vmin solid #bec827;
  -webkit-mask-image: linear-gradient(to top, transparent, #bec827 5%);
}
.sun-flower__leaf {
  position: absolute;
  left: 25%;
  top: 25%;
  width: 15vmin;
  height: 12vmin;
  border-radius: 90% 0% 100% 20%;
  background-image: linear-gradient(to right bottom, #a7ad27 50%, #bec827 50%);
  transform-origin: left;
  transform: perspective(100px) rotateX(40deg) scale(0.7);
}
.sun-flower__leaf:nth-child(odd) {
  left: 10%;
  transform: perspective(100px) rotateY(180deg) rotateX(30deg) rotate(-10deg) scale(0.6);
}
.sun-flower__leaf::after {
  content: "";
  position: absolute;
  width: 4vmin;
  height: 6vmin;
  border-radius: 100% 0 0 0;
  border-left: 1vmin solid #bec827;
  border-top: 1vmin solid #bec827;
  bottom: 0;
  left: 0;
  transform: translate(-57%, 72%);
  z-index: -1;
}
.sun-flower__leaf--1 {
  top: 35%;
}
.sun-flower__leaf--2::after {
  transform: translate(-84%, 72%);
}
.sun-flower__leaf--3 {
  left: 20%;
  top: 55%;
  transform: perspective(100px) rotateX(40deg) scale(0.5);
}
.sun-flower__leaf--3::after {
  transform: translate(-64%, 72%);
}
.sun-flower__leaf--4 {
  left: 5% !important;
  top: 50%;
  transform: perspective(100px) rotateY(180deg) rotateX(30deg) rotate(-10deg) scale(0.45) !important;
}

@keyframes moving {
  0%, 100% {
    transform: rotate(-6deg);
  }
  50% {
    transform: rotate(-10deg);
  }
}