HOVER ME

1.card {
2  width: 190px;
3  height: 120px;
4  padding: 0.5rem;
5  background: rgba(198, 198, 198, 0.34);
6  border-radius: 8px;
7  backdrop-filter: blur(5px);
8  position: absolute;
9  border-bottom: 3px solid rgba(255, 255, 255, 0.440);
10  border-left: 2px  rgba(255, 255, 255, 0.545) outset;
11  box-shadow: -40px 50px 30px rgba(0, 0, 0, 0.280);
12  transform: skewX(10deg);
13  transition: .4s;
14  overflow: hidden;
15  color: white;
16}
17
18.card:hover {
19  height: 254px;
20  transform: skew(0deg);
21}
22
23.align {
24  padding: 1rem;
25  display: flex;
26  flex-direction: row;
27  gap: 5px;
28  align-self: flex-start;
29}
30
31.red {
32  width: 10px;
33  height: 10px;
34  border-radius: 50%;
35  background-color: #ff605c;
36  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280);
37}
38
39.yellow {
40  width: 10px;
41  height: 10px;
42  border-radius: 50%;
43  background-color: #ffbd44;
44  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280);
45}
46
47.green {
48  width: 10px;
49  height: 10px;
50  border-radius: 50%;
51  background-color: #00ca4e;
52  box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.280);
53}
54
55.card h1 {
56  text-align: center;
57  margin: 1.3rem;
58  color: rgb(218, 244, 237);
59  text-shadow: -10px 5px 10px rgba(0, 0, 0, 0.573);
60}
61
62