1/*Mijail Villegas - Bear
2Me gusta  la estética retro de los level ups*/
3
4.level-up-content {
5  display: grid;
6  width: 200px;
7  height: 70px;
8  padding: 10px;
9  align-items: center;
10  justify-items: center;
11  align-content: center;
12  font-weight: bold;
13  font-family: "Lucida Console", "Courier New", monospace;
14  margin: auto;
15}
16
17.progress-bar {
18  background-color: #ddd;
19  height: 20px;
20  margin: 10px 0;
21  overflow: hidden;
22  width: 100%;
23  display: flex;
24  text-align: center;
25  font-size: 1em;
26}
27
28.progress {
29  animation: progress-animation 2s ease-out forwards;
30  background-color: #000000;
31  height: 100%;
32  width: 0%;
33  z-index: 1;
34}
35
36.progress::before {
37  content: "";
38  display: block;
39  color: #ddd;
40  padding-top: 3px;
41  height: 20px;
42  animation: progress-xp 2.1s ease-out forwards;
43}
44
45.progress::after {
46  content: "+220xp";
47  display: block;
48  color: rgb(0, 255, 0);
49  position: absolute;
50  padding-top: 3px;
51  z-index: 999;
52  opacity: 0;
53  animation: add-xp 2s cubic-bezier(0, 0.92, 0.05, 1.07) forwards;
54}
55
56.span-content::before {
57  display: block;
58  color: #ddd;
59  margin-left: auto;
60  height: 20px;
61}
62
63.level-up {
64  color: white;
65  display: flex;
66  align-items: center;
67  justify-content: center;
68  width: 100%;
69  height: 100%;
70}
71
72.level-up .leyend {
73  font-size: 1.2em;
74  animation: level-up-animation 1s cubic-bezier(0, 0.62, 0, 0.97) forwards 2s;
75  opacity: 0;
76  transform: translateY(100%);
77  filter: drop-shadow(4px 4px 0px black);
78}
79
80.level-up-content:hover {
81  cursor: pointer;
82}
83
84.level-up-content:hover .leyend {
85  opacity: 1;
86  transform: translateY(100%);
87  background: #a11a1a;
88  animation: grow-up 1s ease-in-out forwards infinite;
89}
90
91.leyend::before {
92  content: "lvl 5";
93  display: block;
94  color: #ddd;
95  padding-top: 3px;
96  font-size: 0.5em;
97  height: 10px;
98}
99
100.level-up-content .world {
101  font-weight: 900;
102  animation: blink 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
103}
104
105@keyframes add-xp {
106  0% {
107    opacity: 0;
108    transform: translateY(-20%);
109  }
110
111  60% {
112    opacity: 1;
113  }
114
115  to {
116    transform: translateY(-230%);
117    opacity: 0;
118  }
119}
120
121@keyframes blink {
122  0% {
123    color: black;
124  }
125
126  to {
127    color: white;
128  }
129}
130
131@keyframes progress-animation {
132  0% {
133    width: 0%;
134  }
135
136  65% {
137    width: 100%;
138  }
139
140  100% {
141    width: 100%;
142  }
143}
144
145@keyframes progress-xp {
146  0% {
147    content: "0xp";
148  }
149
150  5% {
151    content: "+5xp";
152  }
153
154  10% {
155    content: "+10xp";
156  }
157
158  15% {
159    content: "+35xp";
160  }
161
162  22% {
163    content: "+52xp";
164  }
165
166  25% {
167    content: "+75xp";
168  }
169
170  30% {
171    content: "+90xp";
172  }
173
174  38% {
175    content: "+118xp";
176  }
177
178  40% {
179    content: "+162xp";
180  }
181
182  45% {
183    content: "+195xp";
184  }
185
186  50% {
187    content: "+200xp";
188  }
189
190  65% {
191    content: "+220xp";
192  }
193
194  80% {
195    content: "+220xp";
196  }
197
198  100% {
199    content: "NEW LEVEL!";
200  }
201}
202
203@keyframes level-up-animation {
204  0% {
205    opacity: 0;
206    transform: translateY(100%);
207  }
208
209  100% {
210    opacity: 1;
211    transform: translateY(0%);
212    background: #a11a1a;
213  }
214}
215
216@keyframes grow-up {
217  0% {
218    transform: scale(110%);
219  }
220
221  12% {
222    transform: scale(90%);
223  }
224
225  25% {
226    transform: scale(100%);
227  }
228
229  37% {
230    transform: scale(115%);
231  }
232
233  50% {
234    transform: scale(110%);
235  }
236
237  75% {
238    transform: scale(130%);
239  }
240
241  to {
242    transform: scale(115%);
243  }
244}
245
246/* you can delete this part */
247.suggestion {
248  font-size: 0.7em;
249  position: absolute;
250  color: #9b9b9b;
251  display: block;
252  top: 80%;
253  left: 60%;
254}
255/**/