1.card {
2  width: 280px;
3  height: 150px;
4  background: rgb(17, 4, 134);
5  border-radius: 15px;
6  box-shadow: rgb(0,0,0,0.7) 5px 10px 50px ,rgb(0,0,0,0.7) -5px 0px 250px;
7  display: flex;
8  color: white;
9  justify-content: center;
10  position: relative;
11  flex-direction: column;
12  background: linear-gradient(to right, rgb(20, 30, 48), rgb(36, 59, 85));
13  cursor: pointer;
14  transition: all 0.3s ease-in-out;
15  overflow: hidden;
16}
17
18.card:hover {
19  box-shadow: rgb(0,0,0) 5px 10px 50px ,rgb(0,0,0) -5px 0px 250px;
20}
21
22.time-text {
23  font-size: 50px;
24  margin-top: 0px;
25  margin-left: 15px;
26  font-weight: 600;
27  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
28}
29
30.time-sub-text {
31  font-size: 15px;
32  margin-left: 5px;
33}
34
35.day-text {
36  font-size: 18px;
37  margin-top: 0px;
38  margin-left: 15px;
39  font-weight: 500;
40  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
41}
42
43.moon {
44  font-size: 20px;
45  position: absolute;
46  right: 15px;
47  top: 15px;
48  transition: all 0.3s ease-in-out;
49}
50
51.card:hover > .moon {
52  font-size: 23px;
53}
54