svg{max-width: 100%; max-height: 100vh;}

#fl-background{filter: blur(50px)}
.fl0{fill:#342;}
.fl1{fill:#efa;}
.fl2{fill:#B3CE41;}
.fl3{fill:black;}

.stem{
    fill:none;
    stroke:#9DC655;
    stroke-width:24;
}
#inner-bottom path{
    fill:#F7EA52;
    stroke:#F2E24C;
    stroke-width:3;
}
#inner-top path{
    fill:#FFEB5A;
    stroke:#FCDC42;
    stroke-width:3;
}
path{transition:200ms;}

.leaf{
    stroke-width:3;
    stroke-dasharray:1,1;
    fill:#758943;
    stroke:#69773F;
}
.petal-back{
    fill:url(#petal-back);
    stroke:#ffa480;
    stroke-width:3;
    stroke-dasharray:1,1;
}
.petal-front{
    fill:url(#petal-front);
    stroke:#ffbd91;
    stroke-width:2;
}

@keyframes petal{
    0%{transform: rotate(.02deg)}
    10%{transform: rotate(-.01deg)}
    17%{transform: rotate(.02deg)}
    25%{transform: rotate(-.03deg)}
    31%{transform: rotate(.04deg)}
    50%{transform: rotate(-.08deg)}
    60%{transform: rotate(.1deg)}
    70%{transform: rotate(-.3deg)}
    78%{transform: rotate(-.2deg)}
    85%{transform: rotate(.15deg)}
    90%{transform: rotate(-.1deg)}
    93%{transform: rotate(.3deg)}
    100%{transform: rotate(.02deg)}
}
.petal-front:nth-of-type(1), .petal-front:nth-of-type(2){
    animation: petal 5s 24s infinite;
    transform-origin: 600px 600px;
}
.petal-front:nth-of-type(2){
    animation-duration: 4s
}

/* buttons */
.jumpTo-dot{
    fill: rgba(221,221,187, .5);
    animation: twinkle 2s alternate linear 60;
    cursor: pointer;
}
.jumpTo{
    opacity: 0;
    cursor: pointer;
    transition: 400ms;
}
.jumpTo-wrap:hover .jumpTo{
    opacity: .2;
}
.jumpTo-wrap:hover .jumpTo:hover{
    opacity: .6;
    filter: none;
}
.jumpTo-wrap:hover .jumpTo:active{opacity: 1; transition: none}

.jumpTo-circle{fill:#ddb}
.jumpTo-shape{fill: #785}