1@keyframes moveIn {
2  0% {
3    transform: translateY(-20px);
4  }
5
6  100% {
7    transform: translateY(0);
8  }
9}
10
11.card {
12  background-color: #121212;
13  box-shadow: 0px 0px 100px white;
14 /* Dark mode background color /
15color: #ffffff; / Dark mode text color */
16/* Light mode styles /
17@media (prefers-color-scheme: light) {
18background-color: #ffffff; / Light mode background color /
19color: #121212; / Light mode text color */
20}
21
22.card {
23  position: relative;
24  box-sizing: border-box;
25  animation: gradient 9s ease-in-out infinite;
26  background-size: 500% 500%;
27  transition: all 0.5s;
28  width: 240px;
29  height: 290px;
30  display: flex;
31  align-items: center;
32  justify-content: space-between;
33  flex-direction: column;
34  padding: 30px;
35  border-radius: 16px;
36}
37
38.card {
39  transition: transform 0.2s ease-out;
40}
41
42.card:hover {
43  transform: scale(1.1);
44}
45
46.item svg {
47  transition: fill 0.2s ease-out;
48}
49
50.item:hover svg {
51  fill: #4caf50;
52}
53
54button {
55  width: 100%;
56  height: 30px;
57  background-color: transparent;
58  border-color: white;
59  border-radius: 10px;
60  color: rgb(255, 255, 255);
61  cursor: pointer;
62  position: relative;
63  display: flex;
64  align-items: center;
65  box-shadow: 0px 0px 100px rgb(28, 27, 27);
66  justify-content: center;
67  background-color: rgb(0, 0, 0);
68  transition-duration: .1s;
69}
70
71button:hover {
72  font-weight: 800;
73  box-shadow: 0px 0px 2px 1px #ffffff;
74  transition-duration: 0.4s;
75}
76
77.card:before {
78  position: absolute;
79  font-size: 4em;
80  width: 100%;
81  height: fit-content;
82  display: flex;
83  align-items: center;
84  justify-content: center;
85  bottom: -14.2%;
86  filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.445));
87}
88
89.item {
90  display: flex;
91  justify-content: center;
92  align-items: center;
93  margin: 10px;
94  padding: 10px;
95  border-radius: 5px;
96  background-color: white;
97  color: black;
98  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
99}
100
101.item svg {
102  width: 20px;
103  height: 20px;
104  margin-right: 10px;
105}
106
107.item span {
108  font-size: 16px;
109  font-weight: bold;
110  color: #333;
111}
112
113
114
115
116