@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: "IBM Plex Mono", monospace;
}

* {
  scroll-behavior: smooth;
}

/* WALLET BUTTON */
@media (max-width: 1023px) {
  [data-rk] .ju367v1s {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
}
.ju367v1s .iekbcc9 {
  background: linear-gradient(45deg, #eaa133, #ea580c) !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
  overflow: hidden !important;
  border-radius: 1.5rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
  font-weight: normal !important;
  font-family: "IBM Plex Mono", monospace !important;
  font-size: 14px !important;
  transform: scale(1) !important;
  transition-property: all !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 300ms !important;
}

.ju367v1s .iekbcc9::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition-property: all !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 300ms !important;
  z-index: -1;
}

.ju367v1s .iekbcc9:hover::before {
  opacity: 0.3;
}

[data-rk] .ju367va3 {
  color: #fff !important;
  font-weight: normal !important;
  font-family: "IBM Plex Mono", monospace !important;
  background-color: transparent !important;
  font-size: 14px !important;
  border: 0 !important;
}

[data-rk] .ju367v8a {
  padding: 0 !important;
  border: 0 !important;
  color: #fff !important;
}

[data-rk] .ju367v8b {
  /* padding-top: 0 !important; */
}
[data-rk] .ju367v6k {
  /* padding-bottom: 0 !important; */
}

[data-testid] {
  color: #000 !important;
}

[data-testid] .ju367v8a {
  padding: 6px 4px !important;
  color: #000 !important;
  font-weight: normal !important;
}

[data-testid] .ju367v9i {
  background: #ef6c3d !important;
  color: #fff !important;
}

[data-testid="rk-account-button"] .ju367v8a {
  color: #fff !important;
  padding: 0 !important;
}

[data-testid="rk-chain-button"] .ju367v8b,
[data-testid="rk-account-button"] .ju367v6k {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@layer base {
  .banner {
    @apply relative bg-[url('/images/bgimg11.png')] text-white bg-cover before:absolute before:top-0 before:left-0 before:w-full before:h-full before:bg-light dark:before:bg-black before:opacity-0 before:backdrop-blur-xl dark:before:opacity-70;
  }

  .banner::before {
    box-shadow: inset 50px 50px 50px rgba(255, 255, 255, 0.5),
      inset -50px -50px 50px rgba(255, 255, 255, 0.5);
  }

  [data-theme="dark"] .banner::before {
    box-shadow: inset 50px 50px 50px rgba(0, 0, 0, 1),
      inset -50px -50px 50px rgba(0, 0, 0, 1);
  }

  .button {
    @apply relative inline-flex items-center justify-center gap-1 py-3 px-6 rounded-3xl text-white overflow-hidden transition-all duration-300;
  }

  .button-primary {
    @apply bg-primary-gradient text-sm z-10 before:absolute before:left-0 before:top-0 before:w-full before:h-full before:rounded-3xl before:bg-black before:opacity-0 hover:before:opacity-30 before:transition-all before:duration-300 before:-z-10;
    background: #ef6c3d !important;
    color: #fff !important;
  }

  .button-dark {
    @apply bg-white dark:bg-black text-black dark:text-white hover:bg-light dark:hover:bg-dark transition-colors duration-300;
    background: #ef6c3d !important;
  }

  /* CHECKBOX */
  .custom-checkbox {
    border-color: #000;
  }

  [data-theme="dark"] .custom-checkbox {
    border-color: #fff;
  }

  .custom-checkbox:checked {
    border-color: #e75a26;
    background-image: linear-gradient(-45deg, transparent 65%, #dc9314 65.99%),
      linear-gradient(45deg, transparent 75%, #e75a26 75.99%),
      linear-gradient(-45deg, #ec9f0e 40%, transparent 40.99%),
      linear-gradient(
        45deg,
        #e75a26 30%,
        #fff 30.99%,
        #fff 40%,
        transparent 40.99%
      ),
      linear-gradient(-45deg, #fff 50%, #e69016 50.99%);
  }

  .tabs-bordered > .tab {
    @apply max-sm:w-full max-sm:mb-4 max-sm:last:mb-0 text-semi-dark border-white dark:border-dark transition-all duration-300 whitespace-nowrap max-sm:px-1;
  }

  .tab.tab-active:not(.tab-disabled):not([disabled]),
  .tab:is(input:checked) {
    @apply text-black dark:text-white border-black dark:border-white;
  }

  /* INPUT FILE */
  .file-input {
    @apply bg-transparent border-black dark:border-white;
  }

  /* INPUT CHECK */
  .toggle-primary:checked,
  .toggle-primary[checked="true"],
  .toggle-primary[aria-checked="true"] {
    background-color: var(--fallback, #e88012);
  }

  /* INPUTS */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  input[type="number"] {
    -moz-appearance: textfield;
  }

  /* RANGE INPUT */
  .range-primary {
    --range-shdw: #e79222 !important;
  }
}

.hero-main {
  height: calc(100vh - 100px);
}
