1.container {
2  height: 200px;
3  width: 350px;
4  border-radius: 1em;
5  overflow: hidden;
6  box-shadow: 0 10px 20px #dbdbdb;
7  font-family: sans-serif;
8}
9
10.palette {
11  display: flex;
12  height: 86%;
13  width: 100%;
14}
15
16.color {
17  height: 100%;
18  flex: 1;
19  display: flex;
20  align-items: center;
21  justify-content: center;
22  color: white;
23  font-weight: 600;
24  letter-spacing: 1px;
25  transition: flex 0.1s linear;
26}
27
28.color span {
29  opacity: 0;
30  transition: opacity 0.1s linear;
31}
32
33.color:nth-child(1) {
34  background: #264653;
35}
36
37.color:nth-child(2) {
38  background: #2a9d8f;
39}
40
41.color:nth-child(3) {
42  background: #e9c46a;
43}
44
45.color:nth-child(4) {
46  background: #f4a261;
47}
48
49.color:nth-child(5) {
50  background: #e76f51;
51}
52
53.color:hover {
54  flex: 2;
55  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
56}
57
58.color:hover span {
59  opacity: 1;
60}
61
62#stats {
63  height: 14%;
64  width: 100%;
65  background: white;
66  display: flex;
67  align-items: center;
68  justify-content: space-between;
69  padding: 0 1.5em;
70  box-sizing: border-box;
71  color: #bebebe;
72}
73
74#stats svg {
75  fill: #bebebe;
76  transform: scale(1.2);
77}