1.moon-container {
2  width: 170px;
3  height: 50px;
4  background: linear-gradient(0, #120c56, #000000);
5  display: flex;
6  align-items: center;
7  justify-content: space-between;
8  padding: 7px;
9  border-radius: 20px;
10  border-color: transparent;
11}
12
13.moon-container:hover {
14  transform: scale(1.2);
15  border-radius: 62px;
16  box-shadow: 1px 0px 100px #ece1bd60;
17  transition: all 1.4s;
18}
19
20.moon-text {
21  position: relative;
22  font-size: 15px;
23  font-weight: bold;
24  color: #fff;
25}
26
27.moon {
28  position: relative;
29  border-color: transparent;
30  width: 75px;
31  height: 75px;
32  border-radius: 50%;
33  background-color: #F0EAD6;
34  box-shadow: 0px 0px 10px #F0EAD6;
35}
36
37.moon::before {
38  content: "";
39  display: block;
40  position: absolute;
41  top: 22%;
42  left: 45%;
43  transform: translateX(-50%);
44  width: 12px;
45  height: 12px;
46  border-radius: 50%;
47  background-color: #333;
48  opacity: 0.4;
49}
50
51.moon::after {
52  content: "";
53  position: absolute;
54  top: 67%;
55  left: 30%;
56  transform: translateX(-50%);
57  width: 10px;
58  height: 10px;
59  border-radius: 50%;
60  background-color: #333;
61  opacity: 0.3;
62}
63
64.mancha2 {
65  content: "";
66  width: 10px;
67  height: 10px;
68  background-color: rgba(51, 51, 51, 0.583);
69  border-radius: 50%;
70  position: absolute;
71  top: 47%;
72  left: 75%;
73  transform: translate(-50%, -50%);
74}
75
76.moon:hover {
77  box-shadow: 0px 0px 100px #F0EAD6;
78  transition: all 1.4s;
79}
80
81.moon:active {
82  transform: scale(1.5);
83  transition: all 1.4s;
84}
85