1.card {
2  position: relative;
3  box-sizing: border-box;
4  background: linear-gradient(-45deg,#6bc5f8, #cf59e6,#6bc5f8, #cf59e6);
5  animation: gradient 5s ease infinite;
6  background-size: 500% 500%;
7  width: 230px;
8  height: 280px;
9  display: flex;
10  align-items: center;
11  justify-content: space-between;
12  flex-direction: column;
13  padding: 20px;
14  border-radius: 20px;
15}
16
17@keyframes gradient {
18  0% {
19    background-position: 0 50%;
20    box-shadow: 0px 0px 2px #ffffff,
21      0px 0px 5px #ffffff,
22      0px 0px 10px #6bc5f8,
23      0px 0px 50px #6bc5f8;
24  }
25
26  50% {
27    background-position: 100% 50%;
28    box-shadow: 0px 0px 2px #ffffff,
29      0px 0px 5px #ffffff,
30      0px 0px 10px #cf59e6,
31      0px 0px 50px #cf59e6;
32  }
33
34  100% {
35    background-position: 0 50%;
36    box-shadow: 0px 0px 2px #ffffff,
37          0px 0px 5px #ffffff,
38          0px 0px 10px #6bc5f8,
39          0px 0px 50px #6bc5f8;
40  }
41}
42
43.heading {
44  color: white;
45  font-weight: 500;
46  font-size: 0.8em;
47  display: flex;
48  flex-direction: column;
49  justify-content: center;
50  align-items: center;
51  gap: 5px;
52}
53
54.heading span {
55  font-size: 2em;
56  font-weight: 800;
57  filter: drop-shadow(0px 0px 10px rgb(255, 255, 255));
58  animation: flickering 2s linear infinite both;
59}
60
61@keyframes flickering {
62  0%,
63  100% {
64    opacity: 1;
65  }
66
67  41.99% {
68    opacity: 1;
69  }
70
71  42% {
72    opacity: 0;
73  }
74
75  43% {
76    opacity: 0;
77  }
78
79  43.01% {
80    opacity: 1;
81  }
82
83  47.99% {
84    opacity: 1;
85  }
86
87  48% {
88    opacity: 0;
89  }
90
91  49% {
92    opacity: 0;
93  }
94
95  49.01% {
96    opacity: 1;
97  }
98}
99
100.content {
101  display: flex;
102  flex-direction: column;
103  justify-content: center;
104  align-items: flex-start;
105  height: fit-content;
106  gap: 10px;
107}
108
109.item {
110  color: white;
111  font-weight: 600;
112  display: flex;
113  align-items: center;
114  justify-content: center;
115  gap: 5px;
116  cursor: default;
117}
118
119.item svg {
120  transition-duration: .3s;
121}
122
123.item:hover svg {
124  filter: drop-shadow(0px 0px 10px white);
125  transition-duration: .3s;
126}
127
128button {
129  width: 100%;
130  height: 30px;
131  background-color: transparent;
132  border: none;
133  border-radius: 10px;
134  color: white;
135  cursor: pointer;
136  position: relative;
137  display: flex;
138  align-items: center;
139  justify-content: center;
140  box-shadow: 0px 0px 100px white;
141  transition-duration: .3s;
142}
143
144button:hover {
145  letter-spacing: 1.5px;
146  transition-duration: .3s;
147}
148
149.card:before {
150  content: "∞";
151  position: absolute;
152  font-size: 4em;
153  width: 100%;
154  height: fit-content;
155  display: flex;
156  align-items: center;
157  justify-content: center;
158  bottom: -14.2%;
159  filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.445));
160}
161