Notification by StealthWorm

This notification was created for CSS Game UI Challenge

Posted by

@StealthWorm

Theme:

Dark

#notification

#212121

353 views

Add prefixes

1.notification {
2  display: flex;
3  flex-direction: column;
4  position: relative;
5  width: 300px;
6  height: 200px;
7  border-radius: 0.3rem;
8  justify-content: center;
9  align-items: center;
10  background: rgb(0, 0, 0);
11  transition: all 3s ease;
12}
13
14.text {
15  opacity: 0;
16  display: flex;
17  flex-direction: column;
18  position: absolute;
19  width: 300px;
20  height: 200px;
21  justify-content: space-between;
22  align-items: center;
23  padding: 0.5rem;
24  top: 1.5rem;
25}
26
27strong {
28  background-size: 300% 300%;
29  background-clip: text;
30  -webkit-background-clip: text;
31  color: transparent;
32  background-image: linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);
33  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
34  text-shadow: 0 0 5px rgba(255, 255, 255, 0.438);
35  animation: gradient 5s ease infinite;
36}
37
38.notification:hover .text {
39  opacity: 1;
40  transition: 1s;
41  transition-delay: 3s;
42  transform: translateY(-1.5rem);
43}
44
45.notification:hover .crystal {
46  animation: pulse_crystal 1s ease;
47  transition: 1s;
48  transform: scale(1.3);
49  box-shadow: 0 0 5px rgb(255, 255, 255);
50  background: conic-gradient(#3fb2ff 0%, #261caf 45%, #44d2eb 50%, #fdfdfd 100%);
51  clip-path: polygon(50% 0, 84% 30%, 84% 70%, 50% 100%, 15% 70%, 15% 30%);
52}
53
54.notification:hover .crystal-border {
55  transition: 1s;
56  clip-path: polygon(50% 0, 90% 30%, 90% 70%, 50% 100%, 10% 70%, 10% 30%);
57}
58
59.crystal-border {
60  z-index: 3;
61  display: flex;
62  position: absolute;
63  width: 45px;
64  height: 45px;
65  background: #000000;
66  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
67}
68
69.crystal {
70  inset: 12px;
71  position: absolute;
72  width: 20px;
73  height: 20px;
74  background: conic-gradient(#ca22b9 0%, #792e83 45%, #ff26e9 50%, #ffffff 100%);
75  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
76  transition: all 1s ease;
77}
78
79.line-center-border {
80  z-index: 2;
81  display: flex;
82  position: absolute;
83  width: 10rem;
84  height: 10rem;
85  align-items: center;
86  justify-content: center;
87  background: #000000;
88  clip-path: polygon(50% 20%, 60% 18%, 60% 80%, 50% 90%, 40% 80%, 40% 18%);
89}
90
91.line-center {
92  display: flex;
93  position: absolute;
94  margin: 4px;
95  width: 3rem;
96  top: 1.8rem;
97  height: 7.7rem;
98  transition: 2s;
99  opacity: 0;
100  background: linear-gradient(90deg, #796f1c 50%, #c7b82f 50%);
101  clip-path: polygon(50% 5%, 60% 8%, 60% 87%, 50% 90%, 40% 87%, 40% 8%);
102}
103
104.notification:hover .line-center {
105  z-index: 1;
106  opacity: 1;
107}
108
109.progress-ring {
110  z-index: 2;
111  position: absolute;
112  top: 22%;
113  stroke-dasharray: 135 120%;
114  stroke: #113736;
115  border-radius: 50%;
116  transform: rotate(-12deg);
117  transition: all 4s ease;
118}
119
120.notification:hover .progress-ring__blue {
121  transition: all 2s ease;
122  stroke-dasharray: 13 5;
123}
124
125.progress-ring-m7 {
126  z-index: 1;
127  visibility: hidden;
128  width: 7rem;
129  height: 5.5rem;
130  top: 28%;
131  background: transparent;
132  position: absolute;
133  border-radius: 50%;
134  border-style: double;
135  border: 8px solid #b9a80f;
136  border-bottom-color: transparent;
137  border-top-color: transparent;
138}
139
140.progress-ring-m7-inner {
141  z-index: 1;
142  visibility: hidden;
143  display: flex;
144  box-sizing: content-box;
145  width: 6rem;
146  height: 4.5rem;
147  background: transparent;
148  position: absolute;
149  border-radius: 50%;
150  border-style: dashed;
151  border: 6px dashed #113736;
152  border-bottom-color: transparent;
153  border-top-color: transparent;
154}
155
156.notification:hover .progress-ring-m7 {
157  visibility: visible;
158  animation: pulse_m7 1.5s ease-in-out;
159}
160
161.notification:hover .progress-ring-m7-inner {
162  visibility: visible;
163  transition: all 3s ease;
164  animation: pulse_m7 1.5s ease-in-out;
165}
166
167.progress-ring-two:nth-of-type(2) {
168  z-index: 1;
169  position: absolute;
170  top: 20%;
171  stroke-dasharray: 140 100;
172  stroke: #b9a80f;
173  border-radius: 50%;
174  transform: rotate(27deg);
175}
176
177.progress-ring-two:nth-of-type(3) {
178  z-index: 1;
179  position: absolute;
180  top: 22%;
181  stroke-dasharray: 140 100;
182  stroke: #b9a80f;
183  border-radius: 50%;
184  transform: rotate(-20deg);
185}
186
187.notification:hover svg {
188  animation: pulse_svg 3s ease;
189}
190
191.wings {
192  z-index: 1;
193  position: absolute;
194  top: 20%;
195  width: 10rem;
196  height: 8rem;
197  clip-path: polygon(
198  0% 0%, 28% 27%, 32% 31%, 27% 40%, 25% 50%, 
199  30% 60%, 47% 67%, 45% 67%, 57% 66%, 64% 64%, 
200  70% 59%, 70% 46%, 70% 46%, 75% 40%, 
201
202  70% 26%, 100% 0%, 100% 10%, 95% 14%,
203
204  95% 19%, 90% 23%, 90% 29%, 69% 50%, 
205  72% 56%, 69.38% 62%, 65% 65%, 57.5% 66%, 50% 67%, 41% 67%, 
206  32% 64%, 
207  
208  28% 49%, 10% 30%, 10% 22%, 5% 18%, 5% 13%, 0% 9%
209  );
210  background-color: #b9a80f;
211  transition: all px2s ease;
212}
213
214.notification:hover .wings {
215  transform: scale(1.2);
216  animation: pulse_wing 3s ease;
217}
218
219.notification:hover .shield {
220  animation: pulse 2s ease;
221}
222
223.notification:hover .shield-bottom-left {
224  left: 3.5rem;
225}
226
227.notification:hover .shield-bottom-right {
228  left: 6.2rem;
229}
230
231.shield {
232  z-index: 4;
233  display: flex;
234  position: absolute;
235  width: fit-content;
236  top: 19%;
237  left: 17%;
238  flex-direction: column;
239  gap: 3rem;
240  transition: all 2s ease;
241}
242
243.shield-up, 
244.shield-down {
245  display: flex;
246  position: relative;
247}
248
249.shield-bottom-left {
250  z-index: 1;
251  display: flex;
252  position: absolute;
253  width: 3.4rem;
254  height: 5rem;
255  left: 4rem;
256  clip-path: polygon(22% 12%, 60% 36%, 60% 90%, 22% 64%);
257  background-color: #696115;
258}
259
260.shield-bottom-right {
261  z-index: 1;
262  display: flex;
263  position: absolute;
264  width: 3.4rem;
265  height: 5rem;
266  left: 5.7rem;
267  clip-path: polygon(62% 12%, 20% 36%, 20% 90%, 62% 64%);
268  background-color: #696115;
269}
270
271.shield-bottom-right-inside {
272  clip-path: polygon(62% 12%, 20% 36%, 20% 90%, 62% 64%);
273}
274
275.shield-bottom-left-inside {
276  clip-path: polygon(22% 12%, 60% 36%, 60% 90%, 22% 64%);
277}
278
279.shield-bottom-left-inside,
280.shield-bottom-right-inside {
281  position: absolute;
282  background-color: #b9a80f;
283  inset: 5px;
284}
285
286.shield-top-left {
287  display: flex;
288  position: absolute;
289  width: 3.4rem;
290  height: 4rem;
291  left: 4rem;
292  clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 72%, 40% 86%, 18% 70%, 18% 74%, 22% 65%, 25% 55%, 22% 41%, 18% 31%, 10% 20%);
293  background-color: #696115;
294}
295
296.shield-top-right {
297  display: flex;
298  position: absolute;
299  width: 3.4rem;
300  height: 4rem;
301  left: 5rem;
302  clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 60% 85%, 80% 70%, 76% 60%, 75% 55%, 75% 55%, 78% 41%, 82% 31%, 90% 20%);
303  background-color: #696115;
304}
305
306.notification:hover .shield-top-left {
307  left: 3.6rem;
308  clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 70%, 45% 78% , 45% 95%, 15% 70%, 15% 68%, 22% 66%, 25% 55%, 22% 41%, 18% 31%, 10% 20%);
309}
310
311.notification:hover .shield-top-right {
312  left: 5.4rem;
313  clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 55% 78%, 55% 95%, 84% 75%, 78% 68%, 79% 69%, 75% 55%, 78% 41%, 82% 31%, 90% 20%);
314}
315
316.notification:hover .shield-top-right-inside {
317  clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 55% 78%, 55% 95%, 84% 75%, 78% 68%, 79% 69%, 75% 55%, 78% 41%, 82% 31%, 90% 20%);
318}
319
320.notification:hover .shield-top-left-inside {
321  clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 70%, 45% 78% , 45% 95%, 15% 70%, 15% 68%, 22% 66%, 25% 55%, 22% 41%, 18% 31%, 10% 20%);
322}
323
324.shield-top-right-inside {
325  clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 60% 85%, 80% 70%, 76% 60%, 75% 55%, 75% 55%, 78% 41%, 82% 31%, 90% 20%);
326}
327
328.shield-top-left-inside {
329  clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 72%, 40% 86%, 18% 70%, 18% 74%, 22% 65%, 25% 55%, 22% 41%, 18% 31%, 10% 20%);
330}
331
332.shield-top-left-inside,
333.shield-top-right-inside {
334  position: absolute;
335  background-color: #b9a80f;
336  inset: 4px;
337}
338
339@keyframes pulse {
340  0% {
341    transform: scale(1);
342  }
343
344  70% {
345    transform: scale(1.3);
346    left: 7%;
347    filter: brightness(150%);
348  }
349
350  100% {
351    transform: scale(1);
352  }
353}
354
355@keyframes pulse_wing {
356  0% {
357    transform: scale(1);
358  }
359
360  70% {
361    transform: scale(1.3);
362    filter: brightness(150%);
363  }
364
365  100% {
366    transform: scale(1.2);
367    filter: brightness(100%);
368  }
369}
370
371@keyframes pulse_svg {
372  0% {
373    filter: brightness(100%);
374  }
375
376  70% {
377    filter: brightness(150%);
378  }
379
380  100% {
381    filter: brightness(100%);
382  }
383}
384
385@keyframes pulse_m7 {
386  0% {
387    filter: brightness(100%);
388    visibility: hidden;
389    transform: scale(1);
390  }
391
392  70% {
393    filter: brightness(150%);
394    visibility: visible;
395    transform: scale(1.3);
396  }
397
398  100% {
399    filter: brightness(100%);
400    visibility: visible;
401    transform: scale(1);
402  }
403}
404
405@keyframes pulse_crystal {
406  0% {
407    transform: scale(1);
408    transform: rotateY(3rad);
409  }
410
411  70% {
412    transform: scale(1.5);
413    filter: brightness(180%);
414    transform: rotateY(10rad);
415  }
416
417  100% {
418    transform: scale(1.3);
419    filter: brightness(100%);
420    transform: rotateY(80rad);
421  }
422}
423
424@keyframes show {
425  0% {
426    visibility: hidden;
427    transform: translateY(0);
428  }
429
430  100% {
431    visibility: visible;
432    transform: translateY(5rem);
433  }
434}
435
436@keyframes gradient {
437  0% {
438    background-position: 0% 50%;
439  }
440
441  50% {
442    background-position: 100% 50%;
443  }
444
445  100% {
446    background-position: 0% 50%;
447  }
448}
449

.notification {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 300px;
  height: 200px;
  border-radius: 0.3rem;
  justify-content: center;
  align-items: center;
  background: rgb(0, 0, 0);
  transition: all 3s ease;
}

.text {
  opacity: 0;
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 300px;
  height: 200px;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  top: 1.5rem;
}

strong {
  background-size: 300% 300%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(137.48deg, #ffdb3b 10%,#FE53BB 45%, #8F51EA 67%, #0044ff 87%);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.438);
  animation: gradient 5s ease infinite;
}

.notification:hover .text {
  opacity: 1;
  transition: 1s;
  transition-delay: 3s;
  transform: translateY(-1.5rem);
}

.notification:hover .crystal {
  animation: pulse_crystal 1s ease;
  transition: 1s;
  transform: scale(1.3);
  box-shadow: 0 0 5px rgb(255, 255, 255);
  background: conic-gradient(#3fb2ff 0%, #261caf 45%, #44d2eb 50%, #fdfdfd 100%);
  clip-path: polygon(50% 0, 84% 30%, 84% 70%, 50% 100%, 15% 70%, 15% 30%);
}

.notification:hover .crystal-border {
  transition: 1s;
  clip-path: polygon(50% 0, 90% 30%, 90% 70%, 50% 100%, 10% 70%, 10% 30%);
}

.crystal-border {
  z-index: 3;
  display: flex;
  position: absolute;
  width: 45px;
  height: 45px;
  background: #000000;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.crystal {
  inset: 12px;
  position: absolute;
  width: 20px;
  height: 20px;
  background: conic-gradient(#ca22b9 0%, #792e83 45%, #ff26e9 50%, #ffffff 100%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  transition: all 1s ease;
}

.line-center-border {
  z-index: 2;
  display: flex;
  position: absolute;
  width: 10rem;
  height: 10rem;
  align-items: center;
  justify-content: center;
  background: #000000;
  clip-path: polygon(50% 20%, 60% 18%, 60% 80%, 50% 90%, 40% 80%, 40% 18%);
}

.line-center {
  display: flex;
  position: absolute;
  margin: 4px;
  width: 3rem;
  top: 1.8rem;
  height: 7.7rem;
  transition: 2s;
  opacity: 0;
  background: linear-gradient(90deg, #796f1c 50%, #c7b82f 50%);
  clip-path: polygon(50% 5%, 60% 8%, 60% 87%, 50% 90%, 40% 87%, 40% 8%);
}

.notification:hover .line-center {
  z-index: 1;
  opacity: 1;
}

.progress-ring {
  z-index: 2;
  position: absolute;
  top: 22%;
  stroke-dasharray: 135 120%;
  stroke: #113736;
  border-radius: 50%;
  transform: rotate(-12deg);
  transition: all 4s ease;
}

.notification:hover .progress-ring__blue {
  transition: all 2s ease;
  stroke-dasharray: 13 5;
}

.progress-ring-m7 {
  z-index: 1;
  visibility: hidden;
  width: 7rem;
  height: 5.5rem;
  top: 28%;
  background: transparent;
  position: absolute;
  border-radius: 50%;
  border-style: double;
  border: 8px solid #b9a80f;
  border-bottom-color: transparent;
  border-top-color: transparent;
}

.progress-ring-m7-inner {
  z-index: 1;
  visibility: hidden;
  display: flex;
  box-sizing: content-box;
  width: 6rem;
  height: 4.5rem;
  background: transparent;
  position: absolute;
  border-radius: 50%;
  border-style: dashed;
  border: 6px dashed #113736;
  border-bottom-color: transparent;
  border-top-color: transparent;
}

.notification:hover .progress-ring-m7 {
  visibility: visible;
  animation: pulse_m7 1.5s ease-in-out;
}

.notification:hover .progress-ring-m7-inner {
  visibility: visible;
  transition: all 3s ease;
  animation: pulse_m7 1.5s ease-in-out;
}

.progress-ring-two:nth-of-type(2) {
  z-index: 1;
  position: absolute;
  top: 20%;
  stroke-dasharray: 140 100;
  stroke: #b9a80f;
  border-radius: 50%;
  transform: rotate(27deg);
}

.progress-ring-two:nth-of-type(3) {
  z-index: 1;
  position: absolute;
  top: 22%;
  stroke-dasharray: 140 100;
  stroke: #b9a80f;
  border-radius: 50%;
  transform: rotate(-20deg);
}

.notification:hover svg {
  animation: pulse_svg 3s ease;
}

.wings {
  z-index: 1;
  position: absolute;
  top: 20%;
  width: 10rem;
  height: 8rem;
  clip-path: polygon(
  0% 0%, 28% 27%, 32% 31%, 27% 40%, 25% 50%, 
  30% 60%, 47% 67%, 45% 67%, 57% 66%, 64% 64%, 
  70% 59%, 70% 46%, 70% 46%, 75% 40%, 

  70% 26%, 100% 0%, 100% 10%, 95% 14%,

  95% 19%, 90% 23%, 90% 29%, 69% 50%, 
  72% 56%, 69.38% 62%, 65% 65%, 57.5% 66%, 50% 67%, 41% 67%, 
  32% 64%, 
  
  28% 49%, 10% 30%, 10% 22%, 5% 18%, 5% 13%, 0% 9%
  );
  background-color: #b9a80f;
  transition: all px2s ease;
}

.notification:hover .wings {
  transform: scale(1.2);
  animation: pulse_wing 3s ease;
}

.notification:hover .shield {
  animation: pulse 2s ease;
}

.notification:hover .shield-bottom-left {
  left: 3.5rem;
}

.notification:hover .shield-bottom-right {
  left: 6.2rem;
}

.shield {
  z-index: 4;
  display: flex;
  position: absolute;
  width: fit-content;
  top: 19%;
  left: 17%;
  flex-direction: column;
  gap: 3rem;
  transition: all 2s ease;
}

.shield-up, 
.shield-down {
  display: flex;
  position: relative;
}

.shield-bottom-left {
  z-index: 1;
  display: flex;
  position: absolute;
  width: 3.4rem;
  height: 5rem;
  left: 4rem;
  clip-path: polygon(22% 12%, 60% 36%, 60% 90%, 22% 64%);
  background-color: #696115;
}

.shield-bottom-right {
  z-index: 1;
  display: flex;
  position: absolute;
  width: 3.4rem;
  height: 5rem;
  left: 5.7rem;
  clip-path: polygon(62% 12%, 20% 36%, 20% 90%, 62% 64%);
  background-color: #696115;
}

.shield-bottom-right-inside {
  clip-path: polygon(62% 12%, 20% 36%, 20% 90%, 62% 64%);
}

.shield-bottom-left-inside {
  clip-path: polygon(22% 12%, 60% 36%, 60% 90%, 22% 64%);
}

.shield-bottom-left-inside,
.shield-bottom-right-inside {
  position: absolute;
  background-color: #b9a80f;
  inset: 5px;
}

.shield-top-left {
  display: flex;
  position: absolute;
  width: 3.4rem;
  height: 4rem;
  left: 4rem;
  clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 72%, 40% 86%, 18% 70%, 18% 74%, 22% 65%, 25% 55%, 22% 41%, 18% 31%, 10% 20%);
  background-color: #696115;
}

.shield-top-right {
  display: flex;
  position: absolute;
  width: 3.4rem;
  height: 4rem;
  left: 5rem;
  clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 60% 85%, 80% 70%, 76% 60%, 75% 55%, 75% 55%, 78% 41%, 82% 31%, 90% 20%);
  background-color: #696115;
}

.notification:hover .shield-top-left {
  left: 3.6rem;
  clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 70%, 45% 78% , 45% 95%, 15% 70%, 15% 68%, 22% 66%, 25% 55%, 22% 41%, 18% 31%, 10% 20%);
}

.notification:hover .shield-top-right {
  left: 5.4rem;
  clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 55% 78%, 55% 95%, 84% 75%, 78% 68%, 79% 69%, 75% 55%, 78% 41%, 82% 31%, 90% 20%);
}

.notification:hover .shield-top-right-inside {
  clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 55% 78%, 55% 95%, 84% 75%, 78% 68%, 79% 69%, 75% 55%, 78% 41%, 82% 31%, 90% 20%);
}

.notification:hover .shield-top-left-inside {
  clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 70%, 45% 78% , 45% 95%, 15% 70%, 15% 68%, 22% 66%, 25% 55%, 22% 41%, 18% 31%, 10% 20%);
}

.shield-top-right-inside {
  clip-path: polygon(100% 10%, 90% 0%, 42% 20%, 42% 70%, 60% 85%, 80% 70%, 76% 60%, 75% 55%, 75% 55%, 78% 41%, 82% 31%, 90% 20%);
}

.shield-top-left-inside {
  clip-path: polygon(1% 10%, 10% 0%, 58% 20%, 58% 72%, 40% 86%, 18% 70%, 18% 74%, 22% 65%, 25% 55%, 22% 41%, 18% 31%, 10% 20%);
}

.shield-top-left-inside,
.shield-top-right-inside {
  position: absolute;
  background-color: #b9a80f;
  inset: 4px;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  70% {
    transform: scale(1.3);
    left: 7%;
    filter: brightness(150%);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes pulse_wing {
  0% {
    transform: scale(1);
  }

  70% {
    transform: scale(1.3);
    filter: brightness(150%);
  }

  100% {
    transform: scale(1.2);
    filter: brightness(100%);
  }
}

@keyframes pulse_svg {
  0% {
    filter: brightness(100%);
  }

  70% {
    filter: brightness(150%);
  }

  100% {
    filter: brightness(100%);
  }
}

@keyframes pulse_m7 {
  0% {
    filter: brightness(100%);
    visibility: hidden;
    transform: scale(1);
  }

  70% {
    filter: brightness(150%);
    visibility: visible;
    transform: scale(1.3);
  }

  100% {
    filter: brightness(100%);
    visibility: visible;
    transform: scale(1);
  }
}

@keyframes pulse_crystal {
  0% {
    transform: scale(1);
    transform: rotateY(3rad);
  }

  70% {
    transform: scale(1.5);
    filter: brightness(180%);
    transform: rotateY(10rad);
  }

  100% {
    transform: scale(1.3);
    filter: brightness(100%);
    transform: rotateY(80rad);
  }
}

@keyframes show {
  0% {
    visibility: hidden;
    transform: translateY(0);
  }

  100% {
    visibility: visible;
    transform: translateY(5rem);
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

StealthWorm

thierry

Always adapting. The stars are just the beginning of another journey!

MIT License

Copyright - 2023 StealthWorm (thierry) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.