1.box {
2  --clr-shadow__border: #d9a1ff;
3  --clr-text: #F6F4EB;
4  --clr-space: #120e1e;
5  --clr-space-gr: #271950;
6  --clr-star: #E9F8F9;
7  --size: 3rem;
8  position: relative;
9  outline: 1px solid var(--clr-shadow__border);
10}
11
12.button {
13  font-weight: 600;
14  font-size: 1.5rem;
15  letter-spacing: 0.2rem;
16  background: transparent;
17  padding: calc(var(--size) / 3) var(--size);
18  border: none;
19  cursor: pointer;
20  color: var(--clr-text);
21  text-shadow: 2px 0px var(--clr-shadow__border), 0px 2px var(--clr-shadow__border),
22  -2px 0px var(--clr-shadow__border), 0px -2px var(--clr-shadow__border);
23}
24
25.space {
26  width: 100%;
27  height: 100%;
28  bottom: 0%;
29  gap: 1.5rem;
30  transition: 0.5s ease-in-out;
31  z-index: -1;
32  opacity: 0;
33  overflow: hidden;
34  position: absolute;
35  display: flex;
36  background: linear-gradient( 160deg, var(--clr-space), var(--clr-space-gr));
37}
38
39.box:hover .space {
40  opacity: 1;
41}
42
43.star {
44  height: 4rem;
45  width: 0.3rem;
46  transition: 0.5s;
47  border-radius: 50px;
48  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
49  position: relative;
50  background-color: var(--clr-star);
51  animation: space-animation calc(0.1s * var(--i)) linear infinite;
52}
53
54@keyframes space-animation {
55  0% {
56    transform: rotate(-30deg) translateY(calc(-52% * var(--i)));
57  }
58
59  100% {
60    transform: rotate(-30deg) translateY(calc(52% * var(--i)));
61  }
62}
63
64
65
66
67
68
69
70