:root {
  /* Colors general */
  --bg-color-light: #e8e8e8;
  --bg-color-dark: #212121;
  --text-color-light: #000;
  --text-color-dark: #fff;

  /* Loader colors */
  --loader-1-dark: rgb(158, 136, 246);
  --loader-2-dark: rgb(97, 183, 253);
  --loader-3-dark: rgb(95, 249, 175);
  --loader-4-dark: rgb(243, 171, 89);

  --loader-1-light: rgb(158, 136, 246);
  --loader-2-light: rgb(97, 183, 253);
  --loader-3-light: rgb(95, 249, 175);
  --loader-4-light: rgb(243, 171, 89);

  /* Tooltip */
  --tooltip-bg-dark: rgba(0, 0, 0, 0.8);
  --tooltip-bg-light: rgba(255, 255, 255, 0.8);
  --tooltip-color-dark: #fff;
  --tooltip-color-light: #000;
}

/* THEME DARK */
html[data-theme="dark"] {
  --bg-color: var(--bg-color-dark);
  --text-color: var(--text-color-dark);

  --loader-1: var(--loader-1-dark);
  --loader-2: var(--loader-2-dark);
  --loader-3: var(--loader-3-dark);
  --loader-4: var(--loader-4-dark);

  --tooltip-bg: var(--tooltip-bg-dark);
  --tooltip-color: var(--tooltip-color-dark);
}

/* THEME LIGHT */
html[data-theme="light"] {
  --bg-color: var(--bg-color-light);
  --text-color: var(--text-color-light);

  --loader-1: var(--loader-1-light);
  --loader-2: var(--loader-2-light);
  --loader-3: var(--loader-3-light);
  --loader-4: var(--loader-4-light);

  --tooltip-bg: var(--tooltip-bg-light);
  --tooltip-color: var(--tooltip-color-light);
}
body,
html {
  margin: 0;
  padding: 0;
  font-family: "Roboto Flex", sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  user-select: none;
}

/* LOADING  */
.my-loader {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.loader-text {
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.loader-text-title {
  font-size: 24px;
}

.loader-text-subtitle {
  font-size: 18px;
  font-weight: 500;
  opacity: 0.6;
}

.loader {
  height: 120px;
  width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.loader div {
  height: 30px;
  width: 30px;
  position: absolute;
  animation: move 4s infinite;
}

.loader div:nth-child(1) {
  background-color: var(--loader-1);
  box-shadow: var(--loader-1) 0px 7px 29px 0px;
  transform: translate(-30px, -30px);
  animation-delay: -1s;
}
.loader div:nth-child(2) {
  background-color: var(--loader-2);
  box-shadow: var(--loader-2) 0px 7px 29px 0px;
  transform: translate(30px, -30px);
  animation-delay: -2s;
}
.loader div:nth-child(3) {
  background-color: var(--loader-3);
  box-shadow: var(--loader-3) 0px 7px 29px 0px;
  transform: translate(30px, 30px);
  animation-delay: -3s;
}
.loader div:nth-child(4) {
  background-color: var(--loader-4);
  box-shadow: var(--loader-4) 0px 7px 29px 0px;
  transform: translate(-30px, 30px);
  animation-delay: -4s;
}

@keyframes move {
  0% {
    transform: translate(-30px, -30px);
  }
  25% {
    transform: translate(30px, -30px);
  }
  50% {
    transform: translate(30px, 30px);
  }
  75% {
    transform: translate(-30px, 30px);
  }
  100% {
    transform: translate(-30px, -30px);
  }
}

/* cursor tooltip */
.cursor-tooltip {
  position: fixed;
  pointer-events: none;
  background-color: var(--tooltip-bg);
  color: var(--tooltip-color);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 9999;
  transform: translate(15px, 15px);
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.3s ease, color 0.3s ease;
  backdrop-filter: blur(24px);
}

/* 3 dots animation */
.dots::after {
  content: "";
  display: inline-block;
  width: 1ch;
  text-align: left;
  animation: dotBlink 1s steps(3, end) infinite;
}

@keyframes dotBlink {
  0%,
  20% {
    content: "";
  }
  40% {
    content: ".";
  }
  60% {
    content: "..";
  }
  80%,
  100% {
    content: "...";
  }
}