<!DOCTYPE CSS>
        <style>


            :root {
                --header-image: url(https://heemiiin.neocities.org/missing.png);
                --body-bg-image: url(https://heemiiin.neocities.org/misc302.gif);

                /* colors */
                --content: #D2C4B4;
            }

              @font-face {
                   font-family:'kiwi';
                    src: url(https://dl.dropbox.com/s/388cvx0do21kj3n/KiwiSoda.ttf);
              }
 
     #miniblog2 {
      scrollbar-width: none;
      scrollbar-color: rgba(0, 0, 0, 0.5) transparent;
      background-image: url(https://heemiiin.neocities.org/leave.gif);
      overflow: auto;
      line-height: 15px;
      height: 160px;
      width: 200px;
      border-width:15px;
      border-style:solid;
      border-image: url("https://i.imgur.com/Kh6qtcn.png") 25 fill round;         
      border-radius: 10px;
    }

#kiwi {
font-family:'kiwi';
font-size: 25px;
}

           @font-face {
                font-family: windows;
                src: url(https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf)format (truetype);
           }
 
#windows {
font-family: windows;
font-size: 20px;
}

@font-face {
font-family: billo;
src: url(https://dl.dropbox.com/s/klv8tmajlqrb2xz/BILLO___.TTF);
}

#billo {
font-family: billo;

}
 

         @font-face {
              src: url(https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf);
              font-family: hearts;
         }
 
#hearts {
font-family: hearts;
font-size: 20px;
}
            body {
                font-family: 'Nunito', sans-serif;
                margin: 0;
                background-color: #D2C4B4;
                background-image: var(--body-bg-image);
            }

            * {
                box-sizing: border-box;
            }


            /* below this line is CSS for the layout */

            /* this is a CSS comment
    to uncomment a line of CSS, remove the * and the /
    before and after the text */


            /* the "container" is what wraps your entire website */
            /* if you want something (like the header) to be Wider than
    the other elements, you will need to move that div outside
    of the container */
            #container {
                max-width: 1350px;
                /* this is the width of your layout! */
                /* if you change the above value, scroll to the bottom
      and change the media query according to the comment! */
                margin: 0 auto;
                 border:4px dashed #8CA9FF;
                      border-width:20px;
border-style:solid;
border-image: url("https://dl.dropbox.com/s/v8iy6a8feyq041p/blue%20ver.png") 8 fill round; 
                 box-sizing: border-box;
                /* this centers the entire page */
            }

            /* the area below is for all links on your page
    EXCEPT for the navigation */
            #container a {
                color: #D2C4B4;
                font-weight: bold;
                /* if you want to remove the underline
      you can add a line below here that says:
      text-decoration:none; */
            }

            #header {
                width: 100%;
                background-color: #8CC0EB;
                height: 150px;
                background-image: var(--header-image);
                background-size: cover;
            }

            /* navigation section!! */
            #navbar {
                height: 40px;
                background-color: #81A6C6;
                width: 100%;
            }

            #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }

            #navbar li {
                padding-top: 10px;
            }

            /* navigation links*/
            #navbar li a {
                color: #576A8F;
                /* navbar text color */
                font-weight: 800;
                text-decoration: none;
                /* this removes the underline */
            }

            /* navigation link when a link is hovered over */
            #navbar li a:hover {
                color: #30364F;
                text-decoration: underline;
            }

            #flex {
                display: flex;
                border:4px solid #FFCDC9;
            }

            /* this colors BOTH sidebars
    if you want to style them separately,
    create styles for #leftSidebar and #rightSidebar */
            aside {
                background-image: url(https://heemiiin.neocities.org/heartsbloo.gif);
                width: 270px;
                padding: 20px;
                font-size: smaller;
                border:5px double #FFF9D2;
                box-sizing: border-box;
                /* this makes the sidebar text slightly smaller */
            }


            /* this is the color of the main content area,
    between the sidebars! */
            main {
                background-color: #AACDDC;
                flex: 1;
                padding: 20px;
                order: 2;
                border:5px double #FFF9D2;
                height: 1300px;
            }

            /* what's this "order" stuff about??
    allow me to explain!
    if you're using both sidebars, the "order" value
    tells the CSS the order in which to display them.
    left sidebar is 1, content is 2, and right sidebar is 3! */

             #leftSidebar {
                order: 1;
            }

            #rightSidebar {
                order: 3;
            }

            footer {
                background-color: #81A6C6;
                /* background color for footer */
                width: 100%;
                height: 40px;
                padding: 10px;
                text-align: center;
                /* this centers the footer text */
            }

            h1,
            h2,
            h3 {
                color: #81A6C6;
            }

            h1 {
              font-family: windows;
                font-size: 25px;
            }

           li a {
              font-family: kiwi;
                font-size: 25px;
            }

           h2 {
              font-family: kiwi;
                font-size: 20px;
            }

           h3 {
              font-family: windows;
                font-size: 20px;
            }

           p {
              font-family: hearts;
                font-size: 20px;
            }

           footer {
              font-family: hearts;
                font-size: 20px;
            }

           li {
              font-family: hearts;
                font-size: 20px;
            }
 

            /* this is just a cool box, it's the darker colored one */
            .box {
                background-image: url(https://heemiiin.neocities.org/gbb.gif);
                /*(c) baeyhkun*/
border-width: 7px; 
border-style: solid;
border-image: url("https://i.imgur.com/8xftJ3v.gif") 7 fill round;       
                padding: 10px;
                width: 215px;
            }

            .boxx {
                background-image: url(https://heemiiin.neocities.org/gbb.gif);
  display: flex;
  justify-content: center;
                padding: 10px;
        overflow-y:auto;
              /*(c) lovermonth*/
border-style: solid;
border-width: 26px 26px 26px 26px;
-moz-border-image: url(https://i.imgur.com/PaK2h0q.gif) 26 26 26 26 round round;
-webkit-border-image: url(https://i.imgur.com/PaK2h0q.gif) 26 26 26 26 round round;
-o-border-image: url(https://i.imgur.com/PaK2h0q.gif) 26 26 26 26 round round;
border-image: url(https://i.imgur.com/PaK2h0q.gif) 26 26 26 26 round round;         
    
            }

        .whitecloudybox {
height: 280px;
width: 100%;
border: 10px solid transparent;
box-sizing: border-box;
border-image: url(https://i.postimg.cc/QM9dMFhq/cloud.png) 50 round;
}
        .boxbb {
height: 160px;
width: 160px;
border: 10px double #F26076;
box-sizing: border-box;

}
.whitecloudyfull { 
width:100%;
height:100%;
overflow-y:auto;
background:#fff;
color:black;

}
        .boxbbfull {
height: 100%;
width: 100%;
background:#fff;
color:black;
display: flex;
  justify-content: center;
  align-items: center;
}
.title-bar-controls button {
border:none;
border-radius:0;
box-sizing:border-box;
color:transparent;
min-height:23px;
min-width:75px;
padding:0 12px;
text-shadow:0 0 #222;
}
    .mitsukke {
      position: fixed;
      z-index: 10;
      width: 400px;
      bottom: -90px;
      left: -80px;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.wendyeo {
        position: fixed;
      z-index: 10;
      width: 200px;
      top: 10px;
      right: 100px; 
animation-name: floating; 
animation-duration: 3s; 
animation-iteration-count: infinite; 
animation-timing-function: ease-in-out;
} 

@keyframes floating { 
0% { 
transform: translate(0,  0px); 
} 

50%  { 
transform: translate(0, 15px); 
} 

100%   {
transform: translate(0, -0px); 
} 
  
    
.mitsukke:hover {
  -webkit-animation-name: bounces;
  animation-name: bounces;
}

@-webkit-keyframes bounces {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounces {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}     
    
    }
.title-bar-controls button {
background:silver;
box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
}

.title-bar-controls button:not(:disabled):active {
box-shadow:inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
text-shadow:1px 1px #222;
}

@media (not(hover)){
button:not(:disabled):hover {
box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px #dfdfdf,inset 2px 2px grey}
}

.title-bar-controls button:focus {
outline:1px dotted #000;
outline-offset:-4px;
}

.title-bar-controls button::-moz-focus-inner { border:0 }
    
@font-face {
font-family: "Pixelated MS Sans Serif";
src: url("https://files.catbox.moe/1za99g.woff") format("woff");
src: url("https://files.catbox.moe/8fwbkl.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}   

.window, .title-bar {
font-family: "Pixelated MS Sans Serif", Arial;
-webkit-font-smoothing: none;
font-size: 11px;
}

.window {
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff;
background: #c0c0c0;
color:#000;
padding: 3px;
width:100%;
}

.title-bar {
background:linear-gradient(90deg, #81A6C6, #AACDDC, #BFDDF0);
padding: 3px 2px 3px 3px;
display: flex;
justify-content: space-between;
align-items: center;
}

.title-bar-text {
font-weight: bold;
color: white;
letter-spacing: 0;
margin-right: 24px;
}

.title-bar-controls {
display: flex;
}

.title-bar-controls button {
padding: 0;
display: block;
min-width: 16px;
min-height: 14px;
}

.title-bar-controls button:active {
padding: 0;
}

.title-bar-controls button:focus {
outline: none;
}

.title-bar-controls button[aria-label=Minimize]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/minimize.svg");
background-position:bottom 3px left 4px;
background-repeat:no-repeat
}

.title-bar-controls button[aria-label=Maximize]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/4a2282dd9170cabf730fb5803d1153d86b2e94e3/icon/maximize.svg");
background-position:top 2px left 3px;
background-repeat:no-repeat;
}

.title-bar-controls button[aria-label=Close]{
background-image:url("https://raw.githubusercontent.com/jdan/98.css/main/icon/close.svg");
background-position:top 3px left 4px;
background-repeat:no-repeat;
margin-left:2px;
}

.windows-body {
margin: 8px;
}

    .globo {
      background-image: url(https://heemiiin.neocities.org/daybyday.png);
      background-size: contain;
      background-repeat: no-repeat;
      width: 120px;
      height: 120px;
      position: fixed;
      bottom: 150px;
      left: 150px;
    }

/* literally only part ive custom coded so it scrolls . i also like the effect the fieldset adds */
.fieldset {
border:1px gray solid;
box-shadow: white 1px 1px 0px inset, white 1px 1px 0px, white 0px 1px 0px, white 1px 0px 0px;
margin:0;
padding:10px;
overflow-y:auto; 
height: 190px;
}
            /* CSS for extras */

            #topBar {
                width: 100%;
                height: 24px;
                padding: 2px;
                font-size: smaller;
                background-color: #8CC0EB;
            }


            /* BELOW THIS POINT IS MEDIA QUERY */

            /* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */

            @media only screen and (max-width: 900px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
                }

                main {
                    order: 1;
                }

                #leftSidebar {
                    order: 2;
                }

                #rightSidebar {
                    order: 3;
                }

                #navbar ul {
                    flex-wrap: wrap;
                }
            }
        </style>


  </body>
</html>
<style>
  html,body{
      user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
  }
</style>
 <style>

 ::-webkit-scrollbar {
  width: 17px
}

::-webkit-scrollbar-corner {
  background: #dfdfdf
}

::-webkit-scrollbar-track:vertical {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 1' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eeede5' d='M0 0h1m15 0h1'/%3E%3Cpath stroke='%23f3f1ec' d='M1 0h1'/%3E%3Cpath stroke='%23f4f1ec' d='M2 0h1'/%3E%3Cpath stroke='%23f4f3ee' d='M3 0h1'/%3E%3Cpath stroke='%23f5f4ef' d='M4 0h1'/%3E%3Cpath stroke='%23f6f5f0' d='M5 0h1'/%3E%3Cpath stroke='%23f7f7f3' d='M6 0h1'/%3E%3Cpath stroke='%23f9f8f4' d='M7 0h1'/%3E%3Cpath stroke='%23f9f9f7' d='M8 0h1'/%3E%3Cpath stroke='%23fbfbf8' d='M9 0h1'/%3E%3Cpath stroke='%23fbfbf9' d='M10 0h2'/%3E%3Cpath stroke='%23fdfdfa' d='M12 0h1'/%3E%3Cpath stroke='%23fefefb' d='M13 0h3'/%3E%3C/svg%3E")
}

::-webkit-scrollbar-track:horizontal {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 1 17' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eeede5' d='M0 0h1M0 16h1'/%3E%3Cpath stroke='%23f3f1ec' d='M0 1h1'/%3E%3Cpath stroke='%23f4f1ec' d='M0 2h1'/%3E%3Cpath stroke='%23f4f3ee' d='M0 3h1'/%3E%3Cpath stroke='%23f5f4ef' d='M0 4h1'/%3E%3Cpath stroke='%23f6f5f0' d='M0 5h1'/%3E%3Cpath stroke='%23f7f7f3' d='M0 6h1'/%3E%3Cpath stroke='%23f9f8f4' d='M0 7h1'/%3E%3Cpath stroke='%23f9f9f7' d='M0 8h1'/%3E%3Cpath stroke='%23fbfbf8' d='M0 9h1'/%3E%3Cpath stroke='%23fbfbf9' d='M0 10h1m-1 1h1'/%3E%3Cpath stroke='%23fdfdfa' d='M0 12h1'/%3E%3Cpath stroke='%23fefefb' d='M0 13h1m-1 1h1m-1 1h1'/%3E%3C/svg%3E")
}

::-webkit-scrollbar-thumb {
  background-position: 50%;
  background-repeat: no-repeat;
  background-color: #c8d6fb;
  background-size: 7px;
  border: 1px solid #fff;
  border-radius: 2px;
  box-shadow: inset -3px 0 #bad1fc, inset 1px 1px #b7caf5
}

::-webkit-scrollbar-thumb:vertical {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 7 8' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eef4fe' d='M0 0h6M0 2h6M0 4h6M0 6h6'/%3E%3Cpath stroke='%23bad1fc' d='M6 0h1M6 2h1M6 4h1'/%3E%3Cpath stroke='%23c8d6fb' d='M0 1h1M0 3h1M0 5h1M0 7h1'/%3E%3Cpath stroke='%238cb0f8' d='M1 1h6M1 3h6M1 5h6M1 7h6'/%3E%3Cpath stroke='%23bad3fc' d='M6 6h1'/%3E%3C/svg%3E")
}

::-webkit-scrollbar-thumb:horizontal {
  background-size: 8px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 8 7' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eef4fe' d='M0 0h1m1 0h1m1 0h1m1 0h1M0 1h1m1 0h1m1 0h1m1 0h1M0 2h1m1 0h1m1 0h1m1 0h1M0 3h1m1 0h1m1 0h1m1 0h1M0 4h1m1 0h1m1 0h1m1 0h1M0 5h1m1 0h1m1 0h1m1 0h1'/%3E%3Cpath stroke='%23c8d6fb' d='M1 0h1m1 0h1m1 0h1m1 0h1'/%3E%3Cpath stroke='%238cb0f8' d='M1 1h1m1 0h1m1 0h1m1 0h1M1 2h1m1 0h1m1 0h1m1 0h1M1 3h1m1 0h1m1 0h1m1 0h1M1 4h1m1 0h1m1 0h1m1 0h1M1 5h1m1 0h1m1 0h1m1 0h1M1 6h1m1 0h1m1 0h1m1 0h1'/%3E%3Cpath stroke='%23bad1fc' d='M0 6h1m1 0h1'/%3E%3Cpath stroke='%23bad3fc' d='M4 6h1m1 0h1'/%3E%3C/svg%3E")
}

::-webkit-scrollbar-button:vertical:start {
  height: 17px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eeede5' d='M0 0h1m15 0h1M0 1h1M0 2h1M0 3h1M0 4h1M0 5h1M0 6h1M0 7h1M0 8h1M0 9h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m15 0h1M0 16h1m15 0h1'/%3E%3Cpath stroke='%23fdfdfa' d='M1 0h1'/%3E%3Cpath stroke='%23fff' d='M2 0h14M1 1h1m13 0h1M1 2h1m13 0h1M1 3h1m13 0h1M1 4h1m13 0h1M1 5h1m13 0h1M1 6h1m13 0h1M1 7h1m13 0h1M1 8h1m13 0h1M1 9h1m13 0h1M1 10h1m13 0h1M1 11h1m13 0h1M1 12h1m13 0h1M1 13h1m13 0h1M1 14h1m13 0h1M2 15h13'/%3E%3Cpath stroke='%23e6eefc' d='M2 1h1'/%3E%3Cpath stroke='%23d0dffc' d='M3 1h1M2 2h1'/%3E%3Cpath stroke='%23cad8f9' d='M4 1h1M2 3h1'/%3E%3Cpath stroke='%23c4d2f7' d='M5 1h1'/%3E%3Cpath stroke='%23c0d0f7' d='M6 1h1'/%3E%3Cpath stroke='%23bdcef7' d='M7 1h1M2 6h1'/%3E%3Cpath stroke='%23bbcdf5' d='M8 1h1'/%3E%3Cpath stroke='%23b8cbf6' d='M9 1h1M2 7h1'/%3E%3Cpath stroke='%23b7caf5' d='M10 1h1M2 8h1'/%3E%3Cpath stroke='%23b5c8f7' d='M11 1h1'/%3E%3Cpath stroke='%23b3c7f5' d='M12 1h1'/%3E%3Cpath stroke='%23afc5f4' d='M13 1h1'/%3E%3Cpath stroke='%23dce6f9' d='M14 1h1'/%3E%3Cpath stroke='%23dfe2e1' d='M16 1h1'/%3E%3Cpath stroke='%23e1eafe' d='M3 2h1'/%3E%3Cpath stroke='%23dae6fe' d='M4 2h1M3 3h1'/%3E%3Cpath stroke='%23d4e1fc' d='M5 2h1M3 4h1'/%3E%3Cpath stroke='%23d1e0fd' d='M6 2h1M4 4h1'/%3E%3Cpath stroke='%23d0ddfc' d='M7 2h1M3 5h1'/%3E%3Cpath stroke='%23cedbfd' d='M8 2h1M6 3h1'/%3E%3Cpath stroke='%23cad9fd' d='M9 2h1M7 3h1M5 5h1'/%3E%3Cpath stroke='%23c8d8fb' d='M10 2h1'/%3E%3Cpath stroke='%23c5d6fc' d='M11 2h1m-8 8h1m1 0h1'/%3E%3Cpath stroke='%23c2d3fc' d='M12 2h1m-2 1h1m-9 7h1m0 1h1'/%3E%3Cpath stroke='%23bccefa' d='M13 2h1m-1 2h1m-9 9h2'/%3E%3Cpath stroke='%23b9c9f3' d='M14 2h1M5 14h3'/%3E%3Cpath stroke='%23cfd7dd' d='M16 2h1'/%3E%3Cpath stroke='%23d8e3fc' d='M4 3h1'/%3E%3Cpath stroke='%23d1defd' d='M5 3h1'/%3E%3Cpath stroke='%23c9d8fc' d='M8 3h1M6 4h2M5 6h2M3 7h1'/%3E%3Cpath stroke='%23c5d5fc' d='M9 3h1M3 9h1m3 0h1'/%3E%3Cpath stroke='%23c5d3fc' d='M10 3h1'/%3E%3Cpath stroke='%23bed0fc' d='M12 3h1M9 4h1m-7 7h1m0 1h1'/%3E%3Cpath stroke='%23bccdfa' d='M13 3h1'/%3E%3Cpath stroke='%23baccf4' d='M14 3h1'/%3E%3Cpath stroke='%23bdcbda' d='M16 3h1'/%3E%3Cpath stroke='%23c4d4f7' d='M2 4h1'/%3E%3Cpath stroke='%23cddbfc' d='M5 4h1M3 6h1'/%3E%3Cpath stroke='%23c8d5fb' d='M8 4h1'/%3E%3Cpath stroke='%23bbcefd' d='M10 4h3M9 5h1'/%3E%3Cpath stroke='%23bcccf3' d='M14 4h1m-1 1h1m-1 1h1'/%3E%3Cpath stroke='%23b1c2d5' d='M16 4h1'/%3E%3Cpath stroke='%23bed0f8' d='M2 5h1'/%3E%3Cpath stroke='%23ceddfd' d='M4 5h1'/%3E%3Cpath stroke='%23c8d6fb' d='M6 5h2M3 8h2'/%3E%3Cpath stroke='%234d6185' d='M8 5h1M7 6h3M6 7h5M5 8h3m1 0h3M4 9h3m3 0h3m-8 1h1m5 0h1'/%3E%3Cpath stroke='%23bacdfc' d='M10 5h1m1 0h2M3 12h1'/%3E%3Cpath stroke='%23b9cdfb' d='M11 5h1m-2 1h1m1 0h2m-1 1h1'/%3E%3Cpath stroke='%23a8bbd4' d='M16 5h1'/%3E%3Cpath stroke='%23cddafc' d='M4 6h1'/%3E%3Cpath stroke='%23b7cdfc' d='M11 6h1m0 1h1'/%3E%3Cpath stroke='%23a4b8d3' d='M16 6h1'/%3E%3Cpath stroke='%23cad8fd' d='M4 7h2'/%3E%3Cpath stroke='%23b6cefb' d='M11 7h1m0 1h1'/%3E%3Cpath stroke='%23bacbf4' d='M14 7h1'/%3E%3Cpath stroke='%23a0b5d3' d='M16 7h1m-1 1h1m-1 5h1'/%3E%3Cpath stroke='%23c1d3fb' d='M8 8h1'/%3E%3Cpath stroke='%23b6cdfb' d='M13 8h1m-5 5h1'/%3E%3Cpath stroke='%23b9cbf3' d='M14 8h1'/%3E%3Cpath stroke='%23b4c8f6' d='M2 9h1'/%3E%3Cpath stroke='%23c2d5fc' d='M8 9h1m-1 1h1m-3 1h2'/%3E%3Cpath stroke='%23bdd3fb' d='M9 9h1m-2 3h1'/%3E%3Cpath stroke='%23b5cdfa' d='M13 9h1'/%3E%3Cpath stroke='%23b5c9f3' d='M14 9h1'/%3E%3Cpath stroke='%239fb5d2' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1'/%3E%3Cpath stroke='%23b1c7f6' d='M2 10h1'/%3E%3Cpath stroke='%23c3d5fd' d='M7 10h1'/%3E%3Cpath stroke='%23bad4fc' d='M9 10h1m-1 1h1'/%3E%3Cpath stroke='%23b2cffb' d='M10 10h1m1 0h1m-2 2h1'/%3E%3Cpath stroke='%23b1cbfa' d='M13 10h1'/%3E%3Cpath stroke='%23b3c8f5' d='M14 10h1m-6 4h2'/%3E%3Cpath stroke='%23adc3f6' d='M2 11h1'/%3E%3Cpath stroke='%23c3d3fd' d='M5 11h1'/%3E%3Cpath stroke='%23c1d5fb' d='M8 11h1'/%3E%3Cpath stroke='%23b7d3fc' d='M10 11h1m-2 1h1'/%3E%3Cpath stroke='%23b3d1fc' d='M11 11h1'/%3E%3Cpath stroke='%23afcefb' d='M12 11h1'/%3E%3Cpath stroke='%23aecafa' d='M13 11h1'/%3E%3Cpath stroke='%23b1c8f3' d='M14 11h1'/%3E%3Cpath stroke='%23acc2f5' d='M2 12h1'/%3E%3Cpath stroke='%23c1d2fb' d='M5 12h1'/%3E%3Cpath stroke='%23bed1fc' d='M6 12h2'/%3E%3Cpath stroke='%23b6d1fb' d='M10 12h1'/%3E%3Cpath stroke='%23afccfb' d='M12 12h1'/%3E%3Cpath stroke='%23adc9f9' d='M13 12h1m-2 1h1'/%3E%3Cpath stroke='%23b1c5f3' d='M14 12h1'/%3E%3Cpath stroke='%23aac0f3' d='M2 13h1'/%3E%3Cpath stroke='%23b7cbf9' d='M3 13h1'/%3E%3Cpath stroke='%23b9cefb' d='M4 13h1'/%3E%3Cpath stroke='%23bbcef9' d='M7 13h1'/%3E%3Cpath stroke='%23b9cffb' d='M8 13h1'/%3E%3Cpath stroke='%23b2cdfb' d='M10 13h1'/%3E%3Cpath stroke='%23b0cbf9' d='M11 13h1'/%3E%3Cpath stroke='%23aec8f7' d='M13 13h1'/%3E%3Cpath stroke='%23b0c5f2' d='M14 13h1'/%3E%3Cpath stroke='%23dbe3f8' d='M2 14h1'/%3E%3Cpath stroke='%23b7c6f1' d='M3 14h1'/%3E%3Cpath stroke='%23b8c9f2' d='M4 14h1m3 0h1'/%3E%3Cpath stroke='%23b2c8f4' d='M11 14h1'/%3E%3Cpath stroke='%23b1c6f3' d='M12 14h1'/%3E%3Cpath stroke='%23b0c4f2' d='M13 14h1'/%3E%3Cpath stroke='%23d9e3f6' d='M14 14h1'/%3E%3Cpath stroke='%23aec0d6' d='M16 14h1'/%3E%3Cpath stroke='%23c3d4e7' d='M1 15h1'/%3E%3Cpath stroke='%23aec4e5' d='M15 15h1'/%3E%3Cpath stroke='%23edf1f3' d='M1 16h1'/%3E%3Cpath stroke='%23aac0e1' d='M2 16h1'/%3E%3Cpath stroke='%2394b1d9' d='M3 16h1'/%3E%3Cpath stroke='%2388a7d8' d='M4 16h1'/%3E%3Cpath stroke='%2383a4d3' d='M5 16h1'/%3E%3Cpath stroke='%237da0d4' d='M6 16h1m3 0h3'/%3E%3Cpath stroke='%237e9fd2' d='M7 16h1'/%3E%3Cpath stroke='%237c9fd3' d='M8 16h2'/%3E%3Cpath stroke='%2382a4d6' d='M13 16h1'/%3E%3Cpath stroke='%2394b0dd' d='M14 16h1'/%3E%3Cpath stroke='%23ecf2f7' d='M15 16h1'/%3E%3C/svg%3E")
}

::-webkit-scrollbar-button:vertical:end {
  height: 17px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eeede5' d='M0 0h1m15 0h1M0 1h1M0 2h1M0 3h1M0 4h1M0 5h1M0 6h1M0 7h1M0 8h1M0 9h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m15 0h1M0 16h1m15 0h1'/%3E%3Cpath stroke='%23fdfdfa' d='M1 0h1'/%3E%3Cpath stroke='%23fff' d='M2 0h14M1 1h1m13 0h1M1 2h1m13 0h1M1 3h1m13 0h1M1 4h1m13 0h1M1 5h1m13 0h1M1 6h1m13 0h1M1 7h1m13 0h1M1 8h1m13 0h1M1 9h1m13 0h1M1 10h1m13 0h1M1 11h1m13 0h1M1 12h1m13 0h1M1 13h1m13 0h1M1 14h1m13 0h1M2 15h13'/%3E%3Cpath stroke='%23e6eefc' d='M2 1h1'/%3E%3Cpath stroke='%23d0dffc' d='M3 1h1M2 2h1'/%3E%3Cpath stroke='%23cad8f9' d='M4 1h1M2 3h1'/%3E%3Cpath stroke='%23c4d2f7' d='M5 1h1'/%3E%3Cpath stroke='%23c0d0f7' d='M6 1h1'/%3E%3Cpath stroke='%23bdcef7' d='M7 1h1M2 6h1'/%3E%3Cpath stroke='%23bbcdf5' d='M8 1h1'/%3E%3Cpath stroke='%23b8cbf6' d='M9 1h1M2 7h1'/%3E%3Cpath stroke='%23b7caf5' d='M10 1h1M2 8h1'/%3E%3Cpath stroke='%23b5c8f7' d='M11 1h1'/%3E%3Cpath stroke='%23b3c7f5' d='M12 1h1'/%3E%3Cpath stroke='%23afc5f4' d='M13 1h1'/%3E%3Cpath stroke='%23dce6f9' d='M14 1h1'/%3E%3Cpath stroke='%23dfe2e1' d='M16 1h1'/%3E%3Cpath stroke='%23e1eafe' d='M3 2h1'/%3E%3Cpath stroke='%23dae6fe' d='M4 2h1M3 3h1'/%3E%3Cpath stroke='%23d4e1fc' d='M5 2h1M3 4h1'/%3E%3Cpath stroke='%23d1e0fd' d='M6 2h1M4 4h1'/%3E%3Cpath stroke='%23d0ddfc' d='M7 2h1M3 5h1'/%3E%3Cpath stroke='%23cedbfd' d='M8 2h1M6 3h1'/%3E%3Cpath stroke='%23cad9fd' d='M9 2h1M7 3h1M5 5h1'/%3E%3Cpath stroke='%23c8d8fb' d='M10 2h1'/%3E%3Cpath stroke='%23c5d6fc' d='M11 2h1m-8 8h3'/%3E%3Cpath stroke='%23c2d3fc' d='M12 2h1m-2 1h1m-9 7h1m0 1h1'/%3E%3Cpath stroke='%23bccefa' d='M13 2h1m-1 2h1m-9 9h2'/%3E%3Cpath stroke='%23b9c9f3' d='M14 2h1M5 14h3'/%3E%3Cpath stroke='%23cfd7dd' d='M16 2h1'/%3E%3Cpath stroke='%23d8e3fc' d='M4 3h1'/%3E%3Cpath stroke='%23d1defd' d='M5 3h1'/%3E%3Cpath stroke='%23c9d8fc' d='M8 3h1M6 4h2M6 6h2M3 7h1'/%3E%3Cpath stroke='%23c5d5fc' d='M9 3h1M3 9h3'/%3E%3Cpath stroke='%23c5d3fc' d='M10 3h1'/%3E%3Cpath stroke='%23bed0fc' d='M12 3h1M9 4h1m-7 7h1m0 1h1'/%3E%3Cpath stroke='%23bccdfa' d='M13 3h1'/%3E%3Cpath stroke='%23baccf4' d='M14 3h1'/%3E%3Cpath stroke='%23bdcbda' d='M16 3h1'/%3E%3Cpath stroke='%23c4d4f7' d='M2 4h1'/%3E%3Cpath stroke='%23cddbfc' d='M5 4h1M3 6h1'/%3E%3Cpath stroke='%23c8d5fb' d='M8 4h1'/%3E%3Cpath stroke='%23bbcefd' d='M10 4h3M9 5h1M8 6h1'/%3E%3Cpath stroke='%23bcccf3' d='M14 4h1m-1 1h1m-1 1h1'/%3E%3Cpath stroke='%23b1c2d5' d='M16 4h1'/%3E%3Cpath stroke='%23bed0f8' d='M2 5h1'/%3E%3Cpath stroke='%23ceddfd' d='M4 5h1'/%3E%3Cpath stroke='%23c8d6fb' d='M6 5h3M3 8h2'/%3E%3Cpath stroke='%23bacdfc' d='M10 5h1m1 0h2M3 12h1'/%3E%3Cpath stroke='%23b9cdfb' d='M11 5h1M9 6h2m1 0h2m-1 1h1'/%3E%3Cpath stroke='%23a8bbd4' d='M16 5h1'/%3E%3Cpath stroke='%23cddafc' d='M4 6h1'/%3E%3Cpath stroke='%234d6185' d='M5 6h1m5 0h1M4 7h3m3 0h3M5 8h3m1 0h3M6 9h5m-4 1h3m-2 1h1'/%3E%3Cpath stroke='%23a4b8d3' d='M16 6h1'/%3E%3Cpath stroke='%23c1d3fb' d='M7 7h2M8 8h1'/%3E%3Cpath stroke='%23b6cefb' d='M9 7h1m2 1h1m-2 1h2'/%3E%3Cpath stroke='%23bacbf4' d='M14 7h1'/%3E%3Cpath stroke='%23a0b5d3' d='M16 7h1m-1 1h1m-1 5h1'/%3E%3Cpath stroke='%23b6cdfb' d='M13 8h1m-5 5h1'/%3E%3Cpath stroke='%23b9cbf3' d='M14 8h1'/%3E%3Cpath stroke='%23b4c8f6' d='M2 9h1'/%3E%3Cpath stroke='%23b5cdfa' d='M13 9h1'/%3E%3Cpath stroke='%23b5c9f3' d='M14 9h1'/%3E%3Cpath stroke='%239fb5d2' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1'/%3E%3Cpath stroke='%23b1c7f6' d='M2 10h1'/%3E%3Cpath stroke='%23b2cffb' d='M10 10h3m-2 2h1'/%3E%3Cpath stroke='%23b1cbfa' d='M13 10h1'/%3E%3Cpath stroke='%23b3c8f5' d='M14 10h1m-6 4h2'/%3E%3Cpath stroke='%23adc3f6' d='M2 11h1'/%3E%3Cpath stroke='%23c3d3fd' d='M5 11h1'/%3E%3Cpath stroke='%23c2d5fc' d='M6 11h2'/%3E%3Cpath stroke='%23bad4fc' d='M9 11h1'/%3E%3Cpath stroke='%23b7d3fc' d='M10 11h1m-2 1h1'/%3E%3Cpath stroke='%23b3d1fc' d='M11 11h1'/%3E%3Cpath stroke='%23afcefb' d='M12 11h1'/%3E%3Cpath stroke='%23aecafa' d='M13 11h1'/%3E%3Cpath stroke='%23b1c8f3' d='M14 11h1'/%3E%3Cpath stroke='%23acc2f5' d='M2 12h1'/%3E%3Cpath stroke='%23c1d2fb' d='M5 12h1'/%3E%3Cpath stroke='%23bed1fc' d='M6 12h2'/%3E%3Cpath stroke='%23bdd3fb' d='M8 12h1'/%3E%3Cpath stroke='%23b6d1fb' d='M10 12h1'/%3E%3Cpath stroke='%23afccfb' d='M12 12h1'/%3E%3Cpath stroke='%23adc9f9' d='M13 12h1m-2 1h1'/%3E%3Cpath stroke='%23b1c5f3' d='M14 12h1'/%3E%3Cpath stroke='%23aac0f3' d='M2 13h1'/%3E%3Cpath stroke='%23b7cbf9' d='M3 13h1'/%3E%3Cpath stroke='%23b9cefb' d='M4 13h1'/%3E%3Cpath stroke='%23bbcef9' d='M7 13h1'/%3E%3Cpath stroke='%23b9cffb' d='M8 13h1'/%3E%3Cpath stroke='%23b2cdfb' d='M10 13h1'/%3E%3Cpath stroke='%23b0cbf9' d='M11 13h1'/%3E%3Cpath stroke='%23aec8f7' d='M13 13h1'/%3E%3Cpath stroke='%23b0c5f2' d='M14 13h1'/%3E%3Cpath stroke='%23dbe3f8' d='M2 14h1'/%3E%3Cpath stroke='%23b7c6f1' d='M3 14h1'/%3E%3Cpath stroke='%23b8c9f2' d='M4 14h1m3 0h1'/%3E%3Cpath stroke='%23b2c8f4' d='M11 14h1'/%3E%3Cpath stroke='%23b1c6f3' d='M12 14h1'/%3E%3Cpath stroke='%23b0c4f2' d='M13 14h1'/%3E%3Cpath stroke='%23d9e3f6' d='M14 14h1'/%3E%3Cpath stroke='%23aec0d6' d='M16 14h1'/%3E%3Cpath stroke='%23c3d4e7' d='M1 15h1'/%3E%3Cpath stroke='%23aec4e5' d='M15 15h1'/%3E%3Cpath stroke='%23edf1f3' d='M1 16h1'/%3E%3Cpath stroke='%23aac0e1' d='M2 16h1'/%3E%3Cpath stroke='%2394b1d9' d='M3 16h1'/%3E%3Cpath stroke='%2388a7d8' d='M4 16h1'/%3E%3Cpath stroke='%2383a4d3' d='M5 16h1'/%3E%3Cpath stroke='%237da0d4' d='M6 16h1m3 0h3'/%3E%3Cpath stroke='%237e9fd2' d='M7 16h1'/%3E%3Cpath stroke='%237c9fd3' d='M8 16h2'/%3E%3Cpath stroke='%2382a4d6' d='M13 16h1'/%3E%3Cpath stroke='%2394b0dd' d='M14 16h1'/%3E%3Cpath stroke='%23ecf2f7' d='M15 16h1'/%3E%3C/svg%3E")
}

::-webkit-scrollbar-button:horizontal:start {
  width: 17px;}
    
  </style>
</body>
</html>
    
<html>
    <head>
        <title>Falling Sakura leaves</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <style>
            @-webkit-keyframes fall {
                0% {
                    opacity: 0.9;
                    top: 0
                }
                100% {
                    opacity: 0.2;
                    top: 100%
                }
            }

            @keyframes fall {
                0% {
                    opacity: 0.9;
                    top: 0
                }
                100% {
                    opacity: 0.2;
                    top: 100%
                }
            }

            @-webkit-keyframes blow-soft-left {
                0% {
                    margin-left: 0
                }
                100% {
                    margin-left: -50%
                }
            }

            @keyframes blow-soft-left {
                0% {
                    margin-left: 0
                }
                100% {
                    margin-left: -50%
                }
            }

            @-webkit-keyframes blow-medium-left {
                0% {
                    margin-left: 0
                }
                100% {
                    margin-left: -100%
                }
            }

            @keyframes blow-medium-left {
                0% {
                    margin-left: 0
                }
                100% {
                    margin-left: -100%
                }
            }

            @-webkit-keyframes blow-soft-right {
                0% {
                    margin-left: 0
                }
                100% {
                    margin-left: 50%
                }
            }

            @keyframes blow-soft-right {
                0% {
                    margin-left: 0
                }
                100% {
                    margin-left: 50%
                }
            }

            @-webkit-keyframes blow-medium-right {
                0% {
                    margin-left: 0
                }
                100% {
                    margin-left: 100%
                }
            }

            @keyframes blow-medium-right {
                0% {
                    margin-left: 0
                }
                100% {
                    margin-left: 100%
                }
            }

            @-webkit-keyframes sway-0 {
                0% {
                    -webkit-transform: rotate(-5deg)
                }
                40% {
                    -webkit-transform: rotate(28deg)
                }
                100% {
                    -webkit-transform: rotate(3deg)
                }
            }

            @keyframes sway-0 {
                0% {
                    -ms-transform: rotate(-5deg);
                    transform: rotate(-5deg)
                }
                40% {
                    -ms-transform: rotate(28deg);
                    transform: rotate(28deg)
                }
                100% {
                    -ms-transform: rotate(3deg);
                    transform: rotate(3deg)
                }
            }

            @-webkit-keyframes sway-1 {
                0% {
                    -webkit-transform: rotate(10deg)
                }
                40% {
                    -webkit-transform: rotate(43deg)
                }
                100% {
                    -webkit-transform: rotate(15deg)
                }
            }

            @keyframes sway-1 {
                0% {
                    -ms-transform: rotate(10deg);
                    transform: rotate(10deg)
                }
                40% {
                    -ms-transform: rotate(43deg);
                    transform: rotate(43deg)
                }
                100% {
                    -ms-transform: rotate(15deg);
                    transform: rotate(15deg)
                }
            }

            @-webkit-keyframes sway-2 {
                0% {
                    -webkit-transform: rotate(15deg)
                }
                40% {
                    -webkit-transform: rotate(56deg)
                }
                100% {
                    -webkit-transform: rotate(22deg)
                }
            }

            @keyframes sway-2 {
                0% {
                    -ms-transform: rotate(15deg);
                    transform: rotate(15deg)
                }
                40% {
                    -ms-transform: rotate(56deg);
                    transform: rotate(56deg)
                }
                100% {
                    -ms-transform: rotate(22deg);
                    transform: rotate(22deg)
                }
            }

            @-webkit-keyframes sway-3 {
                0% {
                    -webkit-transform: rotate(25deg)
                }
                40% {
                    -webkit-transform: rotate(74deg)
                }
                100% {
                    -webkit-transform: rotate(37deg)
                }
            }

            @keyframes sway-3 {
                0% {
                    -ms-transform: rotate(25deg);
                    transform: rotate(25deg)
                }
                40% {
                    -ms-transform: rotate(74deg);
                    transform: rotate(74deg)
                }
                100% {
                    -ms-transform: rotate(37deg);
                    transform: rotate(37deg)
                }
            }

            @-webkit-keyframes sway-4 {
                0% {
                    -webkit-transform: rotate(40deg)
                }
                40% {
                    -webkit-transform: rotate(68deg)
                }
                100% {
                    -webkit-transform: rotate(25deg)
                }
            }

            @keyframes sway-4 {
                0% {
                    -ms-transform: rotate(40deg);
                    transform: rotate(40deg)
                }
                40% {
                    -ms-transform: rotate(68deg);
                    transform: rotate(68deg)
                }
                100% {
                    -ms-transform: rotate(25deg);
                    transform: rotate(25deg)
                }
            }

            @-webkit-keyframes sway-5 {
                0% {
                    -webkit-transform: rotate(50deg)
                }
                40% {
                    -webkit-transform: rotate(78deg)
                }
                100% {
                    -webkit-transform: rotate(40deg)
                }
            }

            @keyframes sway-5 {
                0% {
                    -ms-transform: rotate(50deg);
                    transform: rotate(50deg)
                }
                40% {
                    -ms-transform: rotate(78deg);
                    transform: rotate(78deg)
                }
                100% {
                    -ms-transform: rotate(40deg);
                    transform: rotate(40deg)
                }
            }

            @-webkit-keyframes sway-6 {
                0% {
                    -webkit-transform: rotate(65deg)
                }
                40% {
                    -webkit-transform: rotate(92deg)
                }
                100% {
                    -webkit-transform: rotate(58deg)
                }
            }

            @keyframes sway-6 {
                0% {
                    -ms-transform: rotate(65deg);
                    transform: rotate(65deg)
                }
                40% {
                    -ms-transform: rotate(92deg);
                    transform: rotate(92deg)
                }
                100% {
                    -ms-transform: rotate(58deg);
                    transform: rotate(58deg)
                }
            }

            @-webkit-keyframes sway-7 {
                0% {
                    -webkit-transform: rotate(72deg)
                }
                40% {
                    -webkit-transform: rotate(118deg)
                }
                100% {
                    -webkit-transform: rotate(68deg)
                }
            }

            @keyframes sway-7 {
                0% {
                    -ms-transform: rotate(72deg);
                    transform: rotate(72deg)
                }
                40% {
                    -ms-transform: rotate(118deg);
                    transform: rotate(118deg)
                }
                100% {
                    -ms-transform: rotate(68deg);
                    transform: rotate(68deg)
                }
            }

            @-webkit-keyframes sway-8 {
                0% {
                    -webkit-transform: rotate(94deg)
                }
                40% {
                    -webkit-transform: rotate(136deg)
                }
                100% {
                    -webkit-transform: rotate(82deg)
                }
            }

            @keyframes sway-8 {
                0% {
                    -ms-transform: rotate(94deg);
                    transform: rotate(94deg)
                }
                40% {
                    -ms-transform: rotate(136deg);
                    transform: rotate(136deg)
                }
                100% {
                    -ms-transform: rotate(82deg);
                    transform: rotate(82deg)
                }
            }


            .sakura {
                background: -webkit-linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9));
                background: linear-gradient(120deg, rgba(255, 183, 197, 0.9), rgba(255, 197, 208, 0.9));
                pointer-events: none;
                position: absolute
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
            // Plugin code
            (function ($) {

                var lastTime    = 0;
                var vendors     = ['webkit', 'o', 'ms', 'moz', ''];
                var vendorCount = vendors.length;

                for (var x = 0; x < vendorCount && ! window.requestAnimationFrame; ++x) {
                    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
                    window.cancelAnimationFrame  = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
                }

                if ( ! window.requestAnimationFrame) {
                    window.requestAnimationFrame = function(callback) {
                        var currTime   = new Date().getTime();
                        var timeToCall = Math.max(0, 16 - (currTime - lastTime));

                        var id   = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
                        lastTime = currTime + timeToCall;

                        return id;
                    };
                }

                if ( ! window.cancelAnimationFrame) {
                    window.cancelAnimationFrame = function(id) {
                        clearTimeout(id);
                    };
                }

                $.fn.prefixedEvent = function(type, callback) {
                    for (var x = 0; x < vendorCount; ++x) {
                        if ( ! vendors[x]) {
                            type = type.toLowerCase();
                        }

                        el = (this instanceof jQuery ? this[0] : this);
                        el.addEventListener(vendors[x] + type, callback, false);
                    }

                    return this;
                };

                function elementInViewport(el) {

                    if (el instanceof jQuery) {
                        el = el[0];
                    }

                    var rect = el.getBoundingClientRect();

                    return (
                        rect.top >= 0 &&
                            rect.left >= 0 &&
                            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
                        );
                }

                function randomArrayElem(arr) {
                    return arr[Math.floor(Math.random() * arr.length)];
                }

                function randomInt(min, max) {
                    return Math.floor(Math.random() * (max - min + 1)) + min;
                }

                $.fn.sakura = function (event, options) {

                    var target = this.selector == "" ? $('body') : this;

                    var defaults = {
                        blowAnimations: ['blow-soft-left', 'blow-medium-left', 'blow-soft-right', 'blow-medium-right'],
                        className: 'sakura',
                        fallSpeed: 1,
                        maxSize: 14,
                        minSize: 10,
                        newOn: 300,
                        swayAnimations: ['sway-0', 'sway-1', 'sway-2', 'sway-3', 'sway-4', 'sway-5', 'sway-6', 'sway-7', 'sway-8']
                    };

                    var options = $.extend({}, defaults, options);

                    if (typeof event === 'undefined' || event === 'start') {

                        target.css({ 'overflow-x': 'hidden' });

                        var petalCreator = function () {
                            if (target.data('sakura-anim-id')) {
                                setTimeout(function () {
                                    requestAnimationFrame(petalCreator);
                                }, options.newOn);
                            }

                            var blowAnimation = randomArrayElem(options.blowAnimations);
                            var swayAnimation = randomArrayElem(options.swayAnimations);
                            var fallTime = ((document.documentElement.clientHeight * 0.007) + Math.round(Math.random() * 5)) * options.fallSpeed;

                            // Build animation
                            var animations =
                                'fall ' + fallTime + 's linear 0s 1' + ', ' +
                                    blowAnimation + ' ' + (((fallTime > 30 ? fallTime : 30) - 20) + randomInt(0, 20)) + 's linear 0s infinite' + ', ' +
                                    swayAnimation + ' ' + randomInt(2, 4) + 's linear 0s infinite';

                            var petal  = $('<div class="' + options.className + '" />');
                            var height = randomInt(options.minSize, options.maxSize);
                            var width  = height - Math.floor(randomInt(0, options.minSize) / 3);

                            petal.prefixedEvent('AnimationEnd', function () {
                                if ( ! elementInViewport(this)) {
                                    $(this).remove();
                                }
                            })
                            .prefixedEvent('AnimationIteration', function (ev) {
                                if (
                                    (
                                        $.inArray(ev.animationName, options.blowAnimations) != -1 ||
                                        $.inArray(ev.animationName, options.swayAnimations) != -1
                                    ) &&
                                    ! elementInViewport(this)
                                ) {
                                    $(this).remove();
                                }
                            })
                            .css({
                                '-webkit-animation': animations,
                                animation: animations,
                                'border-radius': randomInt(options.maxSize, (options.maxSize + Math.floor(Math.random() * 10))) + 'px ' + randomInt(1, Math.floor(width / 4)) + 'px',
                                height: height + 'px',
                                left: (Math.random() * document.documentElement.clientWidth - 100) + 'px',
                                'margin-top': (-(Math.floor(Math.random() * 20) + 15)) + 'px',
                                width: width + 'px'
                            });

                            target.append(petal);
                        };

                        target.data('sakura-anim-id', requestAnimationFrame(petalCreator));

                    }
                    else if (event === 'stop') {

                        var animId = target.data('sakura-anim-id');

                        if (animId) {
                            cancelAnimationFrame(animId);
                            target.data('sakura-anim-id', null);
                        }
                        setTimeout(function() {
                            $('.' + options.className).remove();
                        }, (options.newOn + 50));

                    }
                };
            }(jQuery));

            $(document).ready(function() {
                $('body').sakura();
            });
        </script>
    </body>
<link rel="stylesheet" href="https://cdn.cursors-4u.net/cursors/animated/cinnamoroll-nod-wink-750705ef-48.css">
<!-- End www.Cursors-4U.com Code -->
</html>