241 views
1.master-container { 2 margin: 0; 3 padding: 20px 40px; 4 background-color: #131516; 5 display: grid; 6 border-radius: 13px; 7 border: 1px solid #2c2d2e; 8 transform: scale(0.7); 9} 10 11.container { 12 width: 300px; 13 height: 300px; 14 position: relative; 15 margin: auto; 16 border-radius: 50%; 17 border: 2px solid white; 18 overflow: hidden; 19} 20 21.crescent { 22 position: relative; 23 height: 50px; 24 width: 50px; 25 border-radius: 50%; 26 left: calc(50% - 25px); 27 top: 12px; 28 overflow: hidden; 29 animation: rotate 3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 30} 31 32.crescent span:nth-child(2) { 33 position: absolute; 34 display: block; 35 width: 100%; 36 height: 100%; 37 box-shadow: inset 0 0 0 2px white; 38 border-radius: 50%; 39} 40 41.crescent span:nth-child(1) { 42 background-color: #131516; 43 position: absolute; 44 left: 40%; 45 display: block; 46 width: calc(70% - 6px); 47 height: calc(70% - 6px); 48 box-shadow: inset 0 0 0 2px white; 49 border-radius: 50%; 50 z-index: 9; 51} 52 53.star { 54 position: absolute; 55 overflow: hidden; 56 border-radius: 50%; 57 height: 20px; 58 width: 20px; 59} 60 61.star span:nth-child(1)::before { 62 content: ""; 63 border: 2px solid white; 64 height: 50%; 65 width: 50%; 66 border-top-color: transparent; 67 border-left-color: transparent; 68 border-radius: 0% 0% 100% 10%; 69 display: block; 70 left: -3px; 71 top: -3px; 72 position: absolute; 73} 74 75.star span:nth-child(1)::after { 76 content: ""; 77 border: 2px solid white; 78 height: 50%; 79 width: 50%; 80 border-bottom-color: transparent; 81 border-left-color: transparent; 82 border-radius: 0% 100% 0% 0%; 83 display: block; 84 left: -3px; 85 bottom: -3px; 86 position: absolute; 87} 88 89.star span:nth-child(2)::before { 90 content: ""; 91 border: 2px solid white; 92 height: 50%; 93 width: 50%; 94 border-top-color: transparent; 95 border-right-color: transparent; 96 border-radius: 0% 0% 0% 100%; 97 display: block; 98 right: -3px; 99 top: -3px; 100 position: absolute; 101} 102 103.star span:nth-child(2)::after { 104 content: ""; 105 border: 2px solid white; 106 height: 50%; 107 width: 50%; 108 border-bottom-color: transparent; 109 border-right-color: transparent; 110 border-radius: 100% 0% 0% 0%; 111 display: block; 112 right: -3px; 113 bottom: -3px; 114 position: absolute; 115} 116 117.small-star { 118 position: absolute; 119 overflow: hidden; 120 border-radius: 50%; 121 height: 12px; 122 width: 12px; 123} 124 125.small-star span:nth-child(1)::before { 126 content: ""; 127 border: 1.5px solid white; 128 height: 50%; 129 width: 50%; 130 border-top-color: transparent; 131 border-left-color: transparent; 132 border-radius: 0% 0% 100% 10%; 133 display: block; 134 left: -2px; 135 top: -2px; 136 position: absolute; 137} 138 139.small-star span:nth-child(1)::after { 140 content: ""; 141 border: 1.5px solid white; 142 height: 50%; 143 width: 50%; 144 border-bottom-color: transparent; 145 border-left-color: transparent; 146 border-radius: 0% 100% 0% 0%; 147 display: block; 148 left: -2px; 149 bottom: -2px; 150 position: absolute; 151} 152 153.small-star span:nth-child(2)::before { 154 content: ""; 155 border: 1.5px solid white; 156 height: 50%; 157 width: 50%; 158 border-top-color: transparent; 159 border-right-color: transparent; 160 border-radius: 0% 0% 0% 100%; 161 display: block; 162 right: -2px; 163 top: -2px; 164 position: absolute; 165} 166 167.small-star span:nth-child(2)::after { 168 content: ""; 169 border: 1.5px solid white; 170 height: 50%; 171 width: 50%; 172 border-bottom-color: transparent; 173 border-right-color: transparent; 174 border-radius: 100% 0% 0% 0%; 175 display: block; 176 right: -2px; 177 bottom: -2px; 178 position: absolute; 179} 180 181.s1 { 182 left: 60px; 183 top: 50px; 184 animation: glow 1.1s 0.9s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 185} 186 187.s2 { 188 right: 35px; 189 bottom: 155px; 190 animation: glow 1.3s 0.5s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 191} 192 193.s3 { 194 left: calc(50% - 10px); 195 top: 75px; 196 animation: glow 1.5s 0.3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 197} 198 199.s4 { 200 left: 35px; 201 bottom: 155px; 202 animation: glow 3s 0.7s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 203} 204 205.s5 { 206 right: 60px; 207 top: 50px; 208 animation: glow 2s 1.2s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 209} 210 211.ss1 { 212 right: 15px; 213 bottom: 130px; 214 animation: glow 2s 1s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 215} 216 217.ss2 { 218 left: 15px; 219 bottom: 130px; 220 animation: glow 1s 0s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 221} 222 223.ss3 { 224 left: 35px; 225 bottom: 195px; 226 animation: glow 1.9s 0.1s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 227} 228 229.ss4 { 230 right: 35px; 231 bottom: 195px; 232 animation: glow 1.6s 0.9s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 233} 234 235.ss5 { 236 left: 100px; 237 bottom: 180px; 238 animation: glow 1s 0.5s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 239} 240 241.ss6 { 242 right: 100px; 243 bottom: 180px; 244 animation: glow 1.7s 0.6s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 245} 246 247.ss7 { 248 right: 90px; 249 top: 30px; 250 animation: glow 0.8s 0.8s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 251} 252 253.ss8 { 254 left: 90px; 255 top: 30px; 256 animation: glow 1.8s 0.3s cubic-bezier(0.15, 0.83, 0.66, 1) infinite; 257} 258 259.hill { 260 display: block; 261 width: 140%; 262 height: 100%; 263 border: 2px solid white; 264 border-radius: 50%; 265 bottom: -40%; 266 position: relative; 267 left: -20%; 268 background-size: 3%; 269 background-repeat: repeat; 270 opacity: 0.7; 271} 272 273.fire-pit { 274 width: 18px; 275 height: 30px; 276 position: absolute; 277 left: calc(50% - 9px); 278 bottom: 25px; 279 z-index: 99; 280} 281 282.fire { 283 width: 0; 284 height: 0; 285 border: 9px solid transparent; 286 border-bottom: 18px solid #ffffff; 287 position: relative; 288 top: -9px; 289} 290 291.fire:after { 292 content: ""; 293 position: absolute; 294 left: -9px; 295 top: 18px; 296 width: 0; 297 height: 0; 298 border: 9px solid transparent; 299 border-top: 9px solid #ffffff; 300} 301 302.inner-fire { 303 width: 0; 304 height: 0; 305 border: 4.5px solid transparent; 306 border-bottom: 9px solid #131516; 307 top: 4.5px; 308 position: absolute; 309 z-index: 9; 310 left: -4.5px; 311} 312 313.inner-fire:after { 314 content: ""; 315 position: absolute; 316 left: -4.5px; 317 top: 9px; 318 width: 0; 319 height: 0; 320 border: 4.5px solid transparent; 321 border-top: 6px solid #131516; 322} 323 324.log1 { 325 background-color: white; 326 height: 2px; 327 transform: rotate(35deg); 328 transform-origin: center; 329 position: relative; 330 left: -3px; 331 bottom: -1.5px; 332} 333 334.log2 { 335 background-color: white; 336 height: 2px; 337 transform: rotate(-35deg); 338 transform-origin: center; 339 left: 3px; 340 position: relative; 341 bottom: -0px; 342} 343 344.hut { 345 width: 0; 346 height: 0; 347 border-left: 38px solid transparent; 348 border-right: 38px solid transparent; 349 border-bottom: 75px solid #131516; 350 position: absolute; 351 left: calc(50% - 37.6px); 352 z-index: 11; 353 bottom: 80px; 354 transform: scale(1.3); 355} 356 357.hut hr:nth-child(1) { 358 height: 0px; 359 position: absolute; 360 width: 75px; 361 bottom: -75px; 362 left: calc(50% - 37.6px); 363} 364 365.hut hr:nth-child(2) { 366 height: 0px; 367 position: absolute; 368 width: 96px; 369 bottom: -32px; 370 left: -32px; 371 transform: rotate(63.5deg); 372 border: 1px solid white; 373} 374 375.hut hr:nth-child(3) { 376 height: 0px; 377 position: absolute; 378 width: 96px; 379 bottom: -32px; 380 right: -32px; 381 transform: rotate(-63.5deg); 382 border: 1px solid white; 383} 384 385.hut hr:nth-child(4) { 386 height: 0px; 387 position: absolute; 388 width: 60px; 389 bottom: -60px; 390 left: -30px; 391 border: 0.5px solid white; 392} 393 394.hut hr:nth-child(5) { 395 height: 0px; 396 position: absolute; 397 width: 55px; 398 bottom: -55px; 399 left: -27.5px; 400 border: 0.5px solid white; 401} 402 403.hut hr:nth-child(6) { 404 height: 0px; 405 position: absolute; 406 width: 50px; 407 bottom: -50px; 408 left: -25px; 409 border: 0.5px solid white; 410} 411 412.doorway { 413 width: 0; 414 height: 0; 415 border-left: 22px solid transparent; 416 border-right: 22px solid transparent; 417 border-bottom: 42px solid #131516; 418 position: relative; 419 left: -22px; 420 bottom: -32px; 421} 422 423.doorway::before { 424 content: ""; 425 border-left: 1px solid white; 426 width: 0px; 427 height: 48px; 428 display: inline-block; 429 transform: rotate(-27deg); 430 left: 11px; 431 position: absolute; 432 bottom: -45px; 433} 434 435.doorway::after { 436 content: ""; 437 border-left: 1px solid white; 438 width: 0px; 439 height: 48px; 440 display: inline-block; 441 transform: rotate(27deg); 442 left: -11px; 443 position: absolute; 444 bottom: -45px; 445} 446 447.doorway > hr.split { 448 height: 44px; 449 width: 1px; 450 position: absolute; 451 left: 0px; 452 top: 0; 453 display: inline-block; 454 background-color: white; 455 border: 0; 456} 457 458/* Trees */ 459.tree { 460 position: absolute; 461 width: 25px; 462 height: 48px; 463 z-index: 21; 464 transform: scale(1.3); 465} 466 467.tree .trunc { 468 height: 48px; 469 width: 1px; 470 background-color: white; 471 left: 12.5px; 472 position: absolute; 473 margin-top: 1.5px; 474} 475 476.tree .leaves { 477 height: 18px; 478 width: 18px; 479 transform: rotate(45deg); 480 border-left: 1.5px solid white; 481 border-top: 1.5px solid white; 482 border-bottom: 0; 483 border-right: 0; 484 margin-bottom: -15px; 485 margin-top: 5px; 486 left: 4px; 487 position: relative; 488} 489 490.one { 491 left: 30px; 492 bottom: 90px; 493} 494 495.two { 496 right: 30px; 497 bottom: 90px; 498} 499 500.three { 501 left: 80px; 502 bottom: 115px; 503} 504 505.four { 506 right: 80px; 507 bottom: 115px; 508} 509 510.loading-text { 511 color: white; 512 font-family: 'Inter', sans-serif; 513 display: block; 514 text-align: center; 515 padding: 20px 0 0 0; 516 opacity: 0.8; 517} 518 519@keyframes glow { 520 0% { 521 transform: scale(0); 522 } 523 524 50% { 525 transform: scale(1); 526 } 527 528 100% { 529 transform: scale(0); 530 } 531} 532 533@keyframes rotate { 534 0% { 535 transform: rotate(0); 536 } 537 538 50% { 539 transform: rotate(10deg); 540 } 541 542 100% { 543 transform: rota(0); 544 } 545}
MIT License