@charset "UTF-8";

/* CSS rules go below */

@keyframes trunk-shrink {
    0% {        
        transform: scale(1);
    }
    100% {
        transform: scale(0);
        
    }
}

@keyframes trunk-grow {
    0% {
        transform: scale(0);
        background-color: rgb(82, 206, 82);
    }
    100% {
        transform: scale(1);        
    }
}

@keyframes trunk-shrink {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
        background-color: rgb(82, 206, 82);
    }
}

@keyframes stem-odd-grow {
    0% {
        transform: scale(0) rotate(-60deg) translateZ(-1px);
    }
    100% {
        transform: scale(1) rotate(-60deg) translateZ(-1px);
    }
}

@keyframes stem-odd-shrink {
    0% {
        transform: scale(1) rotate(-60deg) translateZ(-1px);
    }
    100% {
        transform: scale(0) rotate(-60deg) translateZ(-1px);
    }
}

@keyframes stem-even-grow {
    0% {
        transform: scale(0) rotate(60deg) translateZ(-1px);
    }
    100% {
        transform: scale(1) rotate(60deg) translateZ(-1px);
    }
}

@keyframes stem-even-shrink {
    0% {
        transform: scale(1) rotate(60deg) translateZ(-1px);
    }
    100% {
        transform: scale(0) rotate(60deg) translateZ(-1px);
    }
}

@keyframes leaf-odd-grow {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes leaf-odd-shrink {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes leaf-even-grow {
    0% {
        transform: scale(0) rotate(250deg);
    }
    100% {
        transform: scale(1) rotate(250deg);
    }
}

@keyframes leaf-even-shrink {
    0% {
        transform: scale(1) rotate(250deg);
    }
    100% {
        transform: scale(0) rotate(250deg);
    }
}

@keyframes flower-color-change {
    0% {
        background: rgb(240, 193, 249);
    }
    100% {
        background: rgb(255, 0, 0);
    }
}

@keyframes cloud-to-center {
    0% {
        translate: -704px;
    }
    100% {
        translate: none;
        background: #ffffff;
    }
}

@keyframes cloud-to-left {
    0% {
        translate: none;
        background: #ffffff;        
    }
    100% {
        translate: -704px;
    }
}

@keyframes water-fall {
    0% {
      
    }
    100% {
        width: 70px;
        height: 70px;
        top: 525px;
    }
}

@keyframes water-vanish {
    0% {
      
    }
    100% {
        visibility: hidden;
    }
}


html, body {
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    justify-content: center;
    align-items: end;
    width: 100%;
    min-height: 600px;
    background-color: #ffe062;
}

.pot {
    position: relative;
}

.pot-top {
    width: 200px;
    height: 40px;
    background-color: #c55702;
    /*top: 500px;
    left: 300px;*/
    position: relative;
    margin: 0 auto;
}
.pot-bot {
    width: 150px;
    height: 0px;
    position: relative;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 50px solid #c55702;
    /*top: 530px;
    left: 310px;*/
    left: 10px;
    z-index: 5;
}
.pot-top-shadow {
    width: 170px;
    height: 0px;
    position: absolute;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 15px solid #a74901;
    /*top: 530px;
    left: 310px;*/
    z-index: 10;
    bottom: 35px;
    left: 10px;
}

.trunk {
    border-radius: 35px 35px 0px 0px;
    background: rgb(67, 41, 0);    
    position: relative;
    width: 20px;
    height: 200px;
    margin: 0 auto;
    transform-style: preserve-3d;

    transform-origin: 50% 100%;
    animation-name: trunk-grow;
    animation-duration: 4s;
    animation-fill-mode: both;
    animation-delay: 1.0s;
}

.stem {
    position: absolute;

    transform-origin: bottom center;
    width: 5px;

   background: rgb(67, 41, 0);

    animation-duration: 4s;
    animation-fill-mode: both;
    animation-delay: 0s;
}

.stem:nth-child(even) {
    transform: rotate(-60deg) translateZ(-1px);
    animation-name: stem-even-grow;
}

.stem:nth-child(odd) {
    transform: rotate(60deg) translateZ(-1px);
    animation-name: stem-odd-grow;
}

.stem:nth-child(1) {
    height: 125px;
}

.stem:nth-child(2) {
    height: 80px;
    left: 10px;
}

.stem:nth-child(3) {
    height: 50px;
}

.leaf {
    background-color: rgb(82, 206, 82);
    width: 30px;
    height: 30px;
    border-radius: 58% 10% 50% 5% / 58% 1% 60% 10%;
    left: 100%;

    position: absolute;

    animation-duration: 4s;
    animation-fill-mode: both;
}

.leaf:nth-child(odd) {
    top: -5px;
    transform-origin: 0% 100%;
    animation-name: leaf-odd-grow;
}

.leaf:nth-child(even) {
    top: 20px;
    transform: rotate(250deg);
    transform-origin: 0% 100%;
    animation-name: leaf-even-grow;
}

.leaf:nth-child(1) {
    animation-delay: 1.0s;
}

.leaf:nth-child(2) {
    animation-delay: 0.5s;
}

.leaf:nth-child(3) {
    animation-delay: 0.0s;
    top: 65px;
}

.flower, .last-flower {
    width: 30px;
    height: 10px;
    background: rgb(240, 193, 249);
    border-radius: 50px;
    animation-duration: 4s;
    animation-fill-mode: both;  
}

.flower::before, .last-flower:before {
    content: "";
    display: block;
    position: absolute;
    width: 30px;
    height: 10px;
    background: rgb(240, 193, 249);
    border-radius: 50px;
    transform: rotate(60deg)
}

.flower::after, .last-flower:after {
    content: "";
    display: block;
    width: 30px;
    height: 10px;
    background: rgb(240, 193, 249);
    border-radius: 50px;
    transform: rotate(-60deg)
}

.flower:nth-child(odd) {
    animation-name: leaf-odd-grow;
}

.flower:nth-child(even) {
    animation-name: leaf-even-grow;
}

.flower:nth-child(1) {
    margin-top: 45px;
    margin-left: 10px;
}

.flower:nth-child(2) {
    margin-top: -45px;
    margin-left: -45px;
}

.flower:nth-child(3) {
    margin-top: 65px;
    margin-left: -40px;
}

.last-flower {
    animation-name: leaf-even-grow;
    margin-top: 5px;
    margin-left: 35px;
}

/*.leaf1 {
background-color: rgb(82, 206, 82);
width: 30px;
height: 30px;
border-radius: 58% 10% 50% 5% / 58% 1% 60% 10%;
transform: rotate(190deg);
margin-left: 40px;
}

.leaf2 {
background-color: rgb(82, 206, 82);
width: 30px;
height: 30px;
border-radius: 58% 10% 50% 5% / 58% 1% 60% 10%;
transform: rotate(250deg);
}*/

.hint-text {
    position: absolute;
    top: 620px;
    left: 50px;
    font-family: 'arial';
}

.cloud {
    height: 180px;
    aspect-ratio: 1.8;
    --g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
    mask: var(--g) 100% 100%/30% 60%,var(--g) 70% 0/50% 100%,var(--g) 0 100%/36% 68%,var(--g) 27% 18%/26% 40%,linear-gradient(#000 0 0) bottom/67% 58% no-repeat;
    background: #a9d8fc;
    position: absolute;
    top: 10px;
  
    animation-name: cloud-to-center;
    animation-duration: 1.0s;
    animation-fill-mode: both;
}

.water-drop {
    position: absolute;
    background-color: #a9d8fc;    
    width: 10px;
    height: 10px;
    border-radius: 0% 100% 100% 100%;
    transform: rotate(45deg);
    top: 220px;
  
    animation-name: water-fall;
    animation-duration: 1.5s;
    animation-fill-mode: both;
  
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

@media screen and (min-width: 1500px) {
    .flower:nth-child(odd) {
        animation-name: flower-color-change;
    }
    .flower:nth-child(even) {
        animation-name: flower-color-change;
    }
    .last-flower {
        animation-name: flower-color-change;
    }
}

@media screen and (max-width: 1300px) {
    .flower:nth-child(odd) {
        animation-name: leaf-odd-shrink;
        animation-delay: 0s;
    }
    .flower:nth-child(even) {
        animation-name: leaf-even-shrink;
        animation-delay: 0s;
    }
    .last-flower {
        animation-name: leaf-odd-shrink;
        animation-delay: 0s;
    }
}

@media screen and (max-width: 1100px) {
    .leaf:nth-child(odd) {
        animation-name: leaf-odd-shrink;
    }
    .leaf:nth-child(even) {
        animation-name: leaf-even-shrink;
    }
}

@media screen and (max-width: 900px) {
    .stem:nth-child(3) {
        animation-name: stem-odd-shrink;
    }
}

@media screen and (max-width: 850px) {
    .stem:nth-child(2) {
        animation-name: stem-even-shrink;
    }
}

@media screen and (max-width: 800px) {
    .stem:nth-child(1) {
        animation-name: stem-odd-shrink;
    }
}

@media screen and (max-width: 700px) {
    .trunk {        
        animation-name: trunk-shrink;
    }
}

@media screen and (max-width: 600px) {
    .water-drop {        
        animation-name: water-vanish;
        animation-duration: 0s;
    }
}

@media screen and (max-width: 500px) {
    .cloud {        
        animation-name: cloud-to-left;    
    }
}

/*@media screen and (orientation: landscape) {
.leaf:nth-child(odd) {
animation-name: leaf-odd-shrink;
animation-delay: 1.0s;
}
.leaf:nth-child(even) {
animation-name: leaf-even-shrink;
animation-delay: 1.5s;
}
.stem:nth-child(1) {
animation-name: stem-odd-shrink;
animation-delay: 2.0s;
}
.stem:nth-child(2) {
animation-name: stem-even-shrink;
animation-delay: 2.5s;
}
.trunk {
animation-name: trunk-shrink;
animation-delay: 3.0s;
}
}*/