:root {
   --color-1: #c6ac89;
   --color-2: #ea9795;
   --color-3: #ce969e;
   --color-4: #faf4f1;
   --color-5: #97a887;
   --color-6: #d9bd98;
   --color-7: #f5c8bd;
   --color-8: #e4bcbd;
   --color-9: #faf4f1;
   --color-10: #b6bea4;
}
.color1 {
  color: var(--color-1) !important;
}
.color2 {
  color: var(--color-2) !important;
}
.color3 {
  color: var(--color-3) !important;
}
.color4 {
  color: var(--color-4) !important;
}
.color5 {
  color: var(--color-5) !important;
}
.color6 {
  color: var(--color-6) !important;
}
.color7 {
  color: var(--color-7) !important;
}
.color8 {
  color: var(--color-8) !important;
}
.color9 {
  color: var(--color-9) !important;
}
.color10 {
  color: var(--color-10) !important;
}

.bg-color1 {
  background-color: var(--color-1) !important;
}
.bg-color2 {
  background-color: var(--color-2) !important;
}
.bg-color3 {
  background-color: var(--color-3) !important;
}
.bg-color4 {
  background-color: var(--color-4) !important;
}
.bg-color5 {
  background-color: var(--color-5) !important;
}
.bg-color6 {
  background-color: var(--color-6) !important;
}
.bg-color7 {
  background-color: var(--color-7) !important;
}
.bg-color8 {
  background-color: var(--color-8) !important;
}
.bg-color9 {
  background-color: var(--color-9) !important;
}
.bg-color10 {
  background-color: var(--color-10) !important;
}

.imgTopo {
  width: 100px;
  filter: invert(100%);
}
.floatButton {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  bottom: 10px;
  right: 10px;
  display: flex;
  justify-content: center;
  align-items: bottom;
  z-index: 500;
  cursor: pointer;
  transition: 0.3s;
  transform: translateY(100%);
}
.floatButton img{
  width: 50px;
  height: 50px;
}

.floatButton.show {
  visibility: visible !important;
  opacity: 1;
  transform: translateY(0);
}