1@keyframes rainbow {
2  0% {
3    color: #ff0000;
4  }
5
6  14% {
7    color: #ff7f00;
8  }
9
10  28% {
11    color: #ffff00;
12  }
13
14  42% {
15    color: #00ff00;
16  }
17
18  57% {
19    color: #0000ff;
20  }
21
22  71% {
23    color: #4b0082;
24  }
25
26  85% {
27    color: #8f00ff;
28  }
29
30  100% {
31    color: #ff0000;
32  }
33}
34
35.card {
36  background-color: #ffffff;
37  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
38  width: 400px;
39  border-radius: 8px;
40  padding: 20px;
41  box-sizing: border-box;
42}
43
44.heading {
45  font-size: 24px;
46  font-weight: bold;
47  color: #333;
48  margin-bottom: 20px;
49}
50
51.heading span {
52  color: #8198b3;
53  animation: rainbow 5s linear infinite;
54}
55
56.content {
57  display: flex;
58  justify-content: space-between;
59  margin-bottom: 20px;
60}
61
62.item {
63  display: flex;
64  align-items: center;
65  color: #999;
66  cursor: pointer;
67  transition: all 0.3s;
68}
69
70.item:hover {
71  color: #9360e4;
72}
73
74.item svg {
75  margin-right: 8px;
76}
77
78button {
79  background-color: #9360e4;
80  color: #ffffff;
81  font-size: 18px;
82  font-weight: bold;
83  border: none;
84  border-radius: 4px;
85  padding: 10px 16px;
86  cursor: pointer;
87  outline: none;
88  width: 100%;
89  box-sizing: border-box;
90  transition: all 0.3s, transform 0.5s;
91}
92
93button:hover {
94  background-color: rgb(181, 81, 221);
95  transform: translateY(-3px);
96}
97
98button:active {
99  transform: translateY(0);
100  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
101}
102
103.item:hover {
104  color: #9360e4;
105  transform: translateY(-5px);
106}
107
108.item svg {
109  margin-right: 8px;
110  transition: transform 0.3s;
111}
112
113.item:hover svg {
114  transform: scale(1.1);
115}