1.cardContainer {
2 width: fit-content;
3 position: relative;
4 display: flex;
5 align-items: center;
6 justify-content: center;
7}
8
9.card {
10 position: relative;
11 width: 220px;
12 height: 250px;
13 display: flex;
14 flex-direction: column;
15 align-items: center;
16 justify-content: space-between;
17 padding: 20px 10px;
18 border-radius: 10px;
19 backdrop-filter: blur(30px);
20 background-color: rgba(65, 65, 65, 0.308);
21 border: 1px solid rgba(255, 255, 255, 0.089);
22 cursor: pointer;
23}
24
25.city {
26 font-weight: 700;
27 font-size: 0.9em;
28 letter-spacing: 1.2px;
29 color: white;
30}
31
32.weather {
33 font-weight: 500;
34 font-size: 0.7em;
35 letter-spacing: 1.2px;
36 color: rgb(197, 197, 197);
37}
38
39.temp {
40 font-size: 1.8em;
41 color: white;
42}
43
44.minmaxContainer {
45 width: 100%;
46 display: flex;
47 align-items: center;
48 justify-content: space-between;
49}
50
51.min,
52.max {
53 width: 50%;
54 display: flex;
55 flex-direction: column;
56 align-items: flex-end;
57 justify-content: center;
58 padding: 0px 20px;
59 gap: 4px;
60}
61
62.max {
63 align-items: flex-start;
64 border-left: 2px solid white;
65}
66
67.maxHeading,
68.minHeading {
69 font-size: 0.7em;
70 font-weight: 600;
71 color: white;
72}
73
74.maxTemp,
75.minTemp {
76 font-size: 0.6em;
77 font-weight: 500;
78 color: rgb(197, 197, 197);
79}
80
81.cardContainer::before {
82 width: 100px;
83 height: 100px;
84 content: "";
85 position: absolute;
86 background-color: rgb(144, 161, 255);
87 z-index: -1;
88 border-radius: 50%;
89 left: 100px;
90 top: 50px;
91 transition: all 1s;
92}
93
94.cardContainer:hover::before {
95 transform: translate(-50px, 50px);
96}
97
