1.card {
2  width: 400px;
3  height: 350px;
4  --black: #000000;
5  --ch-black: #141414;
6  --eer-black: #1b1b1b;
7  --night-rider: #2e2e2e;
8  --white: #ffffff;
9  --af-white: #f3f3f3;
10  --ch-white: #e1e1e1;
11  font-family: Helvetica, sans-serif;
12}
13
14.wrapper {
15  margin: 2rem auto;
16  width: 250px;
17  font-size: small;
18}
19
20.title {
21  text-align: center;
22  color: #1b1b1b;
23}
24
25.heading {
26  font-weight: bold;
27  letter-spacing: 7px;
28  font-size: 1.5rem;
29  position: relative;
30  margin-bottom: 6px;
31}
32
33.heading::before {
34  content: '';
35  position: absolute;
36  inset: 0;
37  background: #e8e8e8;
38  z-index: -1;
39  filter: blur(50px);
40  height: 50px;
41}
42
43.color {
44  padding: 10px 20px;
45  display: flex;
46  flex-direction: row;
47  justify-content: space-between;
48}
49
50.hex {
51  text-align: end;
52  font-family: monospace;
53  text-transform: uppercase;
54}
55
56.black {
57  background: var(--black);
58  color: var(--ch-white);
59  border-top-left-radius: 5px;
60  border-top-right-radius: 5px;
61}
62
63.eerie-black {
64  background: var(--ch-black);
65  color: var(--ch-white);
66}
67
68.chinese-black {
69  background: var(--eer-black);
70  color: var(--ch-white);
71}
72
73.night-rider {
74  background: var(--night-rider);
75  color: var(--ch-white);
76}
77
78.chinese-white {
79  background: var(--ch-white);
80  color: var(--night-rider);
81}
82
83.anti-flash-white {
84  background: var(--af-white);
85  color: var(--night-rider);
86}
87
88.white {
89  background: var(--white);
90  color: var(--night-rider);
91  border-bottom-left-radius: 5px;
92  border-bottom-right-radius: 5px;
93}
94
95.border {
96  color: var(--night-rider);
97  padding: 10px 10px;
98  text-align: center;
99}
100
101.border span {
102  border-radius: 5px;
103  color: var(--ch-white);
104  padding: 2px 4px;
105  background-color: var(--night-rider);
106}