* {
  box-sizing: border-box;
}

.tulip-container {
  position: relative;
  width: 200px;
  height: 400px;
  margin: 0 auto;
  z-index: -2;
  top: 2%;
}

.tulip {
  width: 10px;
  height: 400px;
  margin: 30px 100px;
  float: left;
}

.leftBabyTulip {
  transform: scale(0.6);
  left: -153px;
  top: 74px;
}
.leftBabyTulip .rightStemLeaf {
  top: 105px;
  transform: rotate(-32deg);
  left: -15px;
}
.leftBabyTulip leftStemLeaf {
  transform: scale(0.7) rotate(90deg);
  left: -54px;
}

.rightBabyTulip {
  transform: scale(0.8);
  left: 163px;
  top: 42px;
}
.rightBabyTulip .tulipHead {
  transform: rotate(23deg);
  left: -80px;
}
.rightBabyTulip .leftStemLeaf {
  visibility: hidden;
}
.rightBabyTulip .rightStemLeaf {
  top: 70px;
  transform: rotate(-32deg);
  left: -15px;
}

.tulip,
.stem,
.stemLeaf,
.tulipHead,
.tulipLeaf,
.tulipHair,
.tulipEyes,
.tulipSmile,
.tulipBlush {
  position: absolute;
}

.stem {
  height: 200px;
  width: 10px;
  border-radius: 50px;
  background-color: #25af59;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 0;
}

.stemLeaf {
  background-color: #139a3e;
  width: 60px;
  height: 60px;
}

.leaf {
  border-radius: 90% 0 90% 0;
}

.rightStemLeaf {
  top: 60%;
  width: 100px;
  transform: rotate(-10deg);
  left: -1px;
}

.leftStemLeaf {
  top: 20%;
  width: 80px;
  transform: rotate(90deg);
  left: -63px;
  z-index: -2;
}

.tulipHead {
  top: -159px;
  left: -102px;
  background-color: #f56ad2;
  width: 200px;
  height: 165px;
  border-radius: 0 0 50% 50%;
  z-index: 0;
  transform: rotate(-11deg);
}

.tulipLeaf {
  background-color: #b1289a;
  width: 40px;
  height: 40px;
  z-index: -1;
}

.rightTulipLeaf {
  transform: rotate(90deg);
  left: 4px;
}

.leftTulipLeaf {
  left: -33px;
}

.tulipHair {
  width: 0;
  height: 0;
  top: -60px;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 60px solid #f56ad2;
}

.lightTulip {
  border-bottom: 60px solid #f56ad2;
}

.darkTulip {
  border-bottom: 60px solid #b1289a;
  border-bottom: 32px solid #9c1368;
  top: -32px;
  z-index: -1;
}

.darkTulip-1 {
  left: 30px;
}

.darkTulip-2 {
  left: 110.7px;
}

.lightTulip-1 {
  transform: rotate(-27deg);
  top: -43px;
  left: -17px;
}

.lightTulip-2 {
  left: 70px;
}

.lightTulip-3 {
  transform: rotate(27deg);
  top: -43px;
  left: 156px;
}

/* Wind swaying physics */
@keyframes sway {
  0% {
    transform: rotate(-3deg) skewX(-2deg);
  }
  50% {
    transform: rotate(2deg) skewX(1deg);
  }
  100% {
    transform: rotate(9deg) skewX(6deg);
  }
}

/*# sourceMappingURL=tulip.css.map */