1button {
2  z-index: 500;
3  box-shadow: rgba(124, 172, 226, 0.295) 2px 2px 8px;
4  width: 15rem;
5  height: 4rem;
6  letter-spacing: 0.5rem;
7  border: none;
8  border-radius: 0.1rem;
9  color: white;
10  animation: universe-is-moving 2s infinite ease-out;
11  background: linear-gradient(
12    90deg,
13    rgba(185, 43, 39, 1) 0%,
14    rgba(21, 101, 192, 1) 100%
15  );
16  background-size: 200% 200%;
17  animation-direction: alternate;
18  background-position: 0% 100%;
19  animation-name: universe-is-moving;
20  animation-duration: 1.8s;
21  animation-iteration-count: infinite;
22  animation-timing-function: linear;
23  transition: all 0.5s ease-in-out;
24}
25
26button:hover {
27  border-radius: 2rem;
28  cursor: pointer;
29}
30
31.moon {
32  position: relative;
33  left: 2rem;
34  bottom: -2rem;
35  right: 0;
36  width: 20px;
37  height: 20px;
38  transform: translate3d(42px, -62px, -135px);
39  background-color: rgba(255, 255, 255, 0.76);
40  border-radius: 50%;
41  animation: 3s  universe-moon infinite ease-in-out;
42  animation-timing-function: linear;
43}
44
45#u {
46  font-size: 1.2rem;
47  animation: 3s ease-in-out universe-letters-are-moving infinite;
48}
49
50#n {
51  font-size: 1.2rem;
52  animation: 3s ease-in-out universe-letters-are-moving infinite;
53  animation-delay: 200ms;
54}
55
56#i {
57  font-size: 1.2rem;
58  animation: 3s ease-in-out universe-letters-are-moving infinite;
59  animation-delay: 400ms;
60}
61
62#v {
63  font-size: 1.2rem;
64  animation: 3s ease-in-out universe-letters-are-moving infinite;
65  animation-delay: 600ms;
66}
67
68#e {
69  font-size: 1.2rem;
70  animation: 3s ease-in-out universe-letters-are-moving infinite;
71  animation-delay: 800ms;
72}
73
74#r {
75  font-size: 1.2rem;
76  animation: 3s ease-in-out universe-letters-are-moving infinite;
77  animation-delay: 1000ms;
78}
79
80#s {
81  font-size: 1.2rem;
82  animation: 3s ease-in-out universe-letters-are-moving infinite;
83  animation-delay: 1200ms;
84}
85
86#e {
87  font-size: 1.2rem;
88  animation: 3s ease-in-out universe-letters-are-moving infinite;
89  animation-delay: 1400ms;
90}
91
92#ee {
93  font-size: 1.2rem;
94  animation: 3s ease-in-out universe-letters-are-moving infinite;
95  animation-delay: 1600ms;
96}
97
98@keyframes universe-is-moving {
99  from {
100    background-position: 0% 100%;
101  }
102
103  to {
104    background-position: 100% 0%;
105  }
106}
107
108@keyframes universe-letters-are-moving {
109  0% {
110    font-size: 1.2rem;
111  }
112
113  50% {
114    font-size: 1.5rem;
115  }
116
117  100% {
118    font-size: 1.2rem;
119  }
120}
121
122@keyframes universe-moon {
123  0% {
124    z-index: 5;
125    transform: translateY(-8em) translateX(10em);
126  }
127
128  50% {
129    transform: translateX(0.5em) translateY(-1em);
130  }
131
132  100% {
133    transform: translateY(-8em) translateX(10em);
134    z-index: -5;
135  }
136}
137