├── README.md ├── LICENSE ├── script.js ├── index.html └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Kodama - Japanese Tree Spirit 2 | 3 | I'm a big fan of Hayao Miyazaki and am looking forward to his next movie coming out in 2023. They say that imitation is the highest form of flattery, but my goal is to capture the spirit and tell a new story. 4 | 5 | This is created without any libraries using HTML, CSS, and a touch of JS for the smoke. 6 | 7 | If you like, you can fiddle around with the animation for free on CodePen: [Kodama with Family](https://codepen.io/WilliamStaudenmeier/pen/xxzjgwd). 8 | 9 | Thank you for visiting my page. 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 William Staudenmeier 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | number = 4 2 | function smoke() { 3 | var b = document.createElement('div') 4 | var size = (Math.random()*75) + 75 5 | var skew = Math.random()*50 6 | b.style.width = size +'px' 7 | b.style.height = size +'px' 8 | b.style.filter = 'blur(20px)' 9 | b.style.transform = Math.random() < .5 ? 'skew('+skew*(-1)+'deg)' : 'skew('+skew+'deg)' 10 | b.style.borderRadius = '50%' 11 | b.style.background = 'rgb(230, 255, 255)' 12 | b.style.opacity = '.1' 13 | b.style.position = 'absolute' 14 | b.style.top = '0px' 15 | b.style.left = Math.random()*(window.innerWidth - 75)-70 + 'px' 16 | b.style.animationDelay = Math.random()*10 + 's' 17 | b.style.animationDuration = (Math.random()*30) + 2 + 's' 18 | document.body.appendChild(b) 19 | } 20 | 21 | setTimeout(function() { 22 | for(var i=0;i { 31 | element.innerHTML = texts[i].text; 32 | 33 | setTimeout(work, (texts[i].delay * 3000)) 34 | 35 | i = (i < texts.length - 1) ? i + 1 : 0; 36 | } 37 | 38 | setTimeout(work, (delay * 1000)) 39 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CodePen - Kodama with Family 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | Kodama with Family https://codepen.io/WilliamStaudenmeier/pen/xxzjgwd 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | 36 |
37 |

38 | Typing SVG 39 |

40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |

48 |

49 |
50 |
51 |
52 | 53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 | 79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 | 88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 | 97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 | 106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 | 115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 | 124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 | 133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 | 150 |
151 | 152 | 153 | 154 | 155 | 156 | 157 | # studio ghibli 158 | # princess mononoke 159 | 160 | 161 | 162 | 163 | 164 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *, *:after, *:before { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, body {margin: 0; height: 100%; overflow: hidden} 6 | 7 | .firefly { 8 | position: fixed; 9 | left: 50%; 10 | top: 50%; 11 | width: 4vw; 12 | height: 4vw; 13 | margin: -0.2vw 0 0 9.8vw; 14 | animation: ease 200s alternate infinite; 15 | pointer-events: none; 16 | z-index:1000; 17 | } 18 | 19 | div { 20 | animation:b 10000000000s linear 100; 21 | } 22 | 23 | @keyframes b { 24 | 100% { bottom:50%; opacity:0; } 25 | } 26 | 27 | .kodama { 28 | buffer-top:24px; 29 | box-shadow:50%; 30 | display: flex; 31 | flex-direction: column-reverse; 32 | align-items: center; 33 | } 34 | 35 | .kodama .head { 36 | opacity:.8; 37 | margin-top:4px; 38 | width: 68px; 39 | height: 65px; 40 | background-image: linear-gradient(#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#fff,#7caead); 41 | transform: rotateZ(15deg); 42 | border-radius: 50% 50% 40% 70% / 50% 50% 60% 50%; 43 | 44 | -webkit-animation: rotation 8s 4s infinite; 45 | animation: rotation 8s 4s i nfinite; 46 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6) 47 | } 48 | .kodama .head:after { 49 | content: ""; 50 | width: 10px; 51 | height: 10px; 52 | background-color: #334; 53 | position: absolute; 54 | top: 25px; 55 | left: 10px; 56 | border-radius: 20px; 57 | } 58 | .kodama .head:before { 59 | content: ""; 60 | width: 7px; 61 | height: 7px; 62 | background-color: #334; 63 | position: absolute; 64 | top: 10px; 65 | right: 10px; 66 | border-radius: 20px; 67 | } 68 | .kodama .head .mouth { 69 | content: ""; 70 | width: 7px; 71 | height: 7px; 72 | background-color: #334; 73 | position: absolute; 74 | bottom: 10px; 75 | right: 10px; 76 | border-radius: 20px; 77 | } 78 | @-webkit-keyframes rotation { 79 | 0%, 40%, 42%, 44%, 46%, 48%, 50%, 52%, 54%, 56%, 58%, 60%, 62%, 64%, 66%, 68%, 70%, 72%, 74%, 76%, 78%, 80%, 82%, 84%, 86%, 88%, 90%, 100% { 80 | transform: rotateZ(15deg); 81 | 82 | } 83 | 39% { 84 | transform: rotateZ(-35deg); 85 | 86 | } 87 | 88 | 85% { 89 | transform: rotateZ(10deg); 90 | 91 | } 92 | 87% { 93 | transform: rotateZ(12deg); 94 | 95 | } 96 | 89% { 97 | transform: rotateZ(14deg); 98 | 99 | } 100 | } 101 | @keyframes rotation { 102 | 0%, 40%, 42%, 44%, 46%, 48%, 50%, 52%, 54%, 56%, 58%, 60%, 62%, 64%, 66%, 68%, 70%, 72%, 74%, 76%, 78%, 80%, 82%, 84%, 86%, 88%, 90%, 100% { 103 | transform: rotateZ(-95deg); 104 | 105 | } 106 | 39% { 107 | transform: rotateZ(-35deg); 108 | } 109 | 41% { 110 | transform: rotateZ(-34deg); 111 | } 112 | 43% { 113 | transform: rotateZ(-32deg); 114 | } 115 | 45% { 116 | transform: rotateZ(-30deg); 117 | } 118 | 47% { 119 | transform: rotateZ(-28deg); 120 | } 121 | 49% { 122 | transform: rotateZ(-26deg); 123 | } 124 | 125 | 59% { 126 | transform: rotateZ(-16deg); 127 | } 128 | 61% { 129 | transform: rotateZ(-14deg); 130 | } 131 | 63% { 132 | transform: rotateZ(-12deg); 133 | } 134 | 65% { 135 | transform: rotateZ(-10deg); 136 | } 137 | 67% { 138 | transform: rotateZ(-8deg); 139 | } 140 | 69% { 141 | transform: rotateZ(-6deg); 142 | } 143 | 71% { 144 | transform: rotateZ(-4deg); 145 | } 146 | 73% { 147 | transform: rotateZ(-2deg); 148 | } 149 | 150 | 89% { 151 | transform: rotateZ(14deg); 152 | } 153 | } 154 | .kodama .body { 155 | background-image: linear-gradient(#7caead,#fff,#7caead, transparent); 156 | opacity:.1; 157 | height: 35px; 158 | width: 20px; 159 | border-radius: 0 0 20px 20px; 160 | 161 | margin-top: -10px; 162 | z-index: 0; 163 | 164 | position: relative; 165 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 166 | } 167 | .kodama .body:after, .kodama .body:before { 168 | #opacity:.8; 169 | content: ""; 170 | height: 80%; 171 | width: 15px; 172 | background-image: linear-gradient(#7caead,#fff,#7caead); 173 | position: absolute; 174 | box-shadow: 0 0 5px 10px rgb(0, 51, 34,.5); 175 | #border: 2px solid #112; 176 | } 177 | .kodama .body:after { 178 | left: 85%; 179 | border-radius: 100% 100% 20px 20px; 180 | transform: rotateZ(-10deg); 181 | } 182 | .kodama .body:before { 183 | right: 85%; 184 | border-radius: 100% 100% 20px 20px; 185 | transform: rotateZ(10deg); 186 | } 187 | .kodama .body .legs { 188 | opacity:.8; 189 | position: absolute; 190 | top: 70%; 191 | left: 50%; 192 | transform: translateX(-50%); 193 | } 194 | .kodama .body .legs:after, .kodama .body .legs:before { 195 | box-shadow: 0 0 5px 10px rgb(0, 51, 34,.5); 196 | content: ""; 197 | height: 25px; 198 | width: 9px; 199 | background-image: linear-gradient(transparent,#7caead,#fff,#7caead, transparent); 200 | position: absolute; 201 | #border: 2px solid #112; 202 | } 203 | .kodama .body .legs:after { 204 | left: 90%; 205 | border-radius: 20px 20px 100% 100%; 206 | transform: rotateZ(1deg); 207 | } 208 | .kodama .body .legs:before { 209 | right: 90%; 210 | border-radius: 20px 20px 100% 100%; 211 | transform: rotateZ(-1deg); 212 | } 213 | 214 | 215 | .intro { 216 | top:2vh; 217 | right:10vh; 218 | color:rgb(238, 230, 255); 219 | font-family: Arial; 220 | font-size: 1.2em; 221 | } 222 | 223 | .dialog { 224 | top:2vh; 225 | right:10vh; 226 | color: transparent; 227 | font-family: Arial; 228 | font-size: 1.2em; 229 | } 230 | 231 | hr:not(.bomb) { 232 | width: 50px; 233 | border-color: transparent; 234 | #border-style: solid; 235 | border-right-color: rgb(0, 255, 204); 236 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 237 | border-right-width: 100px; 238 | opacity: .3; 239 | position: absolute; 240 | bottom: 100%; 241 | transform-origin: 100% 50%; 242 | animation-name: rain; 243 | animation-duration: 2s; 244 | animation-timing-function: linear; 245 | animation-iteration-count: 20; 246 | -webkit-animation: rainshadow 1s infinite; 247 | -webkit-animation-duration: 5s; 248 | } 249 | @-webkit-keyframes rainshadow { 250 | 251 | 100% {border-right-color: transparent;} 252 | 253 | } 254 | 255 | @-webkit-keyframes rotation2 { 256 | 0%, 40%, 42%, 44%, 46%, 48%, 50%, 52%, 54%, 56%, 58%, 60%, 62%, 64%, 66%, 68%, 70%, 72%, 74%, 76%, 78%, 80%, 82%, 84%, 86%, 88%, 90%, 100% { 257 | transform: rotateZ(15deg); 258 | } 259 | 39% { 260 | transform: rotateZ(-35deg); 261 | } 262 | 41% { 263 | transform: rotateZ(-34deg); 264 | } 265 | 43% { 266 | transform: rotateZ(-32deg); 267 | } 268 | 45% { 269 | transform: rotateZ(-30deg); 270 | } 271 | 47% { 272 | transform: rotateZ(-28deg); 273 | } 274 | 49% { 275 | transform: rotateZ(-26deg); 276 | } 277 | 51% { 278 | transform: rotateZ(-24deg); 279 | } 280 | 53% { 281 | transform: rotateZ(-22deg); 282 | } 283 | 55% { 284 | transform: rotateZ(-20deg); 285 | } 286 | 57% { 287 | transform: rotateZ(-18deg); 288 | } 289 | 59% { 290 | transform: rotateZ(-16deg); 291 | } 292 | 61% { 293 | transform: rotateZ(-14deg); 294 | } 295 | 63% { 296 | transform: rotateZ(-12deg); 297 | } 298 | 65% { 299 | transform: rotateZ(-10deg); 300 | } 301 | 67% { 302 | transform: rotateZ(-8deg); 303 | } 304 | 69% { 305 | transform: rotateZ(-6deg); 306 | } 307 | 71% { 308 | transform: rotateZ(-4deg); 309 | } 310 | 73% { 311 | transform: rotateZ(-2deg); 312 | } 313 | 75% { 314 | transform: rotateZ(0deg); 315 | } 316 | 77% { 317 | transform: rotateZ(2deg); 318 | } 319 | 79% { 320 | transform: rotateZ(4deg); 321 | } 322 | 81% { 323 | transform: rotateZ(6deg); 324 | } 325 | 83% { 326 | transform: rotateZ(8deg); 327 | } 328 | 85% { 329 | transform: rotateZ(10deg); 330 | } 331 | 87% { 332 | transform: rotateZ(12deg); 333 | } 334 | 89% { 335 | transform: rotateZ(14deg); 336 | } 337 | } 338 | @keyframes rotation2 { 339 | 0%, 40%, 42%, 44%, 46%, 48%, 50%, 52%, 54%, 56%, 58%, 60%, 62%, 64%, 66%, 68%, 70%, 72%, 74%, 76%, 78%, 80%, 82%, 84%, 86%, 88%, 90%, 100% { 340 | transform: rotateZ(15deg); 341 | } 342 | 39% { 343 | transform: rotateZ(-35deg); 344 | } 345 | 41% { 346 | transform: rotateZ(-34deg); 347 | } 348 | 43% { 349 | transform: rotateZ(-32deg); 350 | } 351 | 45% { 352 | transform: rotateZ(-30deg); 353 | } 354 | 47% { 355 | transform: rotateZ(-28deg); 356 | } 357 | 49% { 358 | transform: rotateZ(-26deg); 359 | } 360 | 51% { 361 | transform: rotateZ(-24deg); 362 | } 363 | 53% { 364 | transform: rotateZ(-22deg); 365 | } 366 | 55% { 367 | transform: rotateZ(-20deg); 368 | } 369 | 57% { 370 | transform: rotateZ(-18deg); 371 | } 372 | 59% { 373 | transform: rotateZ(-16deg); 374 | } 375 | 61% { 376 | transform: rotateZ(-14deg); 377 | } 378 | 63% { 379 | transform: rotateZ(-12deg); 380 | } 381 | 65% { 382 | transform: rotateZ(-10deg); 383 | } 384 | 67% { 385 | transform: rotateZ(-8deg); 386 | } 387 | 69% { 388 | transform: rotateZ(-6deg); 389 | } 390 | 71% { 391 | transform: rotateZ(-4deg); 392 | } 393 | 73% { 394 | transform: rotateZ(-2deg); 395 | } 396 | 75% { 397 | transform: rotateZ(0deg); 398 | } 399 | 77% { 400 | transform: rotateZ(2deg); 401 | } 402 | 79% { 403 | transform: rotateZ(4deg); 404 | } 405 | 81% { 406 | transform: rotateZ(6deg); 407 | } 408 | 83% { 409 | transform: rotateZ(8deg); 410 | } 411 | 85% { 412 | transform: rotateZ(10deg); 413 | } 414 | 87% { 415 | transform: rotateZ(12deg); 416 | } 417 | 89% { 418 | transform: rotateZ(14deg); 419 | } 420 | } 421 | 422 | @keyframes rain { 423 | from { 424 | transform: rotate(95deg) translateX(0); 425 | } 426 | to { 427 | transform: rotate(50deg) translateX(calc(100vh + 20px)); 428 | } 429 | to { 430 | transform: rotate(95deg) translateX(calc(100vh + 20px)); 431 | } 432 | } 433 | 434 | .firefly::before, .firefly::after { 435 | content: ""; 436 | position: absolute; 437 | width: 100%; 438 | height: 100%; 439 | border-radius: 50%; 440 | transform-origin: -10vw; 441 | } 442 | .firefly::before { 443 | background: transparent; 444 | opacity: 0.1; 445 | animation: drift ease alternate infinite; 446 | } 447 | .firefly::after { 448 | background: white; 449 | opacity: 0; 450 | box-shadow: 0 0 0vw 0vw blue; 451 | animation: drift ease alternate infinite, flash ease infinite; 452 | } 453 | 454 | .firefly:nth-child(1) { 455 | animation-name: move1; 456 | } 457 | .firefly:nth-child(1)::before { 458 | animation-duration: 15s; 459 | } 460 | .firefly:nth-child(1)::after { 461 | animation-duration: 15s, 10452ms; 462 | animation-delay: 0ms, 2217ms; 463 | } 464 | 465 | @keyframes move1 { 466 | 0% { 467 | transform: translateX(14vw) translateY(38vh) scale(0.55); 468 | } 469 | 5.8823529412% { 470 | transform: translateX(49vw) translateY(-6vh) scale(0.29); 471 | } 472 | 11.7647058824% { 473 | transform: translateX(24vw) translateY(-36vh) scale(0.4); 474 | } 475 | 17.6470588235% { 476 | transform: translateX(-12vw) translateY(23vh) scale(0.92); 477 | } 478 | 23.5294117647% { 479 | transform: translateX(-13vw) translateY(49vh) scale(0.98); 480 | } 481 | 29.4117647059% { 482 | transform: translateX(-13vw) translateY(-36vh) scale(0.59); 483 | } 484 | 35.2941176471% { 485 | transform: translateX(-29vw) translateY(13vh) scale(0.5); 486 | } 487 | 41.1764705882% { 488 | transform: translateX(-42vw) translateY(-6vh) scale(0.85); 489 | } 490 | 47.0588235294% { 491 | transform: translateX(-12vw) translateY(5vh) scale(0.65); 492 | } 493 | 52.9411764706% { 494 | transform: translateX(47vw) translateY(22vh) scale(0.93); 495 | } 496 | 58.8235294118% { 497 | transform: translateX(-12vw) translateY(33vh) scale(1); 498 | } 499 | 64.7058823529% { 500 | transform: translateX(-37vw) translateY(-25vh) scale(0.66); 501 | } 502 | 70.5882352941% { 503 | transform: translateX(-9vw) translateY(17vh) scale(0.84); 504 | } 505 | 76.4705882353% { 506 | transform: translateX(34vw) translateY(15vh) scale(0.29); 507 | } 508 | 82.3529411765% { 509 | transform: translateX(-11vw) translateY(-15vh) scale(0.86); 510 | } 511 | 88.2352941176% { 512 | transform: translateX(-35vw) translateY(30vh) scale(0.94); 513 | } 514 | 94.1176470588% { 515 | transform: translateX(22vw) translateY(-1vh) scale(0.51); 516 | } 517 | 100% { 518 | transform: translateX(-19vw) translateY(6vh) scale(0.9); 519 | } 520 | } 521 | .firefly:nth-child(2) { 522 | animation-name: move2; 523 | } 524 | .firefly:nth-child(2)::before { 525 | animation-duration: 14s; 526 | } 527 | .firefly:nth-child(2)::after { 528 | animation-duration: 14s, 5687ms; 529 | animation-delay: 0ms, 7606ms; 530 | } 531 | 532 | @keyframes move2 { 533 | 0% { 534 | transform: translateX(-49vw) translateY(45vh) scale(0.26); 535 | } 536 | 5% { 537 | transform: translateX(23vw) translateY(-8vh) scale(0.96); 538 | } 539 | 10% { 540 | transform: translateX(-34vw) translateY(-40vh) scale(0.57); 541 | } 542 | 15% { 543 | transform: translateX(23vw) translateY(20vh) scale(0.4); 544 | } 545 | 20% { 546 | transform: translateX(-31vw) translateY(31vh) scale(0.84); 547 | } 548 | 25% { 549 | transform: translateX(18vw) translateY(-39vh) scale(0.42); 550 | } 551 | 30% { 552 | transform: translateX(-43vw) translateY(45vh) scale(0.68); 553 | } 554 | 35% { 555 | transform: translateX(-41vw) translateY(50vh) scale(0.5); 556 | } 557 | 40% { 558 | transform: translateX(19vw) translateY(19vh) scale(0.95); 559 | } 560 | 45% { 561 | transform: translateX(-33vw) translateY(43vh) scale(0.66); 562 | } 563 | 50% { 564 | transform: translateX(24vw) translateY(-20vh) scale(0.57); 565 | } 566 | 55% { 567 | transform: translateX(18vw) translateY(-42vh) scale(0.83); 568 | } 569 | 60% { 570 | transform: translateX(25vw) translateY(32vh) scale(1); 571 | } 572 | 65% { 573 | transform: translateX(11vw) translateY(15vh) scale(0.33); 574 | } 575 | 70% { 576 | transform: translateX(-12vw) translateY(-23vh) scale(0.63); 577 | } 578 | 75% { 579 | transform: translateX(49vw) translateY(37vh) scale(0.51); 580 | } 581 | 80% { 582 | transform: translateX(-11vw) translateY(-10vh) scale(0.77); 583 | } 584 | 85% { 585 | transform: translateX(-25vw) translateY(-5vh) scale(0.42); 586 | } 587 | 90% { 588 | transform: translateX(-32vw) translateY(2vh) scale(0.96); 589 | } 590 | 95% { 591 | transform: translateX(45vw) translateY(-30vh) scale(0.3); 592 | } 593 | 100% { 594 | transform: translateX(8vw) translateY(-41vh) scale(0.52); 595 | } 596 | } 597 | .firefly:nth-child(3) { 598 | animation-name: move3; 599 | } 600 | .firefly:nth-child(3)::before { 601 | animation-duration: 10s; 602 | } 603 | .firefly:nth-child(3)::after { 604 | animation-duration: 10s, 10797ms; 605 | animation-delay: 0ms, 2193ms; 606 | } 607 | 608 | @keyframes move3 { 609 | 0% { 610 | transform: translateX(23vw) translateY(44vh) scale(0.59); 611 | } 612 | 3.8461538462% { 613 | transform: translateX(-48vw) translateY(31vh) scale(0.31); 614 | } 615 | 7.6923076923% { 616 | transform: translateX(-2vw) translateY(-15vh) scale(0.41); 617 | } 618 | 11.5384615385% { 619 | transform: translateX(0vw) translateY(-17vh) scale(0.98); 620 | } 621 | 15.3846153846% { 622 | transform: translateX(48vw) translateY(0vh) scale(0.81); 623 | } 624 | 19.2307692308% { 625 | transform: translateX(21vw) translateY(-13vh) scale(0.79); 626 | } 627 | 23.0769230769% { 628 | transform: translateX(-2vw) translateY(-44vh) scale(0.58); 629 | } 630 | 26.9230769231% { 631 | transform: translateX(-3vw) translateY(33vh) scale(0.75); 632 | } 633 | 30.7692307692% { 634 | transform: translateX(6vw) translateY(-6vh) scale(0.84); 635 | } 636 | 34.6153846154% { 637 | transform: translateX(-17vw) translateY(39vh) scale(0.86); 638 | } 639 | 38.4615384615% { 640 | transform: translateX(1vw) translateY(3vh) scale(0.62); 641 | } 642 | 42.3076923077% { 643 | transform: translateX(-6vw) translateY(48vh) scale(0.5); 644 | } 645 | 46.1538461538% { 646 | transform: translateX(43vw) translateY(30vh) scale(0.82); 647 | } 648 | 50% { 649 | transform: translateX(14vw) translateY(32vh) scale(0.46); 650 | } 651 | 53.8461538462% { 652 | transform: translateX(-24vw) translateY(11vh) scale(0.33); 653 | } 654 | 57.6923076923% { 655 | transform: translateX(6vw) translateY(5vh) scale(0.35); 656 | } 657 | 61.5384615385% { 658 | transform: translateX(26vw) translateY(42vh) scale(0.69); 659 | } 660 | 65.3846153846% { 661 | transform: translateX(33vw) translateY(-29vh) scale(0.94); 662 | } 663 | 69.2307692308% { 664 | transform: translateX(46vw) translateY(-32vh) scale(0.8); 665 | } 666 | 73.0769230769% { 667 | transform: translateX(-35vw) translateY(45vh) scale(0.7); 668 | } 669 | 76.9230769231% { 670 | transform: translateX(-27vw) translateY(4vh) scale(0.52); 671 | } 672 | 80.7692307692% { 673 | transform: translateX(-35vw) translateY(41vh) scale(0.78); 674 | } 675 | 84.6153846154% { 676 | transform: translateX(-31vw) translateY(-37vh) scale(0.34); 677 | } 678 | 88.4615384615% { 679 | transform: translateX(-35vw) translateY(9vh) scale(0.34); 680 | } 681 | 92.3076923077% { 682 | transform: translateX(-23vw) translateY(26vh) scale(0.82); 683 | } 684 | 96.1538461538% { 685 | transform: translateX(-35vw) translateY(-18vh) scale(0.29); 686 | } 687 | 100% { 688 | transform: translateX(23vw) translateY(50vh) scale(0.39); 689 | } 690 | } 691 | .firefly:nth-child(4) { 692 | animation-name: move4; 693 | } 694 | .firefly:nth-child(4)::before { 695 | animation-duration: 14s; 696 | } 697 | .firefly:nth-child(4)::after { 698 | animation-duration: 14s, 9436ms; 699 | animation-delay: 0ms, 1078ms; 700 | } 701 | 702 | @keyframes move4 { 703 | 0% { 704 | transform: translateX(-15vw) translateY(16vh) scale(0.4); 705 | } 706 | 5% { 707 | transform: translateX(-20vw) translateY(44vh) scale(0.31); 708 | } 709 | 10% { 710 | transform: translateX(-40vw) translateY(-14vh) scale(0.48); 711 | } 712 | 15% { 713 | transform: translateX(30vw) translateY(-13vh) scale(0.72); 714 | } 715 | 20% { 716 | transform: translateX(31vw) translateY(-38vh) scale(0.27); 717 | } 718 | 25% { 719 | transform: translateX(-45vw) translateY(-1vh) scale(0.72); 720 | } 721 | 30% { 722 | transform: translateX(-39vw) translateY(-42vh) scale(0.92); 723 | } 724 | 35% { 725 | transform: translateX(17vw) translateY(-24vh) scale(0.85); 726 | } 727 | 40% { 728 | transform: translateX(2vw) translateY(8vh) scale(0.47); 729 | } 730 | 45% { 731 | transform: translateX(29vw) translateY(50vh) scale(0.32); 732 | } 733 | 50% { 734 | transform: translateX(-24vw) translateY(-46vh) scale(0.32); 735 | } 736 | 55% { 737 | transform: translateX(-19vw) translateY(44vh) scale(0.65); 738 | } 739 | 60% { 740 | transform: translateX(35vw) translateY(-6vh) scale(0.98); 741 | } 742 | 65% { 743 | transform: translateX(40vw) translateY(-25vh) scale(0.85); 744 | } 745 | 70% { 746 | transform: translateX(-46vw) translateY(7vh) scale(0.38); 747 | } 748 | 75% { 749 | transform: translateX(48vw) translateY(-8vh) scale(0.74); 750 | } 751 | 80% { 752 | transform: translateX(42vw) translateY(36vh) scale(0.41); 753 | } 754 | 85% { 755 | transform: translateX(15vw) translateY(-33vh) scale(0.9); 756 | } 757 | 90% { 758 | transform: translateX(-10vw) translateY(-18vh) scale(0.6); 759 | } 760 | 95% { 761 | transform: translateX(47vw) translateY(9vh) scale(0.55); 762 | } 763 | 100% { 764 | transform: translateX(1vw) translateY(-28vh) scale(0.33); 765 | } 766 | } 767 | .firefly:nth-child(5) { 768 | animation-name: move5; 769 | } 770 | .firefly:nth-child(5)::before { 771 | animation-duration: 11s; 772 | } 773 | .firefly:nth-child(5)::after { 774 | animation-duration: 11s, 5316ms; 775 | animation-delay: 0ms, 3010ms; 776 | } 777 | 778 | @keyframes move5 { 779 | 0% { 780 | transform: translateX(41vw) translateY(-19vh) scale(0.72); 781 | } 782 | 4.7619047619% { 783 | transform: translateX(13vw) translateY(20vh) scale(0.73); 784 | } 785 | 9.5238095238% { 786 | transform: translateX(-35vw) translateY(-40vh) scale(0.33); 787 | } 788 | 14.2857142857% { 789 | transform: translateX(-4vw) translateY(-47vh) scale(0.55); 790 | } 791 | 19.0476190476% { 792 | transform: translateX(8vw) translateY(-18vh) scale(0.56); 793 | } 794 | 23.8095238095% { 795 | transform: translateX(42vw) translateY(-15vh) scale(0.94); 796 | } 797 | 28.5714285714% { 798 | transform: translateX(-30vw) translateY(20vh) scale(0.42); 799 | } 800 | 33.3333333333% { 801 | transform: translateX(10vw) translateY(-21vh) scale(0.8); 802 | } 803 | 38.0952380952% { 804 | transform: translateX(-27vw) translateY(50vh) scale(0.95); 805 | } 806 | 42.8571428571% { 807 | transform: translateX(-37vw) translateY(-17vh) scale(0.26); 808 | } 809 | 47.619047619% { 810 | transform: translateX(-39vw) translateY(-45vh) scale(0.73); 811 | } 812 | 52.380952381% { 813 | transform: translateX(-19vw) translateY(46vh) scale(0.54); 814 | } 815 | 57.1428571429% { 816 | transform: translateX(-11vw) translateY(14vh) scale(0.29); 817 | } 818 | 61.9047619048% { 819 | transform: translateX(36vw) translateY(-11vh) scale(0.6); 820 | } 821 | 66.6666666667% { 822 | transform: translateX(-18vw) translateY(27vh) scale(0.49); 823 | } 824 | 71.4285714286% { 825 | transform: translateX(-31vw) translateY(-23vh) scale(0.49); 826 | } 827 | 76.1904761905% { 828 | transform: translateX(19vw) translateY(-20vh) scale(0.41); 829 | } 830 | 80.9523809524% { 831 | transform: translateX(-49vw) translateY(39vh) scale(0.92); 832 | } 833 | 85.7142857143% { 834 | transform: translateX(47vw) translateY(-40vh) scale(0.29); 835 | } 836 | 90.4761904762% { 837 | transform: translateX(13vw) translateY(41vh) scale(0.37); 838 | } 839 | 95.2380952381% { 840 | transform: translateX(13vw) translateY(50vh) scale(0.67); 841 | } 842 | 100% { 843 | transform: translateX(-6vw) translateY(-25vh) scale(0.27); 844 | } 845 | } 846 | .firefly:nth-child(6) { 847 | animation-name: move6; 848 | } 849 | .firefly:nth-child(6)::before { 850 | animation-duration: 9s; 851 | } 852 | .firefly:nth-child(6)::after { 853 | animation-duration: 9s, 6543ms; 854 | animation-delay: 0ms, 4421ms; 855 | } 856 | 857 | @keyframes move6 { 858 | 0% { 859 | transform: translateX(-15vw) translateY(-14vh) scale(0.74); 860 | } 861 | 4.1666666667% { 862 | transform: translateX(13vw) translateY(-44vh) scale(0.69); 863 | } 864 | 8.3333333333% { 865 | transform: translateX(-15vw) translateY(44vh) scale(0.7); 866 | } 867 | 12.5% { 868 | transform: translateX(8vw) translateY(-45vh) scale(0.88); 869 | } 870 | 16.6666666667% { 871 | transform: translateX(-36vw) translateY(-5vh) scale(0.66); 872 | } 873 | 20.8333333333% { 874 | transform: translateX(26vw) translateY(-9vh) scale(0.51); 875 | } 876 | 25% { 877 | transform: translateX(35vw) translateY(21vh) scale(0.83); 878 | } 879 | 29.1666666667% { 880 | transform: translateX(-23vw) translateY(-3vh) scale(0.63); 881 | } 882 | 33.3333333333% { 883 | transform: translateX(42vw) translateY(11vh) scale(0.82); 884 | } 885 | 37.5% { 886 | transform: translateX(14vw) translateY(47vh) scale(0.29); 887 | } 888 | 41.6666666667% { 889 | transform: translateX(-15vw) translateY(-28vh) scale(0.29); 890 | } 891 | 45.8333333333% { 892 | transform: translateX(43vw) translateY(-14vh) scale(0.29); 893 | } 894 | 50% { 895 | transform: translateX(41vw) translateY(18vh) scale(0.9); 896 | } 897 | 54.1666666667% { 898 | transform: translateX(42vw) translateY(33vh) scale(0.75); 899 | } 900 | 58.3333333333% { 901 | transform: translateX(-45vw) translateY(49vh) scale(0.77); 902 | } 903 | 62.5% { 904 | transform: translateX(45vw) translateY(7vh) scale(0.49); 905 | } 906 | 66.6666666667% { 907 | transform: translateX(-43vw) translateY(-30vh) scale(0.63); 908 | } 909 | 70.8333333333% { 910 | transform: translateX(4vw) translateY(-18vh) scale(0.78); 911 | } 912 | 75% { 913 | transform: translateX(-43vw) translateY(-8vh) scale(0.6); 914 | } 915 | 79.1666666667% { 916 | transform: translateX(3vw) translateY(41vh) scale(0.94); 917 | } 918 | 83.3333333333% { 919 | transform: translateX(27vw) translateY(29vh) scale(0.73); 920 | } 921 | 87.5% { 922 | transform: translateX(-47vw) translateY(-31vh) scale(0.5); 923 | } 924 | 91.6666666667% { 925 | transform: translateX(48vw) translateY(4vh) scale(0.37); 926 | } 927 | 95.8333333333% { 928 | transform: translateX(-21vw) translateY(33vh) scale(0.34); 929 | } 930 | 100% { 931 | transform: translateX(8vw) translateY(23vh) scale(0.72); 932 | } 933 | } 934 | .firefly:nth-child(7) { 935 | animation-name: move7; 936 | } 937 | .firefly:nth-child(7)::before { 938 | animation-duration: 13s; 939 | } 940 | .firefly:nth-child(7)::after { 941 | animation-duration: 13s, 7135ms; 942 | animation-delay: 0ms, 1608ms; 943 | } 944 | 945 | @keyframes move7 { 946 | 0% { 947 | transform: translateX(33vw) translateY(-36vh) scale(0.95); 948 | } 949 | 4.347826087% { 950 | transform: translateX(-19vw) translateY(-45vh) scale(0.63); 951 | } 952 | 8.6956521739% { 953 | transform: translateX(15vw) translateY(30vh) scale(0.69); 954 | } 955 | 13.0434782609% { 956 | transform: translateX(-12vw) translateY(-31vh) scale(0.52); 957 | } 958 | 17.3913043478% { 959 | transform: translateX(-27vw) translateY(13vh) scale(0.59); 960 | } 961 | 21.7391304348% { 962 | transform: translateX(9vw) translateY(1vh) scale(0.57); 963 | } 964 | 26.0869565217% { 965 | transform: translateX(-5vw) translateY(-36vh) scale(0.94); 966 | } 967 | 30.4347826087% { 968 | transform: translateX(9vw) translateY(24vh) scale(0.99); 969 | } 970 | 34.7826086957% { 971 | transform: translateX(11vw) translateY(34vh) scale(0.33); 972 | } 973 | 39.1304347826% { 974 | transform: translateX(19vw) translateY(-5vh) scale(0.85); 975 | } 976 | 43.4782608696% { 977 | transform: translateX(-22vw) translateY(-1vh) scale(0.47); 978 | } 979 | 47.8260869565% { 980 | transform: translateX(39vw) translateY(-46vh) scale(0.7); 981 | } 982 | 52.1739130435% { 983 | transform: translateX(-31vw) translateY(42vh) scale(0.63); 984 | } 985 | 56.5217391304% { 986 | transform: translateX(-20vw) translateY(10vh) scale(0.58); 987 | } 988 | 60.8695652174% { 989 | transform: translateX(-46vw) translateY(45vh) scale(0.95); 990 | } 991 | 65.2173913043% { 992 | transform: translateX(-17vw) translateY(-34vh) scale(0.98); 993 | } 994 | 69.5652173913% { 995 | transform: translateX(-5vw) translateY(33vh) scale(0.51); 996 | } 997 | 73.9130434783% { 998 | transform: translateX(30vw) translateY(2vh) scale(0.72); 999 | } 1000 | 78.2608695652% { 1001 | transform: translateX(5vw) translateY(-17vh) scale(0.73); 1002 | } 1003 | 82.6086956522% { 1004 | transform: translateX(6vw) translateY(39vh) scale(0.53); 1005 | } 1006 | 86.9565217391% { 1007 | transform: translateX(50vw) translateY(-40vh) scale(0.8); 1008 | } 1009 | 91.3043478261% { 1010 | transform: translateX(-35vw) translateY(12vh) scale(1); 1011 | } 1012 | 95.652173913% { 1013 | transform: translateX(40vw) translateY(-31vh) scale(0.44); 1014 | } 1015 | 100% { 1016 | transform: translateX(26vw) translateY(-4vh) scale(0.87); 1017 | } 1018 | } 1019 | .firefly:nth-child(8) { 1020 | animation-name: move8; 1021 | } 1022 | .firefly:nth-child(8)::before { 1023 | animation-duration: 10s; 1024 | } 1025 | .firefly:nth-child(8)::after { 1026 | animation-duration: 10s, 6493ms; 1027 | animation-delay: 0ms, 6096ms; 1028 | } 1029 | 1030 | @keyframes move8 { 1031 | 0% { 1032 | transform: translateX(0vw) translateY(-7vh) scale(0.97); 1033 | } 1034 | 5% { 1035 | transform: translateX(42vw) translateY(46vh) scale(0.74); 1036 | } 1037 | 10% { 1038 | transform: translateX(48vw) translateY(-22vh) scale(0.59); 1039 | } 1040 | 15% { 1041 | transform: translateX(-5vw) translateY(31vh) scale(0.74); 1042 | } 1043 | 20% { 1044 | transform: translateX(28vw) translateY(16vh) scale(0.3); 1045 | } 1046 | 25% { 1047 | transform: translateX(-11vw) translateY(-38vh) scale(0.35); 1048 | } 1049 | 30% { 1050 | transform: translateX(-48vw) translateY(1vh) scale(0.35); 1051 | } 1052 | 35% { 1053 | transform: translateX(-15vw) translateY(-11vh) scale(0.51); 1054 | } 1055 | 40% { 1056 | transform: translateX(-41vw) translateY(-12vh) scale(0.82); 1057 | } 1058 | 45% { 1059 | transform: translateX(-3vw) translateY(15vh) scale(0.5); 1060 | } 1061 | 50% { 1062 | transform: translateX(42vw) translateY(20vh) scale(0.78); 1063 | } 1064 | 55% { 1065 | transform: translateX(-36vw) translateY(-22vh) scale(0.97); 1066 | } 1067 | 60% { 1068 | transform: translateX(28vw) translateY(-32vh) scale(0.43); 1069 | } 1070 | 65% { 1071 | transform: translateX(12vw) translateY(-28vh) scale(0.69); 1072 | } 1073 | 70% { 1074 | transform: translateX(-1vw) translateY(19vh) scale(0.91); 1075 | } 1076 | 75% { 1077 | transform: translateX(13vw) translateY(39vh) scale(0.74); 1078 | } 1079 | 80% { 1080 | transform: translateX(-39vw) translateY(33vh) scale(0.99); 1081 | } 1082 | 85% { 1083 | transform: translateX(-21vw) translateY(41vh) scale(0.74); 1084 | } 1085 | 90% { 1086 | transform: translateX(-3vw) translateY(10vh) scale(0.86); 1087 | } 1088 | 95% { 1089 | transform: translateX(17vw) translateY(2vh) scale(0.5); 1090 | } 1091 | 100% { 1092 | transform: translateX(17vw) translateY(-27vh) scale(0.54); 1093 | } 1094 | } 1095 | .firefly:nth-child(9) { 1096 | animation-name: move9; 1097 | } 1098 | .firefly:nth-child(9)::before { 1099 | animation-duration: 15s; 1100 | } 1101 | .firefly:nth-child(9)::after { 1102 | animation-duration: 15s, 7503ms; 1103 | animation-delay: 0ms, 5146ms; 1104 | } 1105 | 1106 | @keyframes move9 { 1107 | 0% { 1108 | transform: translateX(-8vw) translateY(-3vh) scale(0.57); 1109 | } 1110 | 5.5555555556% { 1111 | transform: translateX(-43vw) translateY(9vh) scale(0.44); 1112 | } 1113 | 11.1111111111% { 1114 | transform: translateX(44vw) translateY(-14vh) scale(0.8); 1115 | } 1116 | 16.6666666667% { 1117 | transform: translateX(-49vw) translateY(-35vh) scale(0.95); 1118 | } 1119 | 22.2222222222% { 1120 | transform: translateX(-12vw) translateY(2vh) scale(0.46); 1121 | } 1122 | 27.7777777778% { 1123 | transform: translateX(-33vw) translateY(18vh) scale(0.34); 1124 | } 1125 | 33.3333333333% { 1126 | transform: translateX(3vw) translateY(-15vh) scale(1); 1127 | } 1128 | 38.8888888889% { 1129 | transform: translateX(-41vw) translateY(17vh) scale(0.34); 1130 | } 1131 | 44.4444444444% { 1132 | transform: translateX(-47vw) translateY(9vh) scale(0.41); 1133 | } 1134 | 50% { 1135 | transform: translateX(-18vw) translateY(-37vh) scale(0.67); 1136 | } 1137 | 55.5555555556% { 1138 | transform: translateX(11vw) translateY(-6vh) scale(0.57); 1139 | } 1140 | 61.1111111111% { 1141 | transform: translateX(-11vw) translateY(-39vh) scale(0.44); 1142 | } 1143 | 66.6666666667% { 1144 | transform: translateX(11vw) translateY(48vh) scale(0.27); 1145 | } 1146 | 72.2222222222% { 1147 | transform: translateX(7vw) translateY(-18vh) scale(0.35); 1148 | } 1149 | 77.7777777778% { 1150 | transform: translateX(-46vw) translateY(-33vh) scale(0.81); 1151 | } 1152 | 83.3333333333% { 1153 | transform: translateX(33vw) translateY(2vh) scale(0.45); 1154 | } 1155 | 88.8888888889% { 1156 | transform: translateX(26vw) translateY(-9vh) scale(0.89); 1157 | } 1158 | 94.4444444444% { 1159 | transform: translateX(11vw) translateY(-15vh) scale(0.9); 1160 | } 1161 | 100% { 1162 | transform: translateX(-10vw) translateY(38vh) scale(0.58); 1163 | } 1164 | } 1165 | .firefly:nth-child(10) { 1166 | animation-name: move10; 1167 | } 1168 | .firefly:nth-child(10)::before { 1169 | animation-duration: 11s; 1170 | } 1171 | .firefly:nth-child(10)::after { 1172 | animation-duration: 11s, 8772ms; 1173 | animation-delay: 0ms, 4701ms; 1174 | } 1175 | 1176 | @keyframes move10 { 1177 | 0% { 1178 | transform: translateX(-20vw) translateY(-27vh) scale(0.89); 1179 | } 1180 | 4.5454545455% { 1181 | transform: translateX(31vw) translateY(-49vh) scale(0.71); 1182 | } 1183 | 9.0909090909% { 1184 | transform: translateX(35vw) translateY(34vh) scale(0.89); 1185 | } 1186 | 13.6363636364% { 1187 | transform: translateX(27vw) translateY(-43vh) scale(0.37); 1188 | } 1189 | 18.1818181818% { 1190 | transform: translateX(-6vw) translateY(35vh) scale(0.63); 1191 | } 1192 | 22.7272727273% { 1193 | transform: translateX(-48vw) translateY(-4vh) scale(0.96); 1194 | } 1195 | 27.2727272727% { 1196 | transform: translateX(48vw) translateY(21vh) scale(0.9); 1197 | } 1198 | 31.8181818182% { 1199 | transform: translateX(-30vw) translateY(33vh) scale(0.89); 1200 | } 1201 | 36.3636363636% { 1202 | transform: translateX(-46vw) translateY(-34vh) scale(0.51); 1203 | } 1204 | 40.9090909091% { 1205 | transform: translateX(-47vw) translateY(-1vh) scale(0.91); 1206 | } 1207 | 45.4545454545% { 1208 | transform: translateX(-10vw) translateY(48vh) scale(0.31); 1209 | } 1210 | 50% { 1211 | transform: translateX(-5vw) translateY(-37vh) scale(0.4); 1212 | } 1213 | 54.5454545455% { 1214 | transform: translateX(15vw) translateY(-2vh) scale(0.5); 1215 | } 1216 | 59.0909090909% { 1217 | transform: translateX(11vw) translateY(21vh) scale(0.66); 1218 | } 1219 | 63.6363636364% { 1220 | transform: translateX(-2vw) translateY(29vh) scale(0.96); 1221 | } 1222 | 68.1818181818% { 1223 | transform: translateX(-17vw) translateY(-47vh) scale(0.35); 1224 | } 1225 | 72.7272727273% { 1226 | transform: translateX(-8vw) translateY(-14vh) scale(0.42); 1227 | } 1228 | 77.2727272727% { 1229 | transform: translateX(17vw) translateY(11vh) scale(0.42); 1230 | } 1231 | 81.8181818182% { 1232 | transform: translateX(7vw) translateY(43vh) scale(0.26); 1233 | } 1234 | 86.3636363636% { 1235 | transform: translateX(20vw) translateY(33vh) scale(0.3); 1236 | } 1237 | 90.9090909091% { 1238 | transform: translateX(40vw) translateY(-13vh) scale(0.96); 1239 | } 1240 | 95.4545454545% { 1241 | transform: translateX(-20vw) translateY(-28vh) scale(0.57); 1242 | } 1243 | 100% { 1244 | transform: translateX(-25vw) translateY(36vh) scale(0.33); 1245 | } 1246 | } 1247 | .firefly:nth-child(11) { 1248 | animation-name: move11; 1249 | } 1250 | .firefly:nth-child(11)::before { 1251 | animation-duration: 18s; 1252 | } 1253 | .firefly:nth-child(11)::after { 1254 | animation-duration: 18s, 6659ms; 1255 | animation-delay: 0ms, 4057ms; 1256 | } 1257 | 1258 | @keyframes move11 { 1259 | 0% { 1260 | transform: translateX(30vw) translateY(28vh) scale(0.49); 1261 | } 1262 | 3.7037037037% { 1263 | transform: translateX(-6vw) translateY(-14vh) scale(0.94); 1264 | } 1265 | 7.4074074074% { 1266 | transform: translateX(-6vw) translateY(-44vh) scale(0.86); 1267 | } 1268 | 11.1111111111% { 1269 | transform: translateX(24vw) translateY(31vh) scale(0.52); 1270 | } 1271 | 14.8148148148% { 1272 | transform: translateX(-28vw) translateY(-13vh) scale(0.82); 1273 | } 1274 | 18.5185185185% { 1275 | transform: translateX(-16vw) translateY(0vh) scale(0.61); 1276 | } 1277 | 22.2222222222% { 1278 | transform: translateX(-30vw) translateY(28vh) scale(0.98); 1279 | } 1280 | 25.9259259259% { 1281 | transform: translateX(-31vw) translateY(16vh) scale(0.63); 1282 | } 1283 | 29.6296296296% { 1284 | transform: translateX(37vw) translateY(36vh) scale(0.49); 1285 | } 1286 | 33.3333333333% { 1287 | transform: translateX(22vw) translateY(-47vh) scale(0.83); 1288 | } 1289 | 37.037037037% { 1290 | transform: translateX(7vw) translateY(3vh) scale(0.4); 1291 | } 1292 | 40.7407407407% { 1293 | transform: translateX(8vw) translateY(-13vh) scale(0.36); 1294 | } 1295 | 44.4444444444% { 1296 | transform: translateX(19vw) translateY(-45vh) scale(0.35); 1297 | } 1298 | 48.1481481481% { 1299 | transform: translateX(-10vw) translateY(34vh) scale(0.89); 1300 | } 1301 | 51.8518518519% { 1302 | transform: translateX(39vw) translateY(50vh) scale(0.57); 1303 | } 1304 | 55.5555555556% { 1305 | transform: translateX(22vw) translateY(45vh) scale(0.33); 1306 | } 1307 | 59.2592592593% { 1308 | transform: translateX(35vw) translateY(17vh) scale(0.8); 1309 | } 1310 | 62.962962963% { 1311 | transform: translateX(-42vw) translateY(21vh) scale(0.89); 1312 | } 1313 | 66.6666666667% { 1314 | transform: translateX(2vw) translateY(-42vh) scale(0.45); 1315 | } 1316 | 70.3703703704% { 1317 | transform: translateX(29vw) translateY(-14vh) scale(0.5); 1318 | } 1319 | 74.0740740741% { 1320 | transform: translateX(-13vw) translateY(19vh) scale(0.34); 1321 | } 1322 | 77.7777777778% { 1323 | transform: translateX(41vw) translateY(45vh) scale(0.64); 1324 | } 1325 | 81.4814814815% { 1326 | transform: translateX(-22vw) translateY(-33vh) scale(0.88); 1327 | } 1328 | 85.1851851852% { 1329 | transform: translateX(3vw) translateY(-3vh) scale(0.61); 1330 | } 1331 | 88.8888888889% { 1332 | transform: translateX(44vw) translateY(47vh) scale(0.4); 1333 | } 1334 | 92.5925925926% { 1335 | transform: translateX(25vw) translateY(-40vh) scale(0.9); 1336 | } 1337 | 96.2962962963% { 1338 | transform: translateX(1vw) translateY(-13vh) scale(0.9); 1339 | } 1340 | 100% { 1341 | transform: translateX(35vw) translateY(33vh) scale(0.72); 1342 | } 1343 | } 1344 | .firefly:nth-child(12) { 1345 | animation-name: move12; 1346 | } 1347 | .firefly:nth-child(12)::before { 1348 | animation-duration: 10s; 1349 | } 1350 | .firefly:nth-child(12)::after { 1351 | animation-duration: 10s, 10555ms; 1352 | animation-delay: 0ms, 1505ms; 1353 | } 1354 | 1355 | @keyframes move12 { 1356 | 0% { 1357 | transform: translateX(-44vw) translateY(-27vh) scale(0.37); 1358 | } 1359 | 3.7037037037% { 1360 | transform: translateX(44vw) translateY(-45vh) scale(0.77); 1361 | } 1362 | 7.4074074074% { 1363 | transform: translateX(22vw) translateY(15vh) scale(0.7); 1364 | } 1365 | 11.1111111111% { 1366 | transform: translateX(-2vw) translateY(-24vh) scale(0.79); 1367 | } 1368 | 14.8148148148% { 1369 | transform: translateX(-24vw) translateY(45vh) scale(0.39); 1370 | } 1371 | 18.5185185185% { 1372 | transform: translateX(-15vw) translateY(-17vh) scale(0.49); 1373 | } 1374 | 22.2222222222% { 1375 | transform: translateX(3vw) translateY(-39vh) scale(0.69); 1376 | } 1377 | 25.9259259259% { 1378 | transform: translateX(-35vw) translateY(30vh) scale(0.66); 1379 | } 1380 | 29.6296296296% { 1381 | transform: translateX(-6vw) translateY(12vh) scale(0.63); 1382 | } 1383 | 33.3333333333% { 1384 | transform: translateX(4vw) translateY(-9vh) scale(0.36); 1385 | } 1386 | 37.037037037% { 1387 | transform: translateX(-25vw) translateY(41vh) scale(0.86); 1388 | } 1389 | 40.7407407407% { 1390 | transform: translateX(21vw) translateY(-7vh) scale(0.86); 1391 | } 1392 | 44.4444444444% { 1393 | transform: translateX(38vw) translateY(-29vh) scale(0.67); 1394 | } 1395 | 48.1481481481% { 1396 | transform: translateX(-47vw) translateY(30vh) scale(0.85); 1397 | } 1398 | 51.8518518519% { 1399 | transform: translateX(26vw) translateY(-19vh) scale(0.97); 1400 | } 1401 | 55.5555555556% { 1402 | transform: translateX(2vw) translateY(39vh) scale(0.95); 1403 | } 1404 | 59.2592592593% { 1405 | transform: translateX(-36vw) translateY(-45vh) scale(0.57); 1406 | } 1407 | 62.962962963% { 1408 | transform: translateX(14vw) translateY(-47vh) scale(0.43); 1409 | } 1410 | 66.6666666667% { 1411 | transform: translateX(23vw) translateY(-14vh) scale(0.42); 1412 | } 1413 | 70.3703703704% { 1414 | transform: translateX(5vw) translateY(44vh) scale(0.88); 1415 | } 1416 | 74.0740740741% { 1417 | transform: translateX(-43vw) translateY(33vh) scale(0.35); 1418 | } 1419 | 77.7777777778% { 1420 | transform: translateX(49vw) translateY(12vh) scale(0.34); 1421 | } 1422 | 81.4814814815% { 1423 | transform: translateX(-28vw) translateY(6vh) scale(0.48); 1424 | } 1425 | 85.1851851852% { 1426 | transform: translateX(36vw) translateY(-23vh) scale(0.26); 1427 | } 1428 | 88.8888888889% { 1429 | transform: translateX(35vw) translateY(-49vh) scale(0.51); 1430 | } 1431 | 92.5925925926% { 1432 | transform: translateX(-25vw) translateY(31vh) scale(0.75); 1433 | } 1434 | 96.2962962963% { 1435 | transform: translateX(3vw) translateY(7vh) scale(0.5); 1436 | } 1437 | 100% { 1438 | transform: translateX(45vw) translateY(16vh) scale(0.38); 1439 | } 1440 | } 1441 | .firefly:nth-child(13) { 1442 | animation-name: move13; 1443 | } 1444 | .firefly:nth-child(13)::before { 1445 | animation-duration: 16s; 1446 | } 1447 | .firefly:nth-child(13)::after { 1448 | animation-duration: 16s, 7788ms; 1449 | animation-delay: 0ms, 6289ms; 1450 | } 1451 | 1452 | @keyframes move13 { 1453 | 0% { 1454 | transform: translateX(18vw) translateY(-24vh) scale(0.65); 1455 | } 1456 | 5% { 1457 | transform: translateX(46vw) translateY(46vh) scale(0.3); 1458 | } 1459 | 10% { 1460 | transform: translateX(44vw) translateY(30vh) scale(0.26); 1461 | } 1462 | 15% { 1463 | transform: translateX(-15vw) translateY(-44vh) scale(0.55); 1464 | } 1465 | 20% { 1466 | transform: translateX(50vw) translateY(-34vh) scale(0.66); 1467 | } 1468 | 25% { 1469 | transform: translateX(19vw) translateY(-14vh) scale(0.87); 1470 | } 1471 | 30% { 1472 | transform: translateX(31vw) translateY(-34vh) scale(0.83); 1473 | } 1474 | 35% { 1475 | transform: translateX(15vw) translateY(8vh) scale(0.62); 1476 | } 1477 | 40% { 1478 | transform: translateX(12vw) translateY(-20vh) scale(0.72); 1479 | } 1480 | 45% { 1481 | transform: translateX(3vw) translateY(-46vh) scale(0.92); 1482 | } 1483 | 50% { 1484 | transform: translateX(31vw) translateY(-23vh) scale(0.34); 1485 | } 1486 | 55% { 1487 | transform: translateX(42vw) translateY(-10vh) scale(0.78); 1488 | } 1489 | 60% { 1490 | transform: translateX(44vw) translateY(-22vh) scale(0.41); 1491 | } 1492 | 65% { 1493 | transform: translateX(-29vw) translateY(-8vh) scale(0.58); 1494 | } 1495 | 70% { 1496 | transform: translateX(16vw) translateY(49vh) scale(0.67); 1497 | } 1498 | 75% { 1499 | transform: translateX(14vw) translateY(-6vh) scale(0.66); 1500 | } 1501 | 80% { 1502 | transform: translateX(-44vw) translateY(-27vh) scale(0.39); 1503 | } 1504 | 85% { 1505 | transform: translateX(40vw) translateY(-33vh) scale(0.88); 1506 | } 1507 | 90% { 1508 | transform: translateX(22vw) translateY(48vh) scale(0.7); 1509 | } 1510 | 95% { 1511 | transform: translateX(19vw) translateY(-47vh) scale(0.55); 1512 | } 1513 | 100% { 1514 | transform: translateX(-9vw) translateY(-24vh) scale(0.76); 1515 | } 1516 | } 1517 | .firefly:nth-child(14) { 1518 | animation-name: move14; 1519 | } 1520 | .firefly:nth-child(14)::before { 1521 | animation-duration: 15s; 1522 | } 1523 | .firefly:nth-child(14)::after { 1524 | animation-duration: 15s, 7619ms; 1525 | animation-delay: 0ms, 4394ms; 1526 | } 1527 | 1528 | @keyframes move14 { 1529 | 0% { 1530 | transform: translateX(49vw) translateY(-1vh) scale(0.44); 1531 | } 1532 | 5.5555555556% { 1533 | transform: translateX(20vw) translateY(3vh) scale(0.93); 1534 | } 1535 | 11.1111111111% { 1536 | transform: translateX(3vw) translateY(-46vh) scale(0.77); 1537 | } 1538 | 16.6666666667% { 1539 | transform: translateX(0vw) translateY(37vh) scale(0.26); 1540 | } 1541 | 22.2222222222% { 1542 | transform: translateX(35vw) translateY(-6vh) scale(0.62); 1543 | } 1544 | 27.7777777778% { 1545 | transform: translateX(-27vw) translateY(-41vh) scale(0.5); 1546 | } 1547 | 33.3333333333% { 1548 | transform: translateX(-26vw) translateY(49vh) scale(0.69); 1549 | } 1550 | 38.8888888889% { 1551 | transform: translateX(28vw) translateY(-34vh) scale(0.39); 1552 | } 1553 | 44.4444444444% { 1554 | transform: translateX(-5vw) translateY(-31vh) scale(0.77); 1555 | } 1556 | 50% { 1557 | transform: translateX(41vw) translateY(6vh) scale(0.95); 1558 | } 1559 | 55.5555555556% { 1560 | transform: translateX(40vw) translateY(4vh) scale(0.76); 1561 | } 1562 | 61.1111111111% { 1563 | transform: translateX(-2vw) translateY(-22vh) scale(0.29); 1564 | } 1565 | 66.6666666667% { 1566 | transform: translateX(40vw) translateY(-16vh) scale(0.39); 1567 | } 1568 | 72.2222222222% { 1569 | transform: translateX(12vw) translateY(-4vh) scale(0.6); 1570 | } 1571 | 77.7777777778% { 1572 | transform: translateX(-13vw) translateY(16vh) scale(0.76); 1573 | } 1574 | 83.3333333333% { 1575 | transform: translateX(44vw) translateY(8vh) scale(0.5); 1576 | } 1577 | 88.8888888889% { 1578 | transform: translateX(3vw) translateY(-45vh) scale(0.84); 1579 | } 1580 | 94.4444444444% { 1581 | transform: translateX(-29vw) translateY(16vh) scale(0.72); 1582 | } 1583 | 100% { 1584 | transform: translateX(-48vw) translateY(12vh) scale(0.9); 1585 | } 1586 | } 1587 | .firefly:nth-child(15) { 1588 | animation-name: move15; 1589 | } 1590 | .firefly:nth-child(15)::before { 1591 | animation-duration: 15s; 1592 | } 1593 | .firefly:nth-child(15)::after { 1594 | animation-duration: 15s, 8296ms; 1595 | animation-delay: 0ms, 2911ms; 1596 | } 1597 | 1598 | @keyframes move15 { 1599 | 0% { 1600 | transform: translateX(-16vw) translateY(-23vh) scale(0.67); 1601 | } 1602 | 5.8823529412% { 1603 | transform: translateX(47vw) translateY(-44vh) scale(0.53); 1604 | } 1605 | 11.7647058824% { 1606 | transform: translateX(20vw) translateY(-39vh) scale(0.26); 1607 | } 1608 | 17.6470588235% { 1609 | transform: translateX(-22vw) translateY(-3vh) scale(0.36); 1610 | } 1611 | 23.5294117647% { 1612 | transform: translateX(-10vw) translateY(-10vh) scale(0.75); 1613 | } 1614 | 29.4117647059% { 1615 | transform: translateX(-46vw) translateY(15vh) scale(0.98); 1616 | } 1617 | 35.2941176471% { 1618 | transform: translateX(0vw) translateY(-43vh) scale(0.81); 1619 | } 1620 | 41.1764705882% { 1621 | transform: translateX(-43vw) translateY(44vh) scale(0.33); 1622 | } 1623 | 47.0588235294% { 1624 | transform: translateX(27vw) translateY(-43vh) scale(0.66); 1625 | } 1626 | 52.9411764706% { 1627 | transform: translateX(-23vw) translateY(32vh) scale(0.95); 1628 | } 1629 | 58.8235294118% { 1630 | transform: translateX(-8vw) translateY(-41vh) scale(0.93); 1631 | } 1632 | 64.7058823529% { 1633 | transform: translateX(25vw) translateY(25vh) scale(0.87); 1634 | } 1635 | 70.5882352941% { 1636 | transform: translateX(-44vw) translateY(47vh) scale(0.82); 1637 | } 1638 | 76.4705882353% { 1639 | transform: translateX(46vw) translateY(-41vh) scale(0.56); 1640 | } 1641 | 82.3529411765% { 1642 | transform: translateX(-46vw) translateY(-9vh) scale(0.53); 1643 | } 1644 | 88.2352941176% { 1645 | transform: translateX(37vw) translateY(-29vh) scale(0.85); 1646 | } 1647 | 94.1176470588% { 1648 | transform: translateX(36vw) translateY(-24vh) scale(0.65); 1649 | } 1650 | 100% { 1651 | transform: translateX(11vw) translateY(3vh) scale(1); 1652 | } 1653 | } 1654 | @keyframes drift { 1655 | 0% { 1656 | transform: rotate(0deg); 1657 | } 1658 | 100% { 1659 | transform: rotate(360deg); 1660 | } 1661 | } 1662 | @keyframes flash { 1663 | 0%, 30%, 100% { 1664 | opacity: 0; 1665 | box-shadow: 0 0 0vw 0vw yellow; 1666 | } 1667 | 5% { 1668 | opacity: 1; 1669 | box-shadow: 0 0 2vw 0.4vw yellow; 1670 | } 1671 | } 1672 | 1673 | 1674 | 1675 | 1676 | 1677 | .wrapper { 1678 | min-height: 100vh; 1679 | background-image: linear-gradient(rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 42),rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 13)); 1680 | display: flex; 1681 | align-items: center; 1682 | justify-content: center; 1683 | flex-direction: column; 1684 | z-index:-10000000000; 1685 | position: relative; 1686 | -webkit-animation:colors 5s infinite; 1687 | -webkit-animation-duration: 30s; 1688 | } 1689 | 1690 | @-webkit-keyframes colors { 1691 | 0% { background-image: linear-gradient(rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 40),rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 13));} 1692 | 5% { background-image: linear-gradient(rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 39),rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 13));} 1693 | 15% { background-image: linear-gradient(rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 32),rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 13));} 1694 | 35% { background-image: linear-gradient(rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 24),rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 13));} 1695 | 1696 | 50% { background-image: linear-gradient(rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 14),rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 13));} 1697 | 65% { background-image: linear-gradient(rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 20),rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 13));} 1698 | 75% { background-image: linear-gradient(rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 28),rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 13));} 1699 | 85% { background-image: linear-gradient(rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 30),rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 13));} 1700 | 95% { background-image: linear-gradient(rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 36),rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 13));} 1701 | 1702 | 1703 | } 1704 | 1705 | 1706 | 1707 | .kodama2 { 1708 | position:absolute; 1709 | left:10%; 1710 | bottom:10%; 1711 | 1712 | align-items: center; 1713 | } 1714 | 1715 | .kodama2 .head { 1716 | opacity:.6; 1717 | width: 40px; 1718 | height: 40px; 1719 | background-color: #fff; 1720 | border-radius: 100% 50% 40% 70% / 80% 50% 60% 50%; 1721 | transform: rotateZ(15deg); 1722 | -webkit-animation: rotation2 8s 5s infinite; 1723 | animation: rotation2 8s 5s infinite; 1724 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 1725 | } 1726 | 1727 | 1728 | .kodama2 .eye1 { 1729 | 1730 | opacity:.8; 1731 | position:absolute; 1732 | z-index:94; 1733 | top:40%; 1734 | left:23%; 1735 | height: 20%; 1736 | width: 20%; 1737 | border: 2px solid #112; 1738 | background-image: radial-gradient(#212121 50%, #fff 31%); 1739 | border-radius: 100% 100% 60% 100%; 1740 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 1741 | 1742 | } 1743 | 1744 | .kodama2 .eye2 { 1745 | 1746 | opacity:.8; 1747 | position:absolute; 1748 | z-index:94; 1749 | top:30%; 1750 | left:63%; 1751 | height: 5%; 1752 | width: 5%; 1753 | border: 2px solid #112; 1754 | background-image: radial-gradient(#212121 50%, #fff 31%); 1755 | border-radius: 100% 100% 60% 100%; 1756 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 1757 | 1758 | } 1759 | 1760 | .kodama2 .mouth { 1761 | 1762 | opacity:.8; 1763 | position:absolute; 1764 | z-index:94; 1765 | top:70%; 1766 | left:63%; 1767 | height: 5%; 1768 | width: 15%; 1769 | border: 2px solid #112; 1770 | background-image: radial-gradient(#212121 100%, #fff 100%); 1771 | border-radius: 50%; 1772 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 1773 | 1774 | } 1775 | 1776 | 1777 | 1778 | .kodama2 .body { 1779 | position:absolute; 1780 | opacity:.1; 1781 | z-index:-1; 1782 | top:50%; 1783 | right:0%; 1784 | height: 205%; 1785 | width: 75%; 1786 | background-image: linear-gradient(transparent,transparent,transparent,rgb(17, 17, 3),transparent); 1787 | border-radius: 0 0 20px 20px; 1788 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 1789 | } 1790 | 1791 | .kodama2 .arm1 { 1792 | position:absolute; 1793 | opacity:.1; 1794 | z-index:30; 1795 | top:70%; 1796 | right:70%; 1797 | height: 105%; 1798 | width: 25%; 1799 | transform: rotateZ(10deg); 1800 | background-image: linear-gradient(transparent,transparent,transparent,rgb(17, 17, 3),transparent); 1801 | border-radius: 0 0 20px 20px; 1802 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 1803 | } 1804 | 1805 | .kodama2 .arm2 { 1806 | position:absolute; 1807 | opacity:.1; 1808 | z-index:30; 1809 | top:70%; 1810 | left:90%; 1811 | height: 105%; 1812 | width: 25%; 1813 | transform: rotateZ(-10deg); 1814 | background-image: linear-gradient(transparent,transparent,transparent,rgb(17, 17, 3),transparent); 1815 | border-radius: 0 0 20px 20px; 1816 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 1817 | } 1818 | 1819 | .kodama3 { 1820 | position:absolute; 1821 | left:20%; 1822 | bottom:22%; 1823 | 1824 | align-items: center; 1825 | } 1826 | 1827 | .kodama3 .head { 1828 | opacity:.8; 1829 | width: 22px; 1830 | height: 22px; 1831 | background-color: #fff; 1832 | border-radius: 100% 50% 40% 70% / 80% 50% 60% 50%; 1833 | transform: rotateZ(15deg); 1834 | -webkit-animation: rotation 5s 5s infinite; 1835 | animation: rotation 5s 5s infinite; 1836 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 1837 | } 1838 | 1839 | 1840 | .kodama3 .eye1 { 1841 | 1842 | opacity:.6; 1843 | position:absolute; 1844 | z-index:94; 1845 | top:40%; 1846 | left:23%; 1847 | height: 20%; 1848 | width: 20%; 1849 | border: 2px solid #112; 1850 | background-image: radial-gradient(#212121 50%, #fff 31%); 1851 | border-radius: 100% 100% 60% 100%; 1852 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 1853 | 1854 | } 1855 | 1856 | .kodama3 .eye2 { 1857 | 1858 | opacity:.6; 1859 | position:absolute; 1860 | z-index:94; 1861 | top:30%; 1862 | left:63%; 1863 | height: 5%; 1864 | width: 5%; 1865 | border: 2px solid #112; 1866 | background-image: radial-gradient(#212121 50%, #fff 31%); 1867 | border-radius: 100% 100% 60% 100%; 1868 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 1869 | 1870 | } 1871 | 1872 | 1873 | 1874 | .kodama3 .body { 1875 | position:absolute; 1876 | opacity:.1; 1877 | z-index:-1; 1878 | top:50%; 1879 | right:0%; 1880 | height: 205%; 1881 | width: 75%; 1882 | background-image: linear-gradient(transparent,transparent,transparent,rgb(17, 17, 3),transparent); 1883 | border-radius: 0 0 20px 20px; 1884 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 1885 | } 1886 | 1887 | .kodama3 .arm1 { 1888 | position:absolute; 1889 | opacity:.1; 1890 | z-index:30; 1891 | top:70%; 1892 | right:70%; 1893 | height: 105%; 1894 | width: 25%; 1895 | transform: rotateZ(10deg); 1896 | background-image: linear-gradient(transparent,transparent,transparent,rgb(17, 17, 3),transparent); 1897 | border-radius: 0 0 20px 20px; 1898 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 1899 | } 1900 | 1901 | .kodama3 .arm2 { 1902 | position:absolute; 1903 | opacity:.1; 1904 | z-index:30; 1905 | top:70%; 1906 | left:90%; 1907 | height: 105%; 1908 | width: 25%; 1909 | transform: rotateZ(-10deg); 1910 | background-image: linear-gradient(transparent,transparent,transparent,rgb(17, 17, 3),transparent); 1911 | border-radius: 0 0 20px 20px; 1912 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 1913 | } 1914 | 1915 | .kodama4 { 1916 | position:absolute; 1917 | left:30%; 1918 | bottom:22%; 1919 | 1920 | align-items: center; 1921 | } 1922 | 1923 | .kodama4 .head { 1924 | opacity:.8; 1925 | width: 18px; 1926 | height: 18px; 1927 | background-color: #fff; 1928 | border-radius: 100% 50% 40% 70% / 80% 50% 60% 50%; 1929 | transform: rotateZ(15deg); 1930 | -webkit-animation: rotation2 4s 2s infinite; 1931 | animation: rotation2 4s 2s infinite; 1932 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 1933 | } 1934 | 1935 | 1936 | .kodama4 .eye1 { 1937 | 1938 | opacity:.6; 1939 | position:absolute; 1940 | z-index:94; 1941 | top:40%; 1942 | left:23%; 1943 | height: 20%; 1944 | width: 20%; 1945 | border: 2px solid #112; 1946 | background-image: radial-gradient(#212121 50%, #fff 31%); 1947 | border-radius: 100% 100% 60% 100%; 1948 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 1949 | 1950 | } 1951 | 1952 | .kodama4 .eye2 { 1953 | 1954 | opacity:.6; 1955 | position:absolute; 1956 | z-index:94; 1957 | top:30%; 1958 | left:63%; 1959 | height: 5%; 1960 | width: 5%; 1961 | border: 2px solid #112; 1962 | background-image: radial-gradient(#212121 50%, #fff 31%); 1963 | border-radius: 100% 100% 60% 100%; 1964 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 1965 | 1966 | } 1967 | 1968 | 1969 | 1970 | .kodama4 .body { 1971 | position:absolute; 1972 | opacity:.1; 1973 | z-index:-1; 1974 | top:50%; 1975 | right:0%; 1976 | height: 205%; 1977 | width: 75%; 1978 | background-image: linear-gradient(rgb(250,250,250),rgb(17, 17, 13)); 1979 | border-radius: 0 0 20px 20px; 1980 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 1981 | } 1982 | 1983 | .kodama4 .arm1 { 1984 | position:absolute; 1985 | opacity:.2; 1986 | z-index:30; 1987 | top:70%; 1988 | right:60%; 1989 | height: 105%; 1990 | width: 25%; 1991 | transform: rotateZ(10deg); 1992 | background-image: linear-gradient(rgb(250,250,250),rgb(17, 17, 13)); 1993 | border-radius: 0 0 20px 20px; 1994 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 1995 | } 1996 | 1997 | .kodama4 .arm2 { 1998 | position:absolute; 1999 | opacity:.2; 2000 | z-index:30; 2001 | top:70%; 2002 | left:80%; 2003 | height: 105%; 2004 | width: 25%; 2005 | transform: rotateZ(-10deg); 2006 | background-image: linear-gradient(rgb(250,250,250),rgb(17, 17, 13)); 2007 | border-radius: 0 0 20px 20px; 2008 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 2009 | } 2010 | 2011 | 2012 | .kodama5 { 2013 | position:absolute; 2014 | left:40%; 2015 | bottom:20%; 2016 | 2017 | align-items: center; 2018 | } 2019 | 2020 | .kodama5 .head { 2021 | opacity:.7; 2022 | width: 11px; 2023 | height: 11px; 2024 | background-color: #fff; 2025 | border-radius: 100% 50% 40% 70% / 80% 50% 60% 50%; 2026 | transform: rotateZ(15deg); 2027 | -webkit-animation: rotation2 4s 2s infinite; 2028 | animation: rotation2 4s 2s infinite; 2029 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2030 | } 2031 | 2032 | 2033 | .kodama5 .eye1 { 2034 | 2035 | opacity:.8; 2036 | position:absolute; 2037 | z-index:94; 2038 | top:40%; 2039 | left:23%; 2040 | height: 20%; 2041 | width: 20%; 2042 | border: 2px solid #112; 2043 | background-image: radial-gradient(#212121 50%, #fff 31%); 2044 | border-radius: 100% 100% 60% 100%; 2045 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2046 | 2047 | } 2048 | 2049 | .kodama5 .eye2 { 2050 | 2051 | opacity:.8; 2052 | position:absolute; 2053 | z-index:94; 2054 | top:30%; 2055 | left:63%; 2056 | height: 5%; 2057 | width: 5%; 2058 | border: 2px solid #112; 2059 | background-image: radial-gradient(#212121 50%, #fff 31%); 2060 | border-radius: 100% 100% 60% 100%; 2061 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2062 | 2063 | } 2064 | 2065 | .kodama5 .mouth { 2066 | 2067 | opacity:.8; 2068 | position:absolute; 2069 | z-index:94; 2070 | top:70%; 2071 | left:63%; 2072 | height: 5%; 2073 | width: 15%; 2074 | border: 2px solid #112; 2075 | background-image: radial-gradient(#212121 100%, #fff 100%); 2076 | border-radius: 50%; 2077 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2078 | 2079 | } 2080 | 2081 | 2082 | 2083 | .kodama5 .body { 2084 | position:absolute; 2085 | opacity:.1; 2086 | z-index:-1; 2087 | top:50%; 2088 | right:0%; 2089 | height: 205%; 2090 | width: 75%; 2091 | background-image: linear-gradient(rgb(250,250,250),rgb(17, 17, 13)); 2092 | border-radius: 0 0 20px 20px; 2093 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 2094 | } 2095 | 2096 | .kodama5 .arm1 { 2097 | position:absolute; 2098 | opacity:.1; 2099 | z-index:30; 2100 | top:70%; 2101 | right:60%; 2102 | height: 105%; 2103 | width: 25%; 2104 | transform: rotateZ(10deg); 2105 | background-image: linear-gradient(rgb(250,250,250),rgb(17, 17, 13)); 2106 | border-radius: 0 0 20px 20px; 2107 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 2108 | } 2109 | 2110 | .kodama5 .arm2 { 2111 | position:absolute; 2112 | opacity:.1; 2113 | z-index:30; 2114 | top:70%; 2115 | left:80%; 2116 | height: 105%; 2117 | width: 25%; 2118 | transform: rotateZ(-10deg); 2119 | background-image: linear-gradient(rgb(250,250,250),rgb(17, 17, 13)); 2120 | border-radius: 0 0 20px 20px; 2121 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 2122 | } 2123 | 2124 | .kodama6 { 2125 | position:absolute; 2126 | right:40%; 2127 | bottom:20%; 2128 | 2129 | align-items: center; 2130 | } 2131 | 2132 | .kodama6 .head { 2133 | opacity:.5; 2134 | width: 15px; 2135 | height: 15px; 2136 | background-color: #fff; 2137 | border-radius: 100% 50% 40% 70% / 80% 50% 60% 50%; 2138 | transform: rotateZ(15deg); 2139 | -webkit-animation: rotation2 4s 2s infinite; 2140 | animation: rotation2 4s 2s infinite; 2141 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2142 | } 2143 | 2144 | 2145 | .kodama6 .eye1 { 2146 | 2147 | opacity:.8; 2148 | position:absolute; 2149 | z-index:94; 2150 | top:40%; 2151 | left:23%; 2152 | height: 20%; 2153 | width: 20%; 2154 | border: 2px solid #112; 2155 | background-image: radial-gradient(#212121 50%, #fff 31%); 2156 | border-radius: 100% 100% 60% 100%; 2157 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2158 | 2159 | } 2160 | 2161 | .kodama6 .eye2 { 2162 | 2163 | opacity:.8; 2164 | position:absolute; 2165 | z-index:94; 2166 | top:30%; 2167 | left:63%; 2168 | height: 5%; 2169 | width: 5%; 2170 | border: 2px solid #112; 2171 | background-image: radial-gradient(#212121 50%, #fff 31%); 2172 | border-radius: 100% 100% 60% 100%; 2173 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2174 | 2175 | } 2176 | 2177 | .kodama6 .mouth { 2178 | 2179 | opacity:.8; 2180 | position:absolute; 2181 | z-index:94; 2182 | top:70%; 2183 | left:63%; 2184 | height: 5%; 2185 | width: 15%; 2186 | border: 2px solid #112; 2187 | background-image: radial-gradient(#212121 100%, #fff 100%); 2188 | border-radius: 50%; 2189 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2190 | 2191 | } 2192 | 2193 | 2194 | 2195 | .kodama6 .body { 2196 | position:absolute; 2197 | opacity:.1; 2198 | z-index:-1; 2199 | top:50%; 2200 | right:0%; 2201 | height: 205%; 2202 | width: 75%; 2203 | background-image: linear-gradient(rgb(250,250,250),rgb(17, 17, 13)); 2204 | border-radius: 0 0 20px 20px; 2205 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 2206 | } 2207 | 2208 | .kodama6 .arm1 { 2209 | position:absolute; 2210 | opacity:.1; 2211 | z-index:30; 2212 | top:70%; 2213 | right:60%; 2214 | height: 105%; 2215 | width: 25%; 2216 | transform: rotateZ(10deg); 2217 | background-image: linear-gradient(rgb(250,250,250),rgb(17, 17, 13)); 2218 | border-radius: 0 0 20px 20px; 2219 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 2220 | } 2221 | 2222 | .kodama6 .arm2 { 2223 | position:absolute; 2224 | opacity:.1; 2225 | z-index:30; 2226 | top:70%; 2227 | left:80%; 2228 | height: 105%; 2229 | width: 25%; 2230 | transform: rotateZ(-10deg); 2231 | background-image: linear-gradient(rgb(250,250,250),rgb(17, 17, 13)); 2232 | border-radius: 0 0 20px 20px; 2233 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 2234 | } 2235 | 2236 | 2237 | .kodama7 { 2238 | position:absolute; 2239 | right:25%; 2240 | bottom:27%; 2241 | 2242 | align-items: center; 2243 | } 2244 | 2245 | .kodama7 .head { 2246 | opacity:.5; 2247 | width: 15px; 2248 | height: 15px; 2249 | background-color: #fff; 2250 | border-radius: 100% 50% 40% 70% / 80% 50% 60% 50%; 2251 | transform: rotateZ(15deg); 2252 | -webkit-animation: rotation 4s 2s infinite; 2253 | animation: rotation 4s 2s infinite; 2254 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2255 | } 2256 | 2257 | 2258 | .kodama7 .eye1 { 2259 | 2260 | opacity:.8; 2261 | position:absolute; 2262 | z-index:94; 2263 | top:40%; 2264 | left:23%; 2265 | height: 20%; 2266 | width: 20%; 2267 | border: 2px solid #112; 2268 | background-image: radial-gradient(#212121 50%, #fff 31%); 2269 | border-radius: 100% 100% 60% 100%; 2270 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2271 | 2272 | } 2273 | 2274 | .kodama7 .eye2 { 2275 | 2276 | opacity:.8; 2277 | position:absolute; 2278 | z-index:94; 2279 | top:30%; 2280 | left:63%; 2281 | height: 5%; 2282 | width: 5%; 2283 | border: 2px solid #112; 2284 | background-image: radial-gradient(#212121 50%, #fff 31%); 2285 | border-radius: 100% 100% 60% 100%; 2286 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2287 | 2288 | } 2289 | 2290 | .kodama7 .mouth { 2291 | 2292 | opacity:.8; 2293 | position:absolute; 2294 | z-index:94; 2295 | top:70%; 2296 | left:63%; 2297 | height: 5%; 2298 | width: 15%; 2299 | border: 2px solid #112; 2300 | background-image: radial-gradient(#212121 100%, #fff 100%); 2301 | border-radius: 50%; 2302 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2303 | 2304 | } 2305 | 2306 | 2307 | 2308 | .kodama7 .body { 2309 | position:absolute; 2310 | opacity:.1; 2311 | z-index:-1; 2312 | top:50%; 2313 | right:0%; 2314 | height: 205%; 2315 | width: 75%; 2316 | background-image: linear-gradient(rgb(250,250,250),rgb(17, 17, 13)); 2317 | border-radius: 0 0 20px 20px; 2318 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 2319 | } 2320 | 2321 | .kodama7 .arm1 { 2322 | position:absolute; 2323 | opacity:.1; 2324 | z-index:30; 2325 | top:70%; 2326 | right:60%; 2327 | height: 105%; 2328 | width: 25%; 2329 | transform: rotateZ(10deg); 2330 | background-image: linear-gradient(rgb(250,250,250),rgb(17, 17, 13)); 2331 | border-radius: 0 0 20px 20px; 2332 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 2333 | } 2334 | 2335 | .kodama7 .arm2 { 2336 | position:absolute; 2337 | opacity:.1; 2338 | z-index:30; 2339 | top:70%; 2340 | left:80%; 2341 | height: 105%; 2342 | width: 25%; 2343 | transform: rotateZ(-10deg); 2344 | background-image: linear-gradient(rgb(250,250,250),rgb(17, 17, 13)); 2345 | border-radius: 0 0 20px 20px; 2346 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 2347 | } 2348 | 2349 | .kodama8 { 2350 | position:absolute; 2351 | right:10%; 2352 | top:7%; 2353 | 2354 | align-items: center; 2355 | } 2356 | 2357 | .kodama8 .head { 2358 | opacity:.5; 2359 | width: 10px; 2360 | height: 10px; 2361 | background-color: #fff; 2362 | border-radius: 100% 50% 40% 70% / 80% 50% 60% 50%; 2363 | transform: rotateZ(15deg); 2364 | -webkit-animation: rotation 4s 2s infinite; 2365 | animation: rotation 4s 2s infinite; 2366 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2367 | } 2368 | 2369 | 2370 | .kodama8 .eye1 { 2371 | 2372 | opacity:.7; 2373 | position:absolute; 2374 | z-index:94; 2375 | top:40%; 2376 | left:23%; 2377 | height: 4%; 2378 | width: 4%; 2379 | border: 2px solid #112; 2380 | background-image: radial-gradient(#212121 50%, #fff 31%); 2381 | border-radius: 100% 100% 60% 100%; 2382 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2383 | 2384 | } 2385 | 2386 | .kodama8 .eye2 { 2387 | 2388 | opacity:.7; 2389 | position:absolute; 2390 | z-index:94; 2391 | top:30%; 2392 | left:63%; 2393 | height: 4%; 2394 | width: 4%; 2395 | border: 2px solid #112; 2396 | background-image: radial-gradient(#212121 50%, #fff 31%); 2397 | border-radius: 100% 100% 60% 100%; 2398 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2399 | 2400 | } 2401 | 2402 | 2403 | .kodama8 .body { 2404 | position:absolute; 2405 | opacity:.1; 2406 | z-index:-1; 2407 | top:50%; 2408 | right:0%; 2409 | height: 205%; 2410 | width: 75%; 2411 | background-image: linear-gradient(rgb(250,250,250),rgb(17, 17, 13)); 2412 | border-radius: 0 0 20px 20px; 2413 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 2414 | } 2415 | 2416 | .kodama8 .arm1 { 2417 | position:absolute; 2418 | opacity:.1; 2419 | z-index:30; 2420 | top:70%; 2421 | right:60%; 2422 | height: 105%; 2423 | width: 25%; 2424 | transform: rotateZ(10deg); 2425 | background-image: linear-gradient(rgb(250,250,250),rgb(17, 17, 13)); 2426 | border-radius: 0 0 20px 20px; 2427 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 2428 | } 2429 | 2430 | .kodama8 .arm2 { 2431 | position:absolute; 2432 | opacity:.1; 2433 | z-index:30; 2434 | top:70%; 2435 | left:80%; 2436 | height: 105%; 2437 | width: 25%; 2438 | transform: rotateZ(-10deg); 2439 | background-image: linear-gradient(rgb(250,250,250),rgb(17, 17, 13)); 2440 | border-radius: 0 0 20px 20px; 2441 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 2442 | } 2443 | 2444 | .kodama9 { 2445 | position:absolute; 2446 | left:10%; 2447 | top:7%; 2448 | 2449 | align-items: center; 2450 | } 2451 | 2452 | .kodama9 .head { 2453 | opacity:.7; 2454 | width: 5px; 2455 | height: 5px; 2456 | background-color: #fff; 2457 | border-radius: 100% 50% 40% 70% / 80% 50% 60% 50%; 2458 | transform: rotateZ(15deg); 2459 | -webkit-animation: rotation 4s 2s infinite; 2460 | animation: rotation 4s 2s infinite; 2461 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2462 | } 2463 | .kodama9 { 2464 | position:absolute; 2465 | left:65%; 2466 | top:7%; 2467 | 2468 | align-items: center; 2469 | } 2470 | 2471 | .kodama9 .head { 2472 | opacity:.7; 2473 | width: 10px; 2474 | height: 10px; 2475 | background-color: #fff; 2476 | border-radius: 100% 50% 40% 70% / 80% 50% 60% 50%; 2477 | transform: rotateZ(15deg); 2478 | -webkit-animation: rotation 4s 2s infinite; 2479 | animation: rotation 4s 2s infinite; 2480 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2481 | } 2482 | .kodama9 .body { 2483 | position:absolute; 2484 | opacity:.1; 2485 | z-index:-1; 2486 | top:50%; 2487 | right:0%; 2488 | height: 205%; 2489 | width: 75%; 2490 | background-image: linear-gradient(rgb(250,250,250),rgb(17, 17, 13)); 2491 | border-radius: 0 0 20px 20px; 2492 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 2493 | } 2494 | 2495 | .kodama10 { 2496 | position:absolute; 2497 | left:60%; 2498 | top:7%; 2499 | 2500 | align-items: center; 2501 | } 2502 | 2503 | .kodama10 .head { 2504 | opacity:.7; 2505 | width: 5px; 2506 | height: 5px; 2507 | background-color: #fff; 2508 | border-radius: 100% 50% 40% 70% / 80% 50% 60% 50%; 2509 | transform: rotateZ(15deg); 2510 | -webkit-animation: rotation 4s 2s infinite; 2511 | animation: rotation 4s 2s infinite; 2512 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2513 | } 2514 | 2515 | .kodama10 .body { 2516 | position:absolute; 2517 | opacity:.1; 2518 | z-index:-1; 2519 | top:50%; 2520 | right:0%; 2521 | height: 205%; 2522 | width: 75%; 2523 | background-image: linear-gradient(rgb(250,250,250),rgb(17, 17, 13)); 2524 | border-radius: 0 0 20px 20px; 2525 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 2526 | } 2527 | 2528 | .kodama11 { 2529 | position:absolute; 2530 | left:70%; 2531 | top:5%; 2532 | 2533 | align-items: center; 2534 | } 2535 | 2536 | .kodama11 .head { 2537 | opacity:.7; 2538 | width: 7px; 2539 | height: 7px; 2540 | background-color: #fff; 2541 | border-radius: 100% 50% 40% 70% / 80% 50% 60% 50%; 2542 | transform: rotateZ(15deg); 2543 | -webkit-animation: rotation 4s 2s infinite; 2544 | animation: rotation 4s 2s infinite; 2545 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.6); 2546 | } 2547 | 2548 | .kodama11 .body { 2549 | position:absolute; 2550 | opacity:.1; 2551 | z-index:-1; 2552 | top:50%; 2553 | right:0%; 2554 | height: 205%; 2555 | width: 75%; 2556 | background-image: linear-gradient(rgb(250,250,250),rgb(17, 17, 13)); 2557 | border-radius: 0 0 20px 20px; 2558 | box-shadow: 0 0 65px 10px rgba(250, 250, 250, 0.4); 2559 | } 2560 | 2561 | 2562 | .moon 2563 | 2564 | { 2565 | position:absolute; 2566 | 2567 | opacity:.3; 2568 | z-index:-1; 2569 | top:-10%; 2570 | left:-5%; 2571 | height: min(40vw,60vh); 2572 | width: min(40vw,60vh); 2573 | background-image: linear-gradient(to bottom right, transparent,rgb(200, 255, 255),rgb(200, 255, 255),rgb(17, 0, 0)); 2574 | border-radius: 50%; 2575 | box-shadow: 0 0 5px 10px rgb(0, 51, 34,.2); 2576 | -webkit-animation:moonshadow 5s infinite; 2577 | -webkit-animation-duration: 30s; 2578 | } 2579 | 2580 | @-webkit-keyframes moonshadow { 2581 | 2582 | 5% { opacity:.2;} 2583 | 15% { opacity:.3;} 2584 | 40% { opacity:.4;} 2585 | 50% { opacity:.5;} 2586 | 2587 | 60% { opacity:.6;} 2588 | 70% { opacity:.5;} 2589 | 90% { opacity:.4;} 2590 | 100% { opacity:.3;} 2591 | 2592 | } 2593 | 2594 | @media screen and (max-width : 900px) { 2595 | 2596 | .moon 2597 | 2598 | { 2599 | position:absolute; 2600 | 2601 | opacity:.3; 2602 | z-index:-1; 2603 | top:-10%; 2604 | left:-5%; 2605 | height: 170px; 2606 | width: 170px; 2607 | background-image: linear-gradient(to bottom right, transparent,rgb(200, 255, 255),rgb(200, 255, 255),rgb(17, 0, 0)); 2608 | border-radius: 50%; 2609 | box-shadow: 0 0 5px 10px rgb(0, 51, 34,.2); 2610 | -webkit-animation:moonshadow 5s infinite; 2611 | -webkit-animation-duration: 30s; 2612 | } 2613 | 2614 | } 2615 | 2616 | @media screen and (max-width : 400px) { 2617 | 2618 | .moon 2619 | 2620 | { 2621 | position:absolute; 2622 | 2623 | opacity:.3; 2624 | z-index:-1; 2625 | top:-10%; 2626 | left:-5%; 2627 | height: .1*window.innerWidth; 2628 | width: .1*window.innerWidth; 2629 | background-image: linear-gradient(to bottom right, transparent,rgb(200, 255, 255),rgb(200, 255, 255),rgb(17, 0, 0)); 2630 | border-radius: 50%; 2631 | box-shadow: 0 0 5px 10px rgb(0, 51, 34,.2); 2632 | -webkit-animation:moonshadow 5s infinite; 2633 | -webkit-animation-duration: 30s; 2634 | } 2635 | 2636 | } 2637 | 2638 | @media screen and (max-height : 350px) { 2639 | 2640 | .moon 2641 | 2642 | { 2643 | position:absolute; 2644 | 2645 | opacity:.3; 2646 | z-index:-1; 2647 | top:-10%; 2648 | left:-5%; 2649 | height: 200px; 2650 | width: 200px; 2651 | background-image: linear-gradient(to bottom right, transparent,rgb(200, 255, 255),rgb(200, 255, 255),rgb(17, 0, 0)); 2652 | border-radius: 50%; 2653 | box-shadow: 0 0 5px 10px rgb(0, 51, 34,.2); 2654 | -webkit-animation:moonshadow 5s infinite; 2655 | -webkit-animation-duration: 30s; 2656 | } 2657 | 2658 | } 2659 | 2660 | @media screen and (max-height : 250px) { 2661 | 2662 | 2663 | .kodama {transform: scale(0.7);} 2664 | 2665 | .moon 2666 | 2667 | { 2668 | position:absolute; 2669 | 2670 | opacity:.5; 2671 | z-index:-1; 2672 | top:-10%; 2673 | left:-5%; 2674 | height: 150px; 2675 | width: 150px; 2676 | background-image: linear-gradient(to bottom right, transparent,rgb(200, 255, 255),rgb(200, 255, 255),rgb(17, 0, 0)); 2677 | border-radius: 50%; 2678 | box-shadow: 0 0 5px 10px rgb(0, 51, 34,.2); 2679 | -webkit-animation:moonshadow 5s infinite; 2680 | -webkit-animation-duration: 30s; 2681 | } 2682 | 2683 | } 2684 | 2685 | .wrapper2 { 2686 | min-height: 10vh; 2687 | background-image: linear-gradient(rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 42),rgb(17, 17, 13),rgb(17, 17, 13),rgb(17, 17, 13)); 2688 | display: flex; 2689 | align-items: center; 2690 | justify-content: center; 2691 | flex-direction: column; 2692 | z-index:-10000000000; 2693 | position: relative; 2694 | -webkit-animation:colors2 0s 1; 2695 | -webkit-animation-duration: 5s; 2696 | } 2697 | 2698 | @-webkit-keyframes colors2 { 2699 | 0% {opacity:.1;} 2700 | 20% {opacity:.1;} 2701 | 100% { background-image:transparent;} 2702 | 2703 | } --------------------------------------------------------------------------------