/* @import url("https://fonts.googleapis.com/css?family=Montserrat+Alternates"); */
html {
  height: 200vh;
  background: radial-gradient(ellipse at center, #dbb800 0%, #688acc 50%);
  cursor: pointer;
}

body {
  height: 100vh;
  overflow: hidden;
  border-bottom: 10vh #339545 solid;
  box-sizing: border-box;
  position: relative;
  text-align: center;
}

.headddd {
  text-align: center;
  color: yellow;
  font-family: "Montserrat Alternates", sans-serif;
  /* font-size: 25px; */
  position: absolute;
  align-items: center;
  z-index: 1;
  width: 100%;
  top: 0vh;
  transform: translate(0, 100vh);
  -webkit-animation: move 1s 2.5s forwards;
          animation: move 1s 2.5s forwards;
}
p{font-size: 14px;margin: 0;
  padding: 0;}
h1{margin: 0;  padding: 0;}

@-webkit-keyframes move {
  0% {
    transform: translate(0, 100vh);
  }
  100% {
    transform: translate(0vh, 0);
  }
}

@keyframes move {
  0% {
    transform: translate(0, 100vh);
  }
  100% {
    transform: translate(0vh, 0);
  }
}
.sunflwr {
  width: 80vmin;
  height: 80vmin;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0%);
}
.sunflwr__leaf--left, .sunflwr__leaf--right {
  width: 0%;
  height: 20%;
  border-radius: 0% 50% 0% 50%;
  position: absolute;
  background: #6f8e4b;
  top: 70%;
  left: 45%;
  transform: translate(-100%, -50%) rotate(-20deg);
  -webkit-animation: sunflwr__leaf forwards 1s 0.5s;
          animation: sunflwr__leaf forwards 1s 0.5s;
}
.sunflwr__leaf--right {
  top: 80%;
  left: 55%;
  transform: translate(0%, -50%) rotate(-70deg);
}
@-webkit-keyframes sunflwr__leaf {
  0% {
    width: 0%;
    border: 0px solid black;
  }
  100% {
    width: 20%;
    border: 2px solid black;
  }
}
@keyframes sunflwr__leaf {
  0% {
    width: 0%;
    border: 0px solid black;
  }
  100% {
    width: 20%;
    border: 2px solid black;
  }
}
.sunflwr__stem {
  position: absolute;
  transform: translate(-50%, 0%);
  width: 5%;
  height: 60%;
  background: #556d39;
  left: 50%;
  bottom: 0%;
  border: 2px solid black;
  -webkit-animation: sunflwr__stem forwards 1s;
          animation: sunflwr__stem forwards 1s;
}
@-webkit-keyframes sunflwr__stem {
  0% {
    height: 0;
  }
  100% {
    height: 60%;
  }
}
@keyframes sunflwr__stem {
  0% {
    height: 0;
  }
  100% {
    height: 60%;
  }
}
.sunflwr__center {
  border-radius: 50%;
  background-color: #3c1f03;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 40%;
  z-index: 2;
  -webkit-animation: sunflwr__center 1s 1s forwards;
          animation: sunflwr__center 1s 1s forwards;
}
@-webkit-keyframes sunflwr__center {
  0% {
    width: 0%;
    height: 0%;
  }
  100% {
    width: 25%;
    height: 25%;
  }
}
@keyframes sunflwr__center {
  0% {
    width: 0%;
    height: 0%;
  }
  100% {
    width: 25%;
    height: 25%;
  }
}
.sunflwr__pedal--1, .sunflwr__pedal--7, .sunflwr__pedal--12, .sunflwr__pedal--11, .sunflwr__pedal--10, .sunflwr__pedal--9, .sunflwr__pedal--8, .sunflwr__pedal--6, .sunflwr__pedal--5, .sunflwr__pedal--4, .sunflwr__pedal--3, .sunflwr__pedal--2 {
  border-radius: 50%;
  background: #f2fe00;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 40%;
  -webkit-animation: grow-pedal-back 1s 1.5s forwards;
          animation: grow-pedal-back 1s 1.5s forwards;
}
.sunflwr__pedal--2 {
  transform: translate(-50%, -50%) rotate(30deg);
}
.sunflwr__pedal--3 {
  transform: translate(-50%, -50%) rotate(60deg);
}
.sunflwr__pedal--4 {
  transform: translate(-50%, -50%) rotate(90deg);
}
.sunflwr__pedal--5 {
  transform: translate(-50%, -50%) rotate(120deg);
}
.sunflwr__pedal--6 {
  transform: translate(-50%, -50%) rotate(150deg);
}
@-webkit-keyframes grow-pedal-back {
  0% {
    width: 0%;
    height: 0%;
    border: 0px solid black;
  }
  100% {
    width: 15%;
    height: 45%;
    border: 2px solid black;
  }
}
@keyframes grow-pedal-back {
  0% {
    width: 0%;
    height: 0%;
    border: 0px solid black;
  }
  100% {
    width: 15%;
    height: 45%;
    border: 2px solid black;
  }
}
.sunflwr__pedal--7, .sunflwr__pedal--12, .sunflwr__pedal--11, .sunflwr__pedal--10, .sunflwr__pedal--9, .sunflwr__pedal--8 {
  border-radius: 20% 50% 20% 50%;
  transform: translate(-50%, -50%) rotate(15deg);
  -webkit-animation: grow-pedal-front 1s 2s forwards;
          animation: grow-pedal-front 1s 2s forwards;
}
.sunflwr__pedal--8 {
  transform: translate(-50%, -50%) rotate(45deg);
}
.sunflwr__pedal--9 {
  transform: translate(-50%, -50%) rotate(75deg);
}
.sunflwr__pedal--10 {
  transform: translate(-50%, -50%) rotate(105deg);
}
.sunflwr__pedal--11 {
  transform: translate(-50%, -50%) rotate(135deg);
}
.sunflwr__pedal--12 {
  transform: translate(-50%, -50%) rotate(165deg);
}
@-webkit-keyframes grow-pedal-front {
  0% {
    height: 0%;
    width: 0%;
    border: 0px solid black;
  }
  100% {
    height: 35%;
    width: 10%;
    border: 2px solid black;
  }
}
@keyframes grow-pedal-front {
  0% {
    height: 0%;
    width: 0%;
    border: 0px solid black;
  }
  100% {
    height: 35%;
    width: 10%;
    border: 2px solid black;
  }
}

@media only screen and (min-width: 768px) {
.headddd {
 
    justify-content: center;
    gap: 15px;
    align-items: center;
  
    display: flex;
    margin-top: 15px;
  }
}