1.container {
2  width: 300px;
3  height: 340px;
4  border-radius: 1em;
5  overflow: hidden;
6  box-shadow: 0 10px 20px #dbdbdb;
7  font-family: sans-serif;
8  background: white;
9  pointer-events: none;
10}
11
12.palette {
13  position: relative;
14  width: 300px;
15  height: 300px;
16  border-radius: 1rem;
17  overflow: hidden;
18  pointer-events: auto;
19}
20
21.palette:hover > #color-code {
22  opacity: 0;
23}
24
25.color {
26  position: absolute;
27  width: 300px;
28  height: 300px;
29  transform-origin: center;
30  transition: 0.3s ease-in-out;
31  box-sizing: inline-block;
32  display: flex;
33  align-items: center;
34  justify-content: center;
35}
36
37.color span {
38  color: white;
39  font-weight: 600;
40  letter-spacing: 1px;
41}
42
43#color1 {
44  background: #4B0082;
45  rotate: 45deg;
46  translate: 212.13px 0;
47  outline: 0 solid #4B0082;
48  z-index: 9;
49}
50
51#color1:hover {
52  translate: 0 0;
53  rotate: 0deg;
54  z-index: 99;
55  outline: 20px solid #4B0082;
56}
57
58#color2 {
59  background: #8A2BE2;
60  rotate: 45deg;
61  translate: 0 212.13px;
62  outline: 0 solid #8A2BE2;
63  z-index: 9;
64}
65
66#color2:hover {
67  translate: 0 0;
68  rotate: 0deg;
69  z-index: 99;
70  outline: 20px solid #8A2BE2;
71}
72
73#color2 span {
74  color: #1A1A1A;
75}
76
77#color3 {
78  background: #9932CC;
79  rotate: 45deg;
80  translate: -212.13px 0;
81  outline: 0 solid #9932CC;
82  z-index: 9;
83}
84
85#color3:hover {
86  translate: 0 0;
87  rotate: 0deg;
88  z-index: 99;
89  outline: 20px solid #9932CC;
90}
91
92#color4 {
93  background: #BA55D3;
94  rotate: 45deg;
95  translate: 0 -212.13px;
96  outline: 0 solid #BA55D3;
97  z-index: 9;
98}
99
100#color4:hover {
101  translate: 0 0;
102  rotate: 0deg;
103  z-index: 99;
104  outline: 20px solid #BA55D3;
105}
106
107#color-code {
108  position: absolute;
109  top: 0;
110  left: 0;
111  width: 40px;
112  height: 40px;
113  translate: 130px 130px;
114  border-radius: 20px;
115  overflow: hidden;
116  z-index: 199;
117  opacity: 1;
118  transition: 0.3s ease-in-out;
119}
120
121#color-code-bg {
122  position: absolute;
123  width: 40px;
124  height: 40px;
125  background-color: rgba(255, 255, 255, 0.8);
126  filter: blur(10px);
127}
128
129#color-code-text {
130  position: absolute;
131  width: 40px;
132  height: 40px;
133  display: flex;
134  justify-content: center;
135  align-items: center;
136}
137
138#color-code-text::after {
139  content: "v2";
140  font-weight: 600;
141  font-family: sans-serif;
142  color: #1a1a1a;
143}
144
145#footer {
146  height: 12%;
147  width: 100%;
148  background: white;
149  display: flex;
150  align-items: center;
151  justify-content: space-between;
152  padding: 0 1em;
153  box-sizing: border-box;
154  color: #bebebe;
155}
156
157#footer svg {
158  scale: 0.75;
159}
160
161#footer #bookmarks {
162  display: flex;
163  align-items: center;
164  justify-content: center;
165  font-size: smaller;
166}