1.card {
2  background-color: #191825;
3  padding: 2em;
4  border-radius: 2em;
5  position: relative;
6  display: flex;
7  flex-direction: column;
8  align-items: center;
9  justify-content: center;
10  overflow: hidden;
11  transition: all 0.2s linear;
12  color: #FFA3FD;
13  font-weight: bold;
14}
15
16.card * {
17  z-index: 1;
18}
19
20.card::before {
21  content: '';
22  background-color: #E384FF;
23  position: absolute;
24  width: 6em;
25  height: 36em;
26  animation: rotate 5s linear infinite;
27}
28
29.card::after {
30  content: '';
31  background-color: #191825;
32  position: absolute;
33  inset: .1em;
34  border-radius: 2em;
35}
36
37.card:hover {
38  scale: 1.1;
39}
40
41.heading {
42  text-align: center;
43  font-size: 1.33em;
44  text-transform: uppercase;
45  font-weight: bold;
46}
47
48.heading>span {
49  font-size: 1.5em;
50  color: #FFA3FD;
51  text-shadow: 0 0 .5em #FFA3FD;
52}
53
54.content, button {
55  margin-top: 2em;
56}
57
58.content {
59  display: flex;
60}
61
62.item {
63  border: 1px #FFA3FD solid;
64  padding: 0.75em;
65  border-radius: 0.75em;
66  display: flex;
67  align-items: center;
68  transition: all 0.2s linear;
69}
70
71.item>span {
72  margin-left: .33em;
73}
74
75.item + .item {
76  margin-left: 1em;
77}
78
79.item:hover {
80  background-color: #FFA3FD;
81  box-shadow: 0 0 .5em .2em #FFA3FD;
82  cursor: pointer;
83}
84
85button {
86  padding: .75em 1.5em;
87  border-radius: 1.5em;
88  background-color: #FFA3FD;
89  color: #191825;
90  font-weight: bold;
91  border: none;
92  transition: all 0.2s linear;
93}
94
95button:hover {
96  background-color: #191825;
97  color: #FFA3FD;
98  outline: none;
99  scale: 1.1;
100  border: #FFA3FD 1px solid;
101  cursor: pointer;
102}
103
104@keyframes rotate {
105  from {
106    transform: rotate(0deg);
107  }
108
109  to {
110    transform: rotate(360deg);
111  }
112}