@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primary:  #75d9d9;
  --buttonbackground:#4F8DF8;
  --pure:#ffff;
   --hoverbutton:#74D7D9;
   --warmgolden:#F59B47;
   --backgroundhover:#1F2532;
   --dark:#0000;
   --skyblue:#467BFF;
   --background: #0B1120;
   --foreground: #ededed;
   --mediumGray:#8C8C8C;
   --textGray:#AFBCCFFF;
   --VibrantSkyBlue:#4C86FA;
}
/* 
@media (prefers-color-scheme: dark) {
  :root {

    
  }
} */

body {
  color: var(--foreground);
  background: var(--background);
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
}   

/* html {
  zoom: 1;
}

@media screen and (max-width: 1400px) {
  html {
    zoom: 0.9;
  }
}

@media screen and (max-width: 1200px) {
  html {
    zoom: 0.8;
  }
}

@media screen and (max-width: 992px) {
  html {
    zoom: 0.7;
  }
} */




.trade-button {
  background: linear-gradient(to right, #4C86FA, #5FACEC, #70CFD4);

  border-radius: 30px;
  color: white;
  text-align: center;
  border: none;
  cursor: pointer;
  transition: all 8s ease-in-out; 
}

.trade-button:hover {
  background: linear-gradient(to left, #4C86FA, #5FACEC, #70CFD4);
}

.filter-shadow {
  filter: drop-shadow(0px 0px 50px rgba(255, 255, 255, 0.2));
}


.filter-secondary {
  filter: drop-shadow(0px 0px 40px rgba(255, 255, 255, 0.4));
}

.filter-primary {
  filter: drop-shadow(0 0 50px rgba(117, 217, 217, 0.8));
}



.searchbar-border-gradient {
  position: relative;
  background: transparent;
  border: none;
}


.searchbar-border-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  padding: 1px;
  background: linear-gradient(177deg, #30384E 45%, #1D2642 76%, #12192E 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Custom scrollbar for Webkit browsers */
::-webkit-scrollbar {
  width: 7px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #4C86FA, #5FACEC, #70CFD4);
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  background-color: #0B1121;
}
* {
  scrollbar-width: thin; /* Sets a thin scrollbar width */
  scrollbar-color: #70CFD4 #0B1121; /* Thumb color and track color */
}


.gradient-border {
  border: double 0.2em transparent; 
  border-radius: 5px;
  background-image: 
    linear-gradient(#0B1121, #0B1121), 
    linear-gradient(177deg, #30384E 45%, #1D2642 76%, #12192E 100%);
  background-origin: border-box; 
  background-clip: content-box, border-box; 
}



.gradient-rounded-border {
  border: double 0.2em transparent; 
  border-radius: 30px;
  background-image: 
    linear-gradient(#0B1121, #0B1121), 
    linear-gradient(177deg, #30384E 45%, #1D2642 76%, #12192E 100%);
  background-origin: border-box; 
  background-clip: content-box, border-box; 
}


.gradient-rounded-border.active {
  background-image:
    linear-gradient(#0b1121, #0b1121),
    linear-gradient(177deg, #ffff 45%, #ffff 76%, #ffff 100%);
}





.gradient-rounded-input {
  border: double 0.1em transparent; 
  border-radius: 30px;
  background-image: 
    linear-gradient(#0F1626, #0F1626), 
    linear-gradient(177deg, #30384E 45%, #1D2642 76%, #12192E 100%);
  background-origin: border-box; 
  background-clip: content-box, border-box; 
}