1.card-id567 {
2  width: 190px;
3  height: 190px;
4  background: rgb(255, 255, 255);
5  border-radius: 1rem;
6  padding: 1rem;
7  position: relative;
8  display: flex;
9  justify-content: center;
10  align-items: center;
11  transition: 300ms ease;
12  animation: 8s thumb-thumb infinite;
13}
14
15.card-id567 svg path {
16  transition: 300ms ease;
17  stroke: rgb(20, 20, 20);
18  opacity: 0;
19}
20
21.bold-567 {
22  font-weight: bold;
23}
24
25.blurry-splash {
26  position: absolute;
27  inset: 0;
28  width: 60px;
29  margin: 0 auto;
30  height: 60px;
31  border-radius: 1rem;
32  z-index: -1;
33  opacity: 70%;
34  filter: blur(15px);
35  background: linear-gradient(
36    120deg, rgb(119, 0, 255)
37    , rgb(22, 94, 250), rgb(44, 226, 250));
38}
39
40.prompt-id567 {
41  position: absolute;
42  color: rgb(29, 29, 29);
43  text-align: center;
44}
45
46.really-small-text {
47  text-align: center;
48  width: 100%;
49  position: absolute;
50  font-size: 8px;
51  margin-top: 28px;
52  opacity: 0.5;
53}
54
55.card-id567:hover {
56  cursor: none;
57}
58
59.card-id567:hover .prompt-id567 {
60  transition: 300ms ease;
61  opacity: 0;
62}
63
64.token-container {
65  animation: 2s spinny-token-yayyy infinite;
66  margin-bottom: 10px;
67}
68
69.prompt-id567 svg path {
70  stroke: none;
71  opacity: 1;
72}
73
74.card-id567:hover svg path {
75  opacity: 1;
76}
77
78@keyframes spinny-token-yayyy {
79  0% {
80    transform: perspective(200px) rotateY(0deg);
81  }
82
83  100% {
84    transform: perspective(200px) rotateY(360deg);
85  }
86}
87
88@keyframes thumb-thumb {
89  0%, 10%, 100% {
90    transform: scale(100%);
91  }
92
93  5% {
94    transform: scale(103%);
95  }
96
97  7% {
98    transform: scale(97%);
99  }
100}