@import "colorname.css";
.colors {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 300px;
  margin-bottom: -120px;
}
.color {
  flex: 0.1;
  background: red;
  display: flex;
  align-items: center;
  padding: 0 40px;
  cursor: pointer;
}
.transparent {
  background: transparent !important;
}
/* Light */
/* Red */
.red {
  background: rgb(253, 12, 12) !important;
}
.red_l1 {
  background: rgb(255, 51, 51) !important;
}
.red_l2 {
  background: rgb(255, 72, 72) !important;
}
.red_l3 {
  background: rgb(253, 95, 95) !important;
}
.red_l4 {
  background: rgb(255, 120, 120) !important;
}
/* blue */
.blue {
  background: rgb(21, 25, 255) !important;
}
.blue_l1 {
  background: rgb(70, 73, 255) !important;
}
.blue_l2 {
  background: rgb(99, 101, 255) !important;
}
.blue_l3 {
  background: rgb(123, 125, 255) !important;
}
.blue_l4 {
  background: rgb(168, 169, 255) !important;
}
/* green */
.green {
  background: rgb(30, 255, 0) !important;
}
.green_l1 {
  background: rgb(73, 253, 50) !important;
}
.green_l2 {
  background: rgb(100, 255, 80) !important;
}
.green_l3 {
  background: rgb(117, 255, 99) !important;
}
.green_l4 {
  background: rgb(162, 255, 150) !important;
}
/* yellow */
.yellow {
  background: rgb(255, 251, 0) !important;
}
.yellow_l1 {
  background: rgb(255, 251, 39) !important;
}
.yellow_l2 {
  background: rgb(255, 252, 63) !important;
}
.yellow_l3 {
  background: rgb(255, 252, 98) !important;
}
.yellow_l4 {
  background: rgb(255, 253, 131) !important;
}
/* purple */
.purple {
  background: rgb(161, 21, 255) !important;
}
.purple_l1 {
  background: rgb(172, 48, 255) !important;
}
.purple_l2 {
  background: rgb(183, 74, 255) !important;
}
.purple_l3 {
  background: rgb(192, 99, 255) !important;
}
.purple_l4 {
  background: rgb(203, 125, 255) !important;
}
/* Dark */
/* purple */
.purple_d1 {
  background: rgb(138, 1, 230) !important;
}
.purple_d2 {
  background: rgb(108, 1, 179) !important;
}
.purple_d3 {
  background: rgb(97, 0, 161) !important;
}
.purple_d4 {
  background: rgb(78, 0, 131) !important;
}
/* red */
.red_d1 {
  background: rgb(216, 1, 1) !important;
}
.red_d2 {
  background: rgb(197, 0, 0) !important;
}
.red_d3 {
  background: rgb(155, 0, 0) !important;
}
.red_d4 {
  background: rgb(116, 0, 0) !important;
}
/* Blue */
.blue_d1 {
  background: rgb(1, 5, 236) !important;
}
.blue_d2 {
  background: rgb(0, 3, 199) !important;
}
.blue_d3 {
  background: rgb(0, 3, 151) !important;
}
.blue_d4 {
  background: rgb(0, 2, 104) !important;
}
/* green */
.green_d1 {
  background: rgb(27, 228, 0) !important;
}
.green_d2 {
  background: rgb(22, 185, 0) !important;
}
.green_d3 {
  background: rgb(19, 160, 0) !important;
}
.green_d4 {
  background: rgb(14, 121, 0) !important;
}
/* orange */
.orange {
  background: rgb(255, 230, 0) !important;
}
.orange_d1 {
  background: rgb(255, 208, 0) !important;
}
.orange_d2 {
  background: rgb(255, 196, 0) !important;
}
.orange_d3 {
  background: rgb(255, 174, 0) !important;
}
.orange_d4 {
  background: rgb(255, 153, 0) !important;
}
/* Gradient */
.pink_toBlue {
  background: rgb(0, 194, 255);
  background: linear-gradient(
    232deg,
    rgba(0, 194, 255, 1) 0%,
    rgba(252, 0, 255, 1) 100%
  ) !important;
}
.blue_toPink {
  background: rgb(0, 194, 255);
  background: linear-gradient(
    90deg,
    rgba(0, 194, 255, 1) 0%,
    rgba(252, 0, 255, 1) 100%
  ) !important;
}
.pink_toBlue_d1 {
  background: rgb(0, 39, 255);
  background: linear-gradient(
    232deg,
    rgba(0, 39, 255, 1) 0%,
    rgba(252, 0, 255, 1) 100%
  ) !important;
}
.blue_toPink_d1 {
  background: rgb(0, 39, 255);
  background: linear-gradient(
    90deg,
    rgba(0, 39, 255, 1) 0%,
    rgba(252, 0, 255, 1) 100%
  ) !important;
}

/* Hover */

.hover_red:hover {
  background: rgb(253, 12, 12) !important;
}
.hover_red_l1:hover {
  background: rgb(255, 51, 51) !important;
}
.hover_red_l2:hover {
  background: rgb(255, 72, 72) !important;
}
.hover_red_l3:hover {
  background: rgb(253, 95, 95) !important;
}
.hover_red_l4:hover {
  background: rgb(255, 120, 120) !important;
}
/* blue */
.hover_blue:hover {
  background: rgb(21, 25, 255) !important;
}
.hover_blue_l1:hover {
  background: rgb(70, 73, 255) !important;
}
.hover_blue_l2:hover {
  background: rgb(99, 101, 255) !important;
}
.hover_blue_l3:hover {
  background: rgb(123, 125, 255) !important;
}
.hover_blue_l4:hover {
  background: rgb(168, 169, 255) !important;
}
/* green */
.hover_green:hover {
  background: rgb(30, 255, 0) !important;
}
.hover_green_l1:hover {
  background: rgb(73, 253, 50) !important;
}
.hover_green_l2:hover {
  background: rgb(100, 255, 80) !important;
}
.hover_green_l3:hover {
  background: rgb(117, 255, 99) !important;
}
.hover_green_l4:hover {
  background: rgb(162, 255, 150) !important;
}
/* yellow */
.hover_yellow:hover {
  background: rgb(255, 251, 0) !important;
}
.hover_yellow_l1:hover {
  background: rgb(255, 251, 39) !important;
}
.hover_yellow_l2:hover {
  background: rgb(255, 252, 63) !important;
}
.hover_yellow_l3:hover {
  background: rgb(255, 252, 98) !important;
}
.hover_yellow_l4:hover {
  background: rgb(255, 253, 131) !important;
}
/* purple */
.hover_purple:hover {
  background: rgb(161, 21, 255) !important;
}
.hover_purple_l1:hover {
  background: rgb(172, 48, 255) !important;
}
.hover_purple_l2:hover {
  background: rgb(183, 74, 255) !important;
}
.hover_purple_l3:hover {
  background: rgb(192, 99, 255) !important;
}
.hover_purple_l4:hover {
  background: rgb(203, 125, 255) !important;
}
/* Dark */
/* purple */
.hover_purple_d1:hover {
  background: rgb(138, 1, 230) !important;
}
.hover_purple_d2:hover {
  background: rgb(108, 1, 179) !important;
}
.hover_purple_d3:hover {
  background: rgb(97, 0, 161) !important;
}
.hover_purple_d4:hover {
  background: rgb(78, 0, 131) !important;
}
/* red */
.hover_red_d1:hover {
  background: rgb(216, 1, 1) !important;
}
.hover_red_d2:hover {
  background: rgb(197, 0, 0) !important;
}
.hover_red_d3:hover {
  background: rgb(155, 0, 0) !important;
}
.hover_red_d4:hover {
  background: rgb(116, 0, 0) !important;
}
/* Blue */
.hover_blue_d1:hover {
  background: rgb(1, 5, 236) !important;
}
.hover_blue_d2:hover {
  background: rgb(0, 3, 199) !important;
}
.hover_blue_d3:hover {
  background: rgb(0, 3, 151) !important;
}
.hover_blue_d4:hover {
  background: rgb(0, 2, 104) !important;
}
/* green */
.hover_green_d1:hover {
  background: rgb(27, 228, 0) !important;
}
.hover_green_d2:hover {
  background: rgb(22, 185, 0) !important;
}
.hover_green_d3:hover {
  background: rgb(19, 160, 0) !important;
}
.hover_green_d4:hover {
  background: rgb(14, 121, 0) !important;
}
/* orange */
.hover_orange:hover {
  background: rgb(255, 230, 0) !important;
}
.hover_orange_d1:hover {
  background: rgb(255, 208, 0) !important;
}
.hover_orange_d2:hover {
  background: rgb(255, 196, 0) !important;
}
.hover_orange_d3:hover {
  background: rgb(255, 174, 0) !important;
}
.hover_orange_d4:hover {
  background: rgb(255, 153, 0) !important;
}
/* Gradient */
.hover_pink_toBlue:hover {
  background: rgb(0, 194, 255);
  background: linear-gradient(
    232deg,
    rgba(0, 194, 255, 1) 0%,
    rgba(252, 0, 255, 1) 100%
  ) !important;
}
.hover_blue_toPink:hover {
  background: rgb(0, 194, 255);
  background: linear-gradient(
    90deg,
    rgba(0, 194, 255, 1) 0%,
    rgba(252, 0, 255, 1) 100%
  ) !important;
}
.hover_pink_toBlue_d1:hover {
  background: rgb(0, 39, 255);
  background: linear-gradient(
    232deg,
    rgba(0, 39, 255, 1) 0%,
    rgba(252, 0, 255, 1) 100%
  ) !important;
}
.hover_blue_toPink_d1:hover {
  background: rgb(0, 39, 255);
  background: linear-gradient(
    90deg,
    rgba(0, 39, 255, 1) 0%,
    rgba(252, 0, 255, 1) 100%
  ) !important;
}

/* Dark */
body.dark .dark_red {
  background: rgb(253, 12, 12) !important;
}
body.dark .dark_red_l1 {
  background: rgb(255, 51, 51) !important;
}
body.dark .dark_red_l2 {
  background: rgb(255, 72, 72) !important;
}
body.dark .dark_red_l3 {
  background: rgb(253, 95, 95) !important;
}
body.dark .dark_red_l4 {
  background: rgb(255, 120, 120) !important;
}
/* blue */
body.dark .dark_blue {
  background: rgb(21, 25, 255) !important;
}
body.dark .dark_blue_l1 {
  background: rgb(70, 73, 255) !important;
}
body.dark .dark_blue_l2 {
  background: rgb(99, 101, 255) !important;
}
body.dark .dark_blue_l3 {
  background: rgb(123, 125, 255) !important;
}
body.dark .dark_blue_l4 {
  background: rgb(168, 169, 255) !important;
}
/* green */
body.dark .dark_green {
  background: rgb(30, 255, 0) !important;
}
body.dark .dark_green_l1 {
  background: rgb(73, 253, 50) !important;
}
body.dark .dark_green_l2 {
  background: rgb(100, 255, 80) !important;
}
body.dark .dark_green_l3 {
  background: rgb(117, 255, 99) !important;
}
body.dark .dark_green_l4 {
  background: rgb(162, 255, 150) !important;
}
/* yellow */
body.dark .dark_yellow {
  background: rgb(255, 251, 0) !important;
}
body.dark .dark_yellow_l1 {
  background: rgb(255, 251, 39) !important;
}
body.dark .dark_yellow_l2 {
  background: rgb(255, 252, 63) !important;
}
body.dark .dark_yellow_l3 {
  background: rgb(255, 252, 98) !important;
}
body.dark .dark_yellow_l4 {
  background: rgb(255, 253, 131) !important;
}
/* purple */
body.dark .dark_purple {
  background: rgb(161, 21, 255) !important;
}
body.dark .dark_purple_l1 {
  background: rgb(172, 48, 255) !important;
}
body.dark .dark_purple_l2 {
  background: rgb(183, 74, 255) !important;
}
body.dark .dark_purple_l3 {
  background: rgb(192, 99, 255) !important;
}
body.dark .dark_purple_l4 {
  background: rgb(203, 125, 255) !important;
}
/* Dark */
/* purple */
body.dark .dark_purple_d1 {
  background: rgb(138, 1, 230) !important;
}
body.dark .dark_purple_d2 {
  background: rgb(108, 1, 179) !important;
}
body.dark .dark_purple_d3 {
  background: rgb(97, 0, 161) !important;
}
body.dark .dark_purple_d4 {
  background: rgb(78, 0, 131) !important;
}
/* red */
body.dark .dark_red_d1 {
  background: rgb(216, 1, 1) !important;
}
body.dark .dark_red_d2 {
  background: rgb(197, 0, 0) !important;
}
body.dark .dark_red_d3 {
  background: rgb(155, 0, 0) !important;
}
body.dark .dark_red_d4 {
  background: rgb(116, 0, 0) !important;
}
/* Blue */
body.dark .dark_blue_d1 {
  background: rgb(1, 5, 236) !important;
}
body.dark .dark_blue_d2 {
  background: rgb(0, 3, 199) !important;
}
body.dark .dark_blue_d3 {
  background: rgb(0, 3, 151) !important;
}
body.dark .dark_blue_d4 {
  background: rgb(0, 2, 104) !important;
}
/* green */
body.dark .dark_green_d1 {
  background: rgb(27, 228, 0) !important;
}
body.dark .dark_green_d2 {
  background: rgb(22, 185, 0) !important;
}
body.dark .dark_green_d3 {
  background: rgb(19, 160, 0) !important;
}
body.dark .dark_green_d4 {
  background: rgb(14, 121, 0) !important;
}
/* orange */
body.dark .dark_orange {
  background: rgb(255, 230, 0) !important;
}
body.dark .dark_orange_d1 {
  background: rgb(255, 208, 0) !important;
}
body.dark .dark_orange_d2 {
  background: rgb(255, 196, 0) !important;
}
body.dark .dark_orange_d3 {
  background: rgb(255, 174, 0) !important;
}
body.dark .dark_orange_d4 {
  background: rgb(255, 153, 0) !important;
}
/* Gradient */
body.dark .dark_pink_toBlue {
  background: rgb(0, 194, 255);
  background: linear-gradient(
    232deg,
    rgba(0, 194, 255, 1) 0%,
    rgba(252, 0, 255, 1) 100%
  ) !important;
}
body.dark .dark_blue_toPink {
  background: rgb(0, 194, 255);
  background: linear-gradient(
    90deg,
    rgba(0, 194, 255, 1) 0%,
    rgba(252, 0, 255, 1) 100%
  ) !important;
}
body.dark .dark_pink_toBlue_d1 {
  background: rgb(0, 39, 255);
  background: linear-gradient(
    232deg,
    rgba(0, 39, 255, 1) 0%,
    rgba(252, 0, 255, 1) 100%
  ) !important;
}
body.dark .dark_blue_toPink_d1 {
  background: rgb(0, 39, 255);
  background: linear-gradient(
    90deg,
    rgba(0, 39, 255, 1) 0%,
    rgba(252, 0, 255, 1) 100%
  ) !important;
}

/* Text*/
.text_gray {
  color: rgb(189, 189, 189);
}
.text_gray_d1 {
  color: rgb(143, 143, 143);
}
.text_gray_d2 {
  color: rgb(131, 131, 131);
}
.text_gray_d3 {
  color: rgb(78, 78, 78);
}
.text_gray_d4 {
  color: rgb(36, 36, 36);
}
.text_red {
  color: rgb(253, 12, 12) !important;
}
.text_red_l1 {
  color: rgb(255, 51, 51) !important;
}
.text_red_l2 {
  color: rgb(255, 72, 72) !important;
}
.text_red_l3 {
  color: rgb(253, 95, 95) !important;
}
.text_red_l4 {
  color: rgb(255, 120, 120) !important;
}
/* blue */
.text_blue {
  color: rgb(21, 25, 255) !important;
}
.text_blue_l1 {
  color: rgb(70, 73, 255) !important;
}
.text_blue_l2 {
  color: rgb(99, 101, 255) !important;
}
.text_blue_l3 {
  color: rgb(123, 125, 255) !important;
}
.text_blue_l4 {
  color: rgb(168, 169, 255) !important;
}
/* green */
.text_green {
  color: rgb(30, 255, 0) !important;
}
.text_green_l1 {
  color: rgb(73, 253, 50) !important;
}
.text_green_l2 {
  color: rgb(100, 255, 80) !important;
}
.text_green_l3 {
  color: rgb(117, 255, 99) !important;
}
.text_green_l4 {
  color: rgb(162, 255, 150) !important;
}
/* yellow */
.text_yellow {
  color: rgb(255, 251, 0) !important;
}
.text_yellow_l1 {
  color: rgb(255, 251, 39) !important;
}
.text_yellow_l2 {
  color: rgb(255, 252, 63) !important;
}
.text_yellow_l3 {
  color: rgb(255, 252, 98) !important;
}
.text_yellow_l4 {
  color: rgb(255, 253, 131) !important;
}
/* purple */
.text_purple {
  color: rgb(161, 21, 255) !important;
}
.text_purple_l1 {
  color: rgb(172, 48, 255) !important;
}
.text_purple_l2 {
  color: rgb(183, 74, 255) !important;
}
.text_purple_l3 {
  color: rgb(192, 99, 255) !important;
}
.text_purple_l4 {
  color: rgb(203, 125, 255) !important;
}
/* Dark */
/* purple */
.text_purple_d1 {
  color: rgb(138, 1, 230) !important;
}
.text_purple_d2 {
  color: rgb(108, 1, 179) !important;
}
.text_purple_d3 {
  color: rgb(97, 0, 161) !important;
}
.text_purple_d4 {
  color: rgb(78, 0, 131) !important;
}
/* red */
.text_red_d1 {
  color: rgb(216, 1, 1) !important;
}
.text_red_d2 {
  color: rgb(197, 0, 0) !important;
}
.text_red_d3 {
  color: rgb(155, 0, 0) !important;
}
.text_red_d4 {
  color: rgb(116, 0, 0) !important;
}
/* Blue */
.text_blue_d1 {
  color: rgb(1, 5, 236) !important;
}
.text_blue_d2 {
  color: rgb(0, 3, 199) !important;
}
.text_blue_d3 {
  color: rgb(0, 3, 151) !important;
}
.text_blue_d4 {
  color: rgb(0, 2, 104) !important;
}
/* green */
.text_green_d1 {
  color: rgb(27, 228, 0) !important;
}
.text_green_d2 {
  color: rgb(22, 185, 0) !important;
}
.text_green_d3 {
  color: rgb(19, 160, 0) !important;
}
.text_green_d4 {
  color: rgb(14, 121, 0) !important;
}
/* orange */
.text_orange {
  color: rgb(255, 230, 0) !important;
}
.text_orange_d1 {
  color: rgb(255, 208, 0) !important;
}
.text_orange_d2 {
  color: rgb(255, 196, 0) !important;
}
.text_orange_d3 {
  color: rgb(255, 174, 0) !important;
}
.text_orange_d4 {
  color: rgb(255, 153, 0) !important;
}

body.dark .darkText_gray {
  color: rgb(189, 189, 189);
}
body.dark .darkText_gray_d1 {
  color: rgb(143, 143, 143);
}
body.dark .darkText_gray_d2 {
  color: rgb(131, 131, 131);
}
body.dark .darkText_gray_d3 {
  color: rgb(78, 78, 78);
}
body.dark .darkText_gray_d4 {
  color: rgb(36, 36, 36);
}
body.dark .darkText_red {
  color: rgb(253, 12, 12) !important;
}
body.dark .darkText_red_l1 {
  color: rgb(255, 51, 51) !important;
}
body.dark .darkText_red_l2 {
  color: rgb(255, 72, 72) !important;
}
body.dark .darkText_red_l3 {
  color: rgb(253, 95, 95) !important;
}
body.dark .darkText_red_l4 {
  color: rgb(255, 120, 120) !important;
}
/* blue */
body.dark .darkText_blue {
  color: rgb(21, 25, 255) !important;
}
body.dark .darkText_blue_l1 {
  color: rgb(70, 73, 255) !important;
}
body.dark .darkText_blue_l2 {
  color: rgb(99, 101, 255) !important;
}
body.dark .darkText_blue_l3 {
  color: rgb(123, 125, 255) !important;
}
body.dark .darkText_blue_l4 {
  color: rgb(168, 169, 255) !important;
}
/* green */
body.dark .darkText_green {
  color: rgb(30, 255, 0) !important;
}
body.dark .darkText_green_l1 {
  color: rgb(73, 253, 50) !important;
}
body.dark .darkText_green_l2 {
  color: rgb(100, 255, 80) !important;
}
body.dark .darkText_green_l3 {
  color: rgb(117, 255, 99) !important;
}
body.dark .darkText_green_l4 {
  color: rgb(162, 255, 150) !important;
}
/* yellow */
body.dark .darkText_yellow {
  color: rgb(255, 251, 0) !important;
}
body.dark .darkText_yellow_l1 {
  color: rgb(255, 251, 39) !important;
}
body.dark .darkText_yellow_l2 {
  color: rgb(255, 252, 63) !important;
}
body.dark .darkText_yellow_l3 {
  color: rgb(255, 252, 98) !important;
}
body.dark .darkText_yellow_l4 {
  color: rgb(255, 253, 131) !important;
}
/* purple */
body.dark .darkText_purple {
  color: rgb(161, 21, 255) !important;
}
body.dark .darkText_purple_l1 {
  color: rgb(172, 48, 255) !important;
}
body.dark .darkText_purple_l2 {
  color: rgb(183, 74, 255) !important;
}
body.dark .darkText_purple_l3 {
  color: rgb(192, 99, 255) !important;
}
body.dark .darkText_purple_l4 {
  color: rgb(203, 125, 255) !important;
}
/* Dark */
/* purple */
body.dark .darkText_purple_d1 {
  color: rgb(138, 1, 230) !important;
}
body.dark .darkText_purple_d2 {
  color: rgb(108, 1, 179) !important;
}
body.dark .darkText_purple_d3 {
  color: rgb(97, 0, 161) !important;
}
body.dark .darkText_purple_d4 {
  color: rgb(78, 0, 131) !important;
}
/* red */
body.dark .darkText_red_d1 {
  color: rgb(216, 1, 1) !important;
}
body.dark .darkText_red_d2 {
  color: rgb(197, 0, 0) !important;
}
body.dark .darkText_red_d3 {
  color: rgb(155, 0, 0) !important;
}
body.dark .darkText_red_d4 {
  color: rgb(116, 0, 0) !important;
}
/* Blue */
body.dark .darkText_blue_d1 {
  color: rgb(1, 5, 236) !important;
}
body.dark .darkText_blue_d2 {
  color: rgb(0, 3, 199) !important;
}
body.dark .darkText_blue_d3 {
  color: rgb(0, 3, 151) !important;
}
body.dark .darkText_blue_d4 {
  color: rgb(0, 2, 104) !important;
}
/* green */
body.dark .darkText_green_d1 {
  color: rgb(27, 228, 0) !important;
}
body.dark .darkText_green_d2 {
  color: rgb(22, 185, 0) !important;
}
body.dark .darkText_green_d3 {
  color: rgb(19, 160, 0) !important;
}
body.dark .darkText_green_d4 {
  color: rgb(14, 121, 0) !important;
}
/* orange */
body.dark .darkText_orange {
  color: rgb(255, 230, 0) !important;
}
body.dark .darkText_orange_d1 {
  color: rgb(255, 208, 0) !important;
}
body.dark .darkText_orange_d2 {
  color: rgb(255, 196, 0) !important;
}
body.dark .darkText_orange_d3 {
  color: rgb(255, 174, 0) !important;
}
body.dark .darkText_orange_d4 {
  color: rgb(255, 153, 0) !important;
}