1.card {
2  display: flex;
3  flex-direction: column;
4  align-items: center;
5  background-color: #0f0e17;
6  color: white;
7  padding: 2em;
8  border-radius: 8px;
9  transition: all 1s ease;
10}
11
12.card:hover {
13  box-shadow: 0 0 20px 8px rgb(218, 127, 242);
14}
15
16.heading {
17  font-size: 28px;
18  margin-bottom: 2em;
19  text-align: center;
20  color: #fffffe;
21}
22
23.heading span {
24  color: rgb(218, 127, 242);
25  font-weight: 700;
26}
27
28.content {
29  display: flex;
30  flex-direction: column;
31  align-items: flex-start;
32  justify-content: center;
33}
34
35.item {
36  cursor: pointer;
37  display: flex;
38  align-items: center;
39  justify-content: flex-start;
40  border-radius: 8px;
41  font-size: 18px;
42  font-weight: 600;
43  width: 140px;
44  padding: 10px;
45  margin-bottom: 1em;
46  background: linear-gradient(to top,rgb(218, 127, 242) 0%, rgb(218, 127, 242) 100%) no-repeat;
47  background-size: 0 100%;
48  transform: translateY(0);
49  transition: all .3s ease;
50}
51
52.item:hover {
53  transform: translateY(-4px);
54  background-size: 100% 100%;
55}
56
57.item svg {
58  margin-right: 1em;
59}
60
61button {
62  cursor: pointer;
63  border: none;
64  margin-top: 2em;
65  font-size: 18px;
66  font-weight: 700;
67  padding: 8px 20px;
68  border-radius: 8px;
69  background: #e53170;
70  color: #0f0e17;
71  transition: all .2s ease;
72}
73
74button:hover {
75  background: #fff;
76  letter-spacing: .1em;
77  box-shadow: 0 0 8px 4px #fff;
78}