@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap");

#balance-box {
  padding-top: 20px;
  background-color: #020a21;
}

#balance-box .text-balance-coin {
  color: #d39b00;
}

#balance-box h2 {
  font-weight: 900;
}

#balance-box .text-coin {
  color: #fff;
}

#balance {
  margin-top: 33px;
}

#footer-app {
  background: linear-gradient(to top right, rgba(61, 40, 96, 0.6), #00082cff);
}

input:focus {
  background-color: #1a1d2dff !important;
}

.icon-brl {
  cursor: pointer;
  text-align: right;
  font-size: 2em;
  background: url(../img/icons/icon-brl.png) no-repeat 15px;
  background-size: 50px;
  border: 1px solid #fff;
  background-color: #1a1d2dff;
}

.icon-eur {
  cursor: pointer;
  text-align: right;
  font-size: 2em;
  background: url(../img/icons/icon-eur.png) no-repeat 15px;
  background-size: 50px;
  border: 1px solid #fff;
  background-color: #1a1d2dff;
}

.icon-usd {
  cursor: pointer;
  text-align: right;
  font-size: 2em;
  background: url(../img/icons/icon-usd.png) no-repeat 15px;
  background-size: 50px;
  border: 1px solid #fff;
  background-color: #1a1d2dff;
}

.icon-mx {
  cursor: pointer;
  text-align: right;
  font-size: 2em;
  background: url(../img/icons/icon-mx.png) no-repeat 15px;
  background-size: 50px;
  border: 1px solid #fff;
  background-color: #1a1d2dff;
}

.icon-gos {
  cursor: pointer;
  text-align: right;
  font-size: 2em;
  background: url(../img/icons/icon-gos.png) no-repeat 15px;
  background-size: 50px;
  border: 1px solid #fff;
  background-color: #1a1d2dff;
}

.icon-gico {
  cursor: pointer;
  text-align: right;
  font-size: 2em;
  background: url("../img/icons/icon-gico.png?v=3") no-repeat 15px;
  background-size: 50px;
  border: 1px solid #fff;
  background-color: #1a1d2dff;
}

.icon-reex {
  cursor: pointer;
  text-align: right;
  font-size: 2em;
  background: url(../img/icons/icon-reex.png) no-repeat 15px;
  background-size: 50px;
  border: 1px solid #fff;
  background-color: #1a1d2dff;
}

.icon-quart {
  cursor: pointer;
  text-align: right;
  font-size: 2em;
  background: url(../img/icons/icon-quart.png) no-repeat 15px;
  background-size: 50px;
  border: 1px solid #fff;
  background-color: #1a1d2dff;
}

.icon-hmap {
  cursor: pointer;
  text-align: right;
  font-size: 2em;
  background: url(../img/icons/icon-hmap.png) no-repeat 15px;
  background-size: 50px;
  border: 1px solid #fff;
  background-color: #1a1d2dff;
}

.icon-brl-deposit {
  cursor: pointer;
  text-align: right;
  font-size: 2em;
  background: url(../img/icons/icon-brl.png) no-repeat 15px;
  background-size: 42px;
  border: 1px solid #fff;
  background-color: #1a1d2dff;
}

.icon-gos-deposit {
  cursor: pointer;
  text-align: right;
  font-size: 2em;
  background: url(../img/icons/icon-gos.png) no-repeat 15px;
  background-size: 42px;
  border: 1px solid #fff;
  background-color: #1a1d2dff;
}

.icon-gico-deposit {
  cursor: pointer;
  text-align: right;
  font-size: 2em;
  background: url("../img/icons/icon-gico.png?v=3") no-repeat 15px;
  background-size: 42px;
  border: 1px solid #fff;
  background-color: #1a1d2dff;
}

.icon-reex-deposit {
  cursor: pointer;
  text-align: right;
  font-size: 2em;
  background: url(../img/icons/icon-reex.png) no-repeat 15px;
  background-size: 42px;
  border: 1px solid #fff;
  background-color: #1a1d2dff;
}

.icon-quart-deposit {
  cursor: pointer;
  text-align: right;
  font-size: 2em;
  background: url(../img/icons/icon-quart.png) no-repeat 15px;
  background-size: 42px;
  border: 1px solid #fff;
  background-color: #1a1d2dff;
}

.icon-hmap-deposit {
  cursor: pointer;
  text-align: right;
  font-size: 2em;
  background: url(../img/icons/icon-hmap.png) no-repeat 15px;
  background-size: 42px;
  border: 1px solid #fff;
  background-color: #1a1d2dff;
}

.btn-dark-text {
  color: #333;
}

.cursor-pointer {
  cursor: pointer;
}

[data-bs-theme="dark"] {
  .list-group-item:hover {
    background-color: #1a1d2dff;
    color: #fff;
  }

  #footer-buttons {
    transform: translateY(0);
    transition: transform 0.5s ease-in-out;
    background: linear-gradient(to top right, rgba(61, 40, 96, 0.6), #00082cff);
  }

  .cotation-coin {
    color: #d39b00;
  }

  .gradient-glowing-text {
    display: grid;

    > * {
      grid-area: 1 / 1;
    }

    > h1,
    > h2 {
      --space: ;
      font-size: 3.3em;
      letter-spacing: -0.05em;
      font-weight: 900;
      font-family: "Geist", sans-serif;
      background: linear-gradient(
        to right var(--space),
        oklch(90% 0.3 230),
        oklch(70% 0.3 340)
      );
      -webkit-background-clip: text;
      color: transparent;

      @supports (background: linear-gradient(in oklab, #000, #fff)) {
        --space: in oklch;
      }

      @media (prefers-reduced-motion: no-preference) {
        animation: rotate-gradient 5s linear infinite;
      }

      &[aria-hidden] {
        filter: blur(clamp(30px, 4vw, 60px)) saturate(2);
      }
    }

    h2 {
      font-size: 2.3em;
    }
  }

  @keyframes rotate-gradient {
    0%,
    100% {
      background: linear-gradient(
        to right in oklch,
        oklch(90% 0.3 230),
        oklch(70% 0.3 340)
      );
      -webkit-background-clip: text;
      color: transparent;
    }

    25% {
      background: linear-gradient(
        to right in oklch,
        oklch(87% 0.4 142),
        oklch(100% 0.4 95)
      );
      -webkit-background-clip: text;
      color: transparent;
    }

    50% {
      background: linear-gradient(
        to right in oklab,
        oklch(95% 0.25 160),
        oklch(75% 0.5 260)
      );
      -webkit-background-clip: text;
      color: transparent;
    }

    75% {
      background: linear-gradient(
        to right in oklab,
        oklch(95% 0.4 95),
        oklch(55% 0.45 350)
      );
      -webkit-background-clip: text;
      color: transparent;
    }
  }
}

[data-bs-theme="light"] {
  #container-app {
    max-width: 100%;
    min-width: 100%;
    background-color: #fff;
  }

  #footer-buttons {
    transform: translateY(0);
    transition: transform 0.5s ease-in-out;
    background: linear-gradient(to top right, #fff, #fff);
  }

  .gradient-glowing-text {
    display: grid;

    > * {
      grid-area: 1 / 1;
    }

    > h1,
    > h2 {
      --space: ;
      font-size: 3.3em;
      letter-spacing: -0.05em;
      font-weight: 900;
      font-family: "Geist", sans-serif;
      background: linear-gradient(
        to right var(--space),
        oklch(0.51 0.2221 296.33),
        oklch(0.24 0.1038 262.06)
      );
      -webkit-background-clip: text;
      -moz-background-clip: text;
      background-clip: text;
      color: transparent;

      @supports (background: linear-gradient(in oklab, #000, #fff)) {
        --space: in oklch;
      }

      @media (prefers-reduced-motion: no-preference) {
        animation: rotate-gradient 5s linear infinite;
      }

      &[aria-hidden] {
        filter: blur(clamp(30px, 4vw, 60px)) saturate(2);
      }
    }

    #h1-shadow {
      display: none;
    }

    h2 {
      font-size: 2.3em;
    }
  }

  @keyframes rotate-gradient {
    0%,
    100% {
      background: linear-gradient(
        to right in oklch,
        oklch(90% 0.3 230),
        oklch(70% 0.3 340)
      );
      -webkit-background-clip: text;
      color: transparent;
    }

    25% {
      background: linear-gradient(
        to right in oklch,
        oklch(87% 0.4 142),
        oklch(100% 0.4 95)
      );
      -webkit-background-clip: text;
      color: transparent;
    }

    50% {
      background: linear-gradient(
        to right in oklab,
        oklch(95% 0.25 160),
        oklch(75% 0.5 260)
      );
      -webkit-background-clip: text;
      color: transparent;
    }

    75% {
      background: linear-gradient(
        to right in oklab,
        oklch(95% 0.4 95),
        oklch(55% 0.45 350)
      );
      -webkit-background-clip: text;
      color: transparent;
    }
  }
}