1p {
2  margin: 0;
3  padding: 0;
4}
5
6.main-box {
7  font-family: "Gill Sans", sans-serif;
8  background: #fff;
9  color: #285e61;
10  border: 1px solid #319795;
11  border-radius: 999px;
12  overflow: hidden;
13  z-index: -5;
14  animation: mainBoxAnim 1s ease 3.4s;
15}
16
17.box-notificaction {
18  position: relative;
19  overflow: hidden;
20  padding: 0.3em;
21  display: flex;
22  align-items: center;
23  gap: 0.6em;
24  width: 3.1em;
25  animation: boxNotificactionAnim 1s ease 1s 1 forwards;
26}
27
28.box-notificaction:after {
29  content: "";
30  background: #e6fffa;
31  position: absolute;
32  width: 0%;
33  height: 100%;
34  left: 0;
35  z-index: -1;
36  animation: boxNotificactionAfterAnim 2s ease 2s 1 forwards;
37}
38
39.svg-box {
40  background: #b2f5ea;
41  padding: 0.5em;
42  border-radius: 50%;
43}
44
45.svg-icon {
46  width: 1.5em;
47  height: 1.5em;
48  fill: #319795;
49}
50
51.main-info {
52  margin-right: 0.4em;
53  display: inline-flex;
54  flex-direction: column;
55  justify-content: center;
56  align-items: start;
57  gap: 0.2em;
58  width: 100%;
59  min-width: 16em;
60  margin-left: 2em;
61  opacity: 0%;
62  animation: mainInfoAnim 1.5s ease 1.5s 1 forwards;
63}
64
65.main-info > p {
66  font-weight: bold;
67}
68
69/* ** Animation ** */
70@keyframes mainBoxAnim {
71  0% {
72    box-shadow: none;
73  }
74
75  50% {
76    box-shadow: 0px 0px 18px #38b2ac;
77  }
78
79  100% {
80    box-shadow: none;
81  }
82}
83
84@keyframes boxNotificactionAnim {
85  0% {
86    width: 3.1em;
87  }
88
89  100% {
90    width: 15.2em;
91  }
92}
93
94@keyframes mainInfoAnim {
95  0% {
96    opacity: 0%;
97    margin-left: 2em;
98  }
99
100  100% {
101    opacity: 100%;
102    margin-left: 0;
103  }
104}
105
106@keyframes boxNotificactionAfterAnim {
107  0% {
108    width: 0;
109  }
110
111  100% {
112    width: 100%;
113  }
114}
115