1.card {
2  background-color: #191c27;
3  border-radius: 15px;
4  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
5  display: flex;
6  flex-direction: column;
7  justify-content: space-between;
8  color: white;
9  height: 210px;
10  width: 350px;
11}
12
13.heading {
14  color: #ffffff;
15  font-family: 'Orbitron', sans-serif;
16  font-size: 28px;
17  margin: 20px;
18  text-shadow: 0 0 5px #ffffff;
19}
20
21.content {
22  display: flex;
23  flex-direction: row;
24  justify-content: space-around;
25  margin-bottom: 20px;
26}
27
28.item {
29  align-items: center;
30  background-color: #343a4b;
31  border-radius: 10px;
32  display: flex;
33  flex-direction: column;
34  height: 80px;
35  justify-content: center;
36  width: 100px;
37  transition: transform 0.2s ease-in-out;
38  margin: 10px;
39}
40
41.item:hover {
42  transform: translateY(-10px);
43}
44
45.item svg {
46  fill: #ffffff;
47  height: 40px;
48  margin-bottom: 10px;
49  width: 40px;
50}
51
52.item--create svg {
53  animation: spin 2s linear infinite;
54}
55
56.item--post svg {
57  animation: upDown 2s ease-in-out infinite alternate;
58}
59
60.item--inspire svg {
61  animation: flash 1.2s linear infinite;
62}
63
64@keyframes spin {
65  100% {
66    transform: rotate(360deg);
67  }
68}
69
70@keyframes upDown {
71  0% {
72    transform: translateY(1.8px);
73  }
74
75  100% {
76    transform: translateY(-1.8px);
77  }
78}
79
80@keyframes flash {
81  0% {
82    opacity: 1;
83  }
84
85  50% {
86    opacity: 0;
87  }
88
89  100% {
90    opacity: 1;
91  }
92}
93
94.item span {
95  color: #ffffff;
96  font-family: 'Orbitron', sans-serif;
97  font-size: 18px;
98  text-shadow: 0 0 5px #ffffff;
99}
100
101.item--create:hover {
102  background-color: #6d9eeb;
103  transition: transform .35s ease-in-out;
104}
105
106.item--post:hover {
107  background-color: #f4b41a;
108  transition: transform .35s ease-in-out;
109}
110
111.item--inspire:hover {
112  background-color: #eb6d6d;
113  transition: transform .35s ease-in-out;
114}
115
116button {
117  background-color: #2E4057;
118  border: none;
119  border-radius: 5px;
120  color: white;
121  cursor: pointer;
122  font-size: 16px;
123  font-weight: bold;
124  padding: 10px 20px;
125  transition: all 0.3s ease;
126}
127
128button:hover {
129  background-color: #3E5368;
130  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
131}
132
133