1.notification {
2  --bg-color: #fff;
3  --text-color: #1c1f2b;
4  --highlight-color: #fc9a32;
5  --button-color: #3d3f4e;
6  --button-color-hover: #27282f;
7  position: relative;
8  width: 300px;
9  height: 100px;
10  background-color: var(--bg-color);
11  border-radius: 10px;
12  -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
13  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
14  overflow: hidden;
15}
16
17@media (prefers-color-scheme: dark) {
18  .notification {
19    --bg-color: #1c1f2b;
20    --text-color: #fff;
21    --highlight-color: #fc9a32;
22    --button-color: #3d3f4e;
23    --button-color-hover: #27282f;
24  }
25}
26
27.notification-top {
28  position: absolute;
29  top: 0;
30  left: 0;
31  width: 100%;
32  height: 50%;
33  background-color: var(--highlight-color);
34  display: -webkit-box;
35  display: -ms-flexbox;
36  display: flex;
37  -webkit-box-align: center;
38  -ms-flex-align: center;
39  align-items: center;
40  -webkit-box-pack: center;
41  -ms-flex-pack: center;
42  justify-content: center;
43  -webkit-transform: translateY(-100%);
44  -ms-transform: translateY(-100%);
45  transform: translateY(-100%);
46  -webkit-animation: slide-down 1s ease-out forwards;
47  animation: slide-down 1s ease-out forwards;
48}
49
50.notification-bottom {
51  position: absolute;
52  bottom: 0;
53  left: 0;
54  width: 100%;
55  height: 50%;
56  background-color: var(--bg-color);
57  display: -webkit-box;
58  display: -ms-flexbox;
59  display: flex;
60  -webkit-box-align: center;
61  -ms-flex-align: center;
62  align-items: center;
63  -webkit-box-pack: justify;
64  -ms-flex-pack: justify;
65  justify-content: space-between;
66  padding: 20px;
67}
68
69.level-up {
70  color: var(--text-color);
71  font-size: 24px;
72  font-weight: bold;
73  text-transform: uppercase;
74  letter-spacing: 2px;
75  -webkit-animation: rotate-text 1s ease-in-out;
76  animation: rotate-text 1s ease-in-out;
77}
78
79.level {
80  color: var(--text-color);
81  font-size: 20px;
82  font-weight: bold;
83  margin-right: 10px;
84}
85
86.next-level-button {
87  background-color: var(--button-color);
88  color: var(--text-color);
89  border: none;
90  border-radius: 5px;
91  padding: 8px 16px;
92  cursor: pointer;
93  -webkit-transition: background-color 0.3s ease-out;
94  transition: background-color 0.3s ease-out;
95}
96
97.next-level-button {
98  background-color: #efefef;
99  color: #000;
100  font-weight: 600;
101  padding: 5px 10px;
102  border: none;
103  border-radius: 5px;
104  -webkit-transition: all 0.3s ease-in-out;
105  transition: all 0.3s ease-in-out;
106  -webkit-box-shadow: 0px 0px 10px #888888;
107  box-shadow: 0px 0px 10px #888888;
108}
109
110@-webkit-keyframes slide-down {
111  from {
112    -webkit-transform: translateY(-100%);
113    transform: translateY(-100%);
114  }
115
116  to {
117    -webkit-transform: translateY(0);
118    transform: translateY(0);
119  }
120}
121
122@keyframes slide-down {
123  from {
124    -webkit-transform: translateY(-100%);
125    transform: translateY(-100%);
126  }
127
128  to {
129    -webkit-transform: translateY(0);
130    transform: translateY(0);
131  }
132}
133
134@-webkit-keyframes rotate-text {
135  0% {
136    -webkit-transform: rotateX(90deg);
137    transform: rotateX(90deg);
138    opacity: 0;
139  }
140
141  100% {
142    -webkit-transform: rotateX(0);
143    transform: rotateX(0);
144    opacity: 1;
145  }
146}
147
148@keyframes rotate-text {
149  0% {
150    -webkit-transform: rotateX(90deg);
151    transform: rotateX(90deg);
152    opacity: 0;
153  }
154
155  100% {
156    -webkit-transform: rotateX(0);
157    transform: rotateX(0);
158    opacity: 1;
159  }
160}
161
162.next-level-button:hover {
163  background-color: aqua;
164  color: #000;
165  -webkit-transform: scale(1.1);
166  -ms-transform: scale(1.1);
167  transform: scale(1.1);
168  -webkit-box-shadow: 0px 0px 15px #888888;
169  box-shadow: 0px 0px 15px #888888;
170}
171
172.notification {
173  background-color: #1e2b3c;
174  color: #c3daf6;
175}
176
177.notification:hover {
178  background-color: #c3daf6;
179  color: #1e2b3c;
180}
181
182.next-level-button:hover {
183  background-color: #1e2b3c;
184  color: #c3daf6;
185}
186
187/* Light Mode */
188.notification {
189  background-color: #c3daf6;
190  color: #1e2b3c;
191}
192
193.notification:hover {
194  background-color: #1e2b3c;
195  color: #c3daf6;
196}
197
198.next-level-button:hover {
199  background-color: #c3daf6;
200  color: #1e2b3c;
201}