1.card {
2  position: relative;
3  background-color: #30344c;
4  padding: 1em;
5  z-index: 5;
6  box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.3);
7  border-radius: 10px;
8  max-width: 300px;
9  transition: 200ms ease-in-out;
10}
11
12.username {
13  color: #C6E1ED;
14  font-size: 0.85em;
15  font-weight: 600;
16}
17
18.body {
19  display: flex;
20  flex-direction: column;
21}
22
23.body .text {
24  margin: 0 10px 0 0;
25  white-space: pre-line;
26  color: #c0c3d7;
27  font-weight: 400;
28  line-height: 1.5;
29  margin-bottom: 4px;
30}
31
32.footer {
33  position: relative;
34  width: 100%;
35  color: #9fa4aa;
36  font-size: 12px;
37  display: flex;
38  align-items: center;
39  justify-content: space-between;
40  border: none;
41  margin-top: 10px;
42}
43
44.footer div {
45  margin-right: 1rem;
46  height: 20px;
47  display: flex;
48  align-items: center;
49  cursor: pointer;
50}
51
52.footer svg {
53  margin-right: 5px;
54  height: 100%;
55  stroke: #9fa4aa;
56}
57
58.viewer span {
59  height: 20px;
60  width: 20px;
61  background-color: rgb(28, 117, 219);
62  margin-right: -6px;
63  border-radius: 50%;
64  border: 1px solid #fff;
65  display: grid;
66  align-items: center;
67  text-align: center;
68  font-weight: bold;
69  font-size: 8px;
70  color: #fff;
71  padding: 2px;
72}
73
74.viewer span svg {
75  stroke: #fff;
76}
77
78
79
80
81
82
83
84
85
86