1.card {
2 width: 190px;
3 height: 254px;
4 display: flex;
5 flex-direction: column;
6 align-items: center;
7 background: #f2f2f3;
8 border-radius: 12px;
9 box-shadow: inset 5px 5px 10px #a9a9aa77,
10              inset -5px -5px 10px #ffffff7e;
11}
12
13.card .img {
14 height: 100px;
15 margin-top: 1.6em;
16 aspect-ratio: 1;
17 border-radius: 30%;
18 background: #f2f2f3;
19 margin-bottom: 0.4em;
20 box-shadow: -5px -5px 8px #ffffff7a, 
21              5px 5px 8px #a9a9aa7a;
22}
23
24.card .info {
25 text-align: center;
26 margin-top: 0.4em;
27 background: linear-gradient(120deg, rgba(0,194,255,1) 0%, rgba(0,86,255,1) 100%);
28 background-clip: border-box;
29 -webkit-background-clip: text;
30 -webkit-text-fill-color: transparent;
31}
32
33.card .info > span {
34 font-weight: bold;
35 font-size: 1.2em;
36}
37
38.card a {
39 margin-top: 1em;
40 color: #fff;
41 text-decoration: none;
42 background: linear-gradient(90deg, rgba(0,194,255,1) 0%, rgba(0,86,255,1) 100%);
43 padding: .5em 2em;
44 border-radius: 0.7em;
45}
46
47.card a:active {
48 box-shadow: inset 3px 3px 3px #0056ff,
49             inset -3px -3px 3px #00c2ff;
50}