* {
  box-sizing: border-box;
  transition: 0.3s ease;
}
body {
  background-color: #222a36;
  transition: 0s;
  font-family: "Montserrat";
  font-size: 14px;
}
.abs-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.container {
  display: flex;
  width: 280px;
  overflow: hidden;
}
.palette {
  flex: 1 1 0;
  height: 200px;
  color: #fff;
}
.palette:hover {
  flex-grow: 4;
}
.color-square {
  position: relative;
  height: 20%;
  width: 100%;
}
.color-square::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 0.3s ease;
}
.color-square:hover::before {
  opacity: 1;
}
.palette1 .color1 {
  background-color: #610709;
}
.palette1 .color1::before {
  content: '#610709';
}
.palette1 .color2 {
  background-color: #9f0c0e;
}
.palette1 .color2::before {
  content: '#9f0c0e';
}
.palette1 .color3 {
  background-color: #dd1114;
}
.palette1 .color3::before {
  content: '#dd1114';
}
.palette1 .color4::before {
  color: #000;
}
.palette1 .color4 {
  background-color: #f1494c;
}
.palette1 .color4::before {
  content: '#f1494c';
}
.palette1 .color5::before {
  color: #000;
}
.palette1 .color5 {
  background-color: #f69091;
}
.palette1 .color5::before {
  content: '#f69091';
}
.palette2 .color1 {
  background-color: #614807;
}
.palette2 .color1::before {
  content: '#614807';
}
.palette2 .color2 {
  background-color: #9f760c;
}
.palette2 .color2::before {
  content: '#9f760c';
}
.palette2 .color3 {
  background-color: #dda411;
}
.palette2 .color3::before {
  content: '#dda411';
}
.palette2 .color4::before {
  color: #000;
}
.palette2 .color4 {
  background-color: #f1c249;
}
.palette2 .color4::before {
  content: '#f1c249';
}
.palette2 .color5::before {
  color: #000;
}
.palette2 .color5 {
  background-color: #f6da90;
}
.palette2 .color5::before {
  content: '#f6da90';
}
.palette3 .color1 {
  background-color: #396107;
}
.palette3 .color1::before {
  content: '#396107';
}
.palette3 .color2 {
  background-color: #5d9f0c;
}
.palette3 .color2::before {
  content: '#5d9f0c';
}
.palette3 .color3 {
  background-color: #81dd11;
}
.palette3 .color3::before {
  content: '#81dd11';
}
.palette3 .color4::before {
  color: #000;
}
.palette3 .color4 {
  background-color: #a5f149;
}
.palette3 .color4::before {
  content: '#a5f149';
}
.palette3 .color5::before {
  color: #000;
}
.palette3 .color5 {
  background-color: #c8f690;
}
.palette3 .color5::before {
  content: '#c8f690';
}
.palette4 .color1 {
  background-color: #076118;
}
.palette4 .color1::before {
  content: '#076118';
}
.palette4 .color2 {
  background-color: #0c9f28;
}
.palette4 .color2::before {
  content: '#0c9f28';
}
.palette4 .color3 {
  background-color: #11dd37;
}
.palette4 .color3::before {
  content: '#11dd37';
}
.palette4 .color4::before {
  color: #000;
}
.palette4 .color4 {
  background-color: #49f168;
}
.palette4 .color4::before {
  content: '#49f168';
}
.palette4 .color5::before {
  color: #000;
}
.palette4 .color5 {
  background-color: #90f6a3;
}
.palette4 .color5::before {
  content: '#90f6a3';
}
.palette5 .color1 {
  background-color: #07615a;
}
.palette5 .color1::before {
  content: '#07615a';
}
.palette5 .color2 {
  background-color: #0c9f93;
}
.palette5 .color2::before {
  content: '#0c9f93';
}
.palette5 .color3 {
  background-color: #1dc;
}
.palette5 .color3::before {
  content: '#1dc';
}
.palette5 .color4::before {
  color: #000;
}
.palette5 .color4 {
  background-color: #49f1e3;
}
.palette5 .color4::before {
  content: '#49f1e3';
}
.palette5 .color5::before {
  color: #000;
}
.palette5 .color5 {
  background-color: #90f6ee;
}
.palette5 .color5::before {
  content: '#90f6ee';
}
.palette6 .color1 {
  background-color: #072761;
}
.palette6 .color1::before {
  content: '#072761';
}
.palette6 .color2 {
  background-color: #0c3f9f;
}
.palette6 .color2::before {
  content: '#0c3f9f';
}
.palette6 .color3 {
  background-color: #1158dd;
}
.palette6 .color3::before {
  content: '#1158dd';
}
.palette6 .color4::before {
  color: #000;
}
.palette6 .color4 {
  background-color: #4984f1;
}
.palette6 .color4::before {
  content: '#4984f1';
}
.palette6 .color5::before {
  color: #000;
}
.palette6 .color5 {
  background-color: #90b4f6;
}
.palette6 .color5::before {
  content: '#90b4f6';
}
.palette7 .color1 {
  background-color: #2a0761;
}
.palette7 .color1::before {
  content: '#2a0761';
}
.palette7 .color2 {
  background-color: #450c9f;
}
.palette7 .color2::before {
  content: '#450c9f';
}
.palette7 .color3 {
  background-color: #6011dd;
}
.palette7 .color3::before {
  content: '#6011dd';
}
.palette7 .color4::before {
  color: #000;
}
.palette7 .color4 {
  background-color: #8a49f1;
}
.palette7 .color4::before {
  content: '#8a49f1';
}
.palette7 .color5::before {
  color: #000;
}
.palette7 .color5 {
  background-color: #b890f6;
}
.palette7 .color5::before {
  content: '#b890f6';
}