1.notification {
2  width: 255px;
3  height: 60px;
4  background: white;
5  border-radius: 25px;
6  display: flex;
7  justify-content: space-evenly;
8  align-items: center;
9}
10
11.icon {
12  height: 40px;
13  width: 40px;
14  border-radius: 20px;
15  background-color: rgb(236, 236, 236);
16  display: flex;
17  justify-content: center;
18  align-items: center;
19  padding-top: 2px;
20}
21
22.message-container {
23  display: flex;
24  flex-direction: column;
25}
26
27.title {
28  padding: 2px;
29  text-transform: uppercase;
30  color: black;
31  font-weight: 600;
32}
33
34.message {
35  padding: 2px;
36  color: black;
37  font-size: small;
38}
39
40.gradient-border {
41  --borderSize: 3px;
42  position: relative;
43  border-radius: var(--borderSize);
44}
45
46.gradient-border:after {
47  content: '';
48  position: absolute;
49  top: calc(-1 * var(--borderSize));
50  left: calc(-1 * var(--borderSize));
51  height: calc(100% + var(--borderSize) * 2);
52  width: calc(100% + var(--borderSize) * 2);
53  background: linear-gradient(75deg, #E50000, #FF8D00, #FFEE00, #008121, #004CFF, #760188);
54  border-radius: calc(2 * var(--borderSize));
55  z-index: -1;
56  animation: gradientAnimation 4s ease alternate infinite;
57  background-size: 300% 300%;
58}
59
60@keyframes gradientAnimation {
61  0% {
62    background-position: 0% 50%;
63  }
64
65  50% {
66    background-position: 100% 50%;
67  }
68
69  100% {
70    background-position: 0% 50%;
71  }
72}