1.notification {
2  height: 12em;
3  width: 19em;
4}
5
6.mirrow {
7  height: 12em;
8  width: 19em;
9  position: relative;
10  background: linear-gradient(45deg, #6720D9, #0062FF, #0085FF, #009CFF, #00AED3, #00BD9B);
11  background-size: 400% 400%;
12  animation: gradient 15s ease infinite;
13}
14
15.fragment {
16  position: absolute;
17  filter: blur(5px);
18  fill: rgba(252, 252, 252, 0.7);
19  transition: all 2s ease-in-out;
20}
21
22.mirrow:hover .fragment {
23  height: 0em;
24  width: 0em;
25  filter: blur(10px);
26}
27
28.fragment1 {
29  width: 9.5em;
30  height: 7.5em;
31}
32
33.mirrow:hover .fragment1 {
34  transform: translate(-15px, -15px);
35}
36
37.fragment2 {
38  width: 8em;
39  height: 6.5em;
40  bottom: 0px;
41  left: 0px;
42}
43
44.mirrow:hover .fragment2 {
45  transform: translate(-15px, 15px);
46}
47
48.fragment3 {
49  width: 7em;
50  height: 7em;
51  top: 0px;
52  right: 25%;
53  left: 40%;
54}
55
56.mirrow:hover .fragment3 {
57  transform: translate(0px, -15px);
58}
59
60.fragment4 {
61  width: 8em;
62  height: 7em;
63  top: 0px;
64  right: 0px
65}
66
67.mirrow:hover .fragment4 {
68  transform: translate(15px, -15px);
69}
70
71.fragment5 {
72  width: 12em;
73  height: 6em;
74  bottom: 0px;
75  right: 0px;
76}
77
78.mirrow:hover .fragment5 {
79  transform: translate(15px, 15px);
80}
81
82.level {
83  display: flex;
84  flex-direction: column;
85  justify-content: center;
86  align-items: center;
87  height: 100%;
88}
89
90.btn_block {
91  display: flex;
92}
93
94.level_text {
95  font-weight: bold;
96  font-size: 22px;
97  color: #fff;
98  margin: 0px 0px 5px 0px;
99}
100
101.level_sub_text {
102  font-size: 13px;
103  color: #fff;
104  margin: 0px 0px 10px 0px;
105}
106
107.btn {
108  background: transparent;
109  border: 1px solid #fff;
110  border-radius: 14px;
111  cursor: pointer;
112  margin: 0px 2px;
113  color: #fff;
114  font-size: 12px;
115  transition: all 1s ease-in-out;
116  padding: 2px 6px;
117}
118
119.btn:hover {
120  background: #fff;
121  color: #000;
122}
123
124@keyframes gradient {
125  0% {
126    background-position: 0% 50%;
127  }
128
129  50% {
130    background-position: 100% 50%;
131  }
132
133  100% {
134    background-position: 0% 50%;
135  }
136}
137
138.star {
139  position: absolute;
140  height: 28px;
141  width: 28px;
142  fill: yellow;
143}
144
145.star1 {
146  animation: Orbita1 15s linear infinite;
147}
148
149@keyframes Orbita1 {
150  from {
151    transform: rotate(0deg) translateX(80px) rotate(0deg);
152  }
153
154  to {
155    transform: rotate(360deg) translateX(80px) rotate(-360deg);
156  }
157}
158
159.star2 {
160  animation: Orbita2 15s linear infinite;
161}
162
163@keyframes Orbita2 {
164  from {
165    transform: rotate(50deg) translateX(80px) rotate(50deg);
166  }
167
168  to {
169    transform: rotate(410deg) translateX(80px) rotate(-410deg);
170  }
171}
172
173.star3 {
174  animation: Orbita3 15s linear infinite;
175}
176
177@keyframes Orbita3 {
178  from {
179    transform: rotate(100deg) translateX(80px) rotate(100deg);
180  }
181
182  to {
183    transform: rotate(460deg) translateX(80px) rotate(-460deg);
184  }
185}
186
187.star4 {
188  animation: Orbita4 15s linear infinite;
189}
190
191@keyframes Orbita4 {
192  from {
193    transform: rotate(150deg) translateX(80px) rotate(150deg);
194  }
195
196  to {
197    transform: rotate(510deg) translateX(80px) rotate(-510deg);
198  }
199}
200
201.star5 {
202  animation: Orbita5 15s linear infinite;
203}
204
205@keyframes Orbita5 {
206  from {
207    transform: rotate(200deg) translateX(80px) rotate(200deg);
208  }
209
210  to {
211    transform: rotate(560deg) translateX(80px) rotate(-560deg);
212  }
213}
214
215.star6 {
216  animation: Orbita6 15s linear infinite;
217}
218
219@keyframes Orbita6 {
220  from {
221    transform: rotate(250deg) translateX(80px) rotate(250deg);
222  }
223
224  to {
225    transform: rotate(610deg) translateX(80px) rotate(-610deg);
226  }
227}
228
229.star7 {
230  animation: Orbita7 15s linear infinite;
231}
232
233@keyframes Orbita7 {
234  from {
235    transform: rotate(310deg) translateX(80px) rotate(310deg);
236  }
237
238  to {
239    transform: rotate(670deg) translateX(80px) rotate(-670deg);
240  }
241}