style.css

*{
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.background-img {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center;
    filter: blur(15px);
}

.page{
    position: relative;
    height: 100vh;
    width: 100vw;
}

.flower{
    z-index: 100;
}

.spider-net{
    z-index: 250;
}

.flower-next{
    position:fixed;
    /* top: 650px; 
    left:320px; */
    bottom: 50px;
    right:50px;
    height: 30px;
    width: 30px; 

    animation-name: next-page;
    animation-duration: 600ms;
    animation-timing-function: ease;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

.butterfly-container{
    z-index: 1000;
    height: fit-content;
    width: fit-content;
    transform: rotate(90deg);
    position: fixed;
}

.butterfly {
    width: 80px;
    height: 80px;
    /* transform: scale(1, 1) */
}

.butterfly-animate{
    animation: flap 0.1s infinite both;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

.first-path{
    offset-path: path("m -3.9127973,9.0660627 c 0,0 35.8140983,78.2804783 108.4797173,83.3384323 72.66561,5.057947 105.71567,-77.901496 135.96286,-63.5555 21.72662,10.304761 27.94712,74.606045 63.25491,74.239355 13.481,-0.14 49.47979,-24.996233 62.24259,-11.417206 5.32021,5.660469 24.90052,79.136626 -58.92038,83.470256 -10.73294,0.47703 -106.7941,-7.78324 -107.03847,76.12865");
}

.second-path{
    offset-path: path("m 200.06843,251.27005 c 0,0 -4.29087,32.45953 -91.03728,35.27499 -23.478271,0.76202 -87.446707,17.72412 -60.864917,69.36168 16.881887,32.79463 72.929057,30.53217 72.929057,30.53217 0,0 40.3751,-2.51917 82.50858,-47.48824 0,0 14.98645,-13.94166 25.01114,-3.0583 10.02469,10.88335 6.89952,20.93009 -5.31534,39.9052 -12.21485,18.97513 -32.77231,18.08591 -42.21133,45.33406 -9.43902,27.2481 -3.04522,36.74279 3.00221,42.10641 11.62809,10.31322 21.28789,8.84252 40.4427,6.31365 36.37629,-4.80249 71.32399,-23.55077 71.32399,-23.55077")
}

.third-path{
    offset-path: path("m 295.85724,446.0009 c 0,0 68.14376,-31.1968 71.57335,76.43084 3.42959,107.62765 -169.95901,31.82628 -186.39389,26.8656 -48.46466,-14.62852 -137.929665,-14.60809 -141.182139,56.29851 -3.252473,70.9066 99.214579,53.37579 99.214579,53.37579");
}

.animate-path{
    animation-name: motionpathguy;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-direction: normal;
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

@keyframes motionpathguy {
    0%{
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

@keyframes flap {
    from {
        transform: scale(1.1, 1)
    }

    to {
        transform: scale(0.4, 0.9)
    }
}

@keyframes next-page {
    from{
        transform: scale(1, 1)
    }
    to{
        transform: scale(1.3, 1.3)
    }
}

.text.thank-you{
    top:318px;
    left: 125px;
    width: 205px;
    height: 110px;
    font-size:67px;
    line-height:0.85;
    color:#fee200;

    animation-name: thank-you-anim;
    animation-duration: 700ms;
    animation-timing-function: cubic-bezier(.22,.61,.36,1);
    animation-direction: normal;
    animation-iteration-count: infinite;
}

.text.the-end{
    top:660px;
    left: 38px;
    width: 176px;
    height: 29px;
    font-size:40px;
    line-height:1.25;
    color:#fee200;
}

.text.by{
    top:700px;
    left: 320px;
    width: 81px;
    height: 21px;
    font-size:22px;
    line-height:1.25;
    color:#000000;
}

.text{
    position: absolute;
    z-index: 1000;

    display: block;
    font-style:normal;
    font-weight:normal;
    font-size:66.8457px;
    line-height:0.85;
    font-family: 'Dancing Script', cursive;
    text-align:center;
    text-anchor:middle;
    color:#000000;
    fill-opacity:1;
    stroke:none;
}

@keyframes thank-you-anim {
    0%, 100%{
        transform: scale(1.1,1.1);
    }

    80%{
        transform: scale(0.84, 0.84);
    }
}