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}