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