body {
  margin: 10%;
  padding: 0;
  background-image: url(./img/hashnode-brand-icon.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  font-family: "Luxurious Roman", cursive;
}

/* Flower section */
.flower-container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  justify-items: center;
  margin-top: 5%;
}

.upper-circle,
.middle-circle-left,
.middle-circle-right,
.buttom-circle {
  width: 100px;
  height: 100px;
  border-radius: 30%;
  animation: flower-animation 5s linear infinite;
}
.middle-circle-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
}
.middle-circle-middle {
  transform: rotate(45deg);
  animation: circle 6s linear infinite;
}

.stem {
  width: 5px;
  height: 100px;
  background-color: green;
  margin-bottom: -5%;
}

.stem-leaves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
}

.leaf-left {
  width: 100px;
  height: 200px;
  background-color: #046104;
  border-radius: 50%;
  transform: rotate(-45deg);
  animation: left-leaf-animation 2s linear infinite;
}

.leaf-right {
  width: 100px;
  height: 200px;
  background-color: #286b28;
  border-radius: 50%;
  transform: rotate(45deg);
  animation: right-leaf-animation 2s linear infinite;
}

/* Social media */

.social-media {
  display: grid;
  grid-template-rows: 1fr;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 10px;
}
.social-media li {
  list-style: none;
  display: inline-block;
  margin: 0px 10px;
}

#twitter {
  transform: rotate(25deg);
}

#linkedin {
  transform: rotate(-25deg);
}

#github {
  transform: rotate(25deg);
}
#medium {
  transform: rotate(-25deg);
}

@keyframes circle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes left-leaf-animation {
  0% {
    transform: rotate(-50deg);
  }
  100% {
    transform: rotate(-35deg);
  }
}
@keyframes right-leaf-animation {
  0% {
    transform: rotate(50deg);
  }
  100% {
    transform: rotate(35deg);
  }
}

@keyframes flower-animation {
  0% {
    transform: rotate(0deg);
    background-color: orange;
  }
  20% {
    background-color: rgb(243, 13, 155);
  }
  50% {
    background-color: rgb(245, 241, 8);
  }

  70% {
    background-color: rgb(235, 106, 217);
  }
  100% {
    transform: rotate(360deg);
    background-color: #e8f80d;
  }
}