@import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');
@import 'tailwindcss';

/* TODO: fix this file. */

@theme {
  /* Fonts */
  --text-font: 'Rethink Sans', sans-serif;
  --font-family: 'Open Sans', sans-serif;
  --third-family: 'Allerta Stencil', sans-serif;
  --font3: 'Inter', sans-serif;
  --font-text: 'Rethink Sans', sans-serif;
  --font-primary: 'Open Sans', sans-serif;
  --font-third: 'Allerta Stencil', sans-serif;
  --font-inter: 'Inter', sans-serif;

  /* Colors */
  --primary: #fff;
  --primary-color: #0b0c10;
  --black: #000;
  --darkish: #050005;
  --brand: #74d6fd;
  --pink: #e01dee;
  --secondary: #e7ecf0;
  --secondary-color: #1a1c24;
  --collateral-color: #1d9259;
  --borrow-color: #f42222;
  --spinner-bgn: rgba(0, 0, 0, 0.5);
  --spinner-content: #393939;
  --card-border-1: #4e7787;
  --footer-bg-color: #00000d;
  --footer-text-color: #e7ebf5;
  --footer-line-color: rgba(231, 235, 245, 0.2);
  --footer-divider-bg: #201338;
  --dashboard-bg: rgba(11, 12, 16, 1);
  --success-color: #4caf50;
  --error-color: #ff5a5f;
  --color-overlay: rgba(0, 0, 0, 0.5);
  --bg: #120721;
  --border-color: #201338;
  --light-purple: #36294e;
  --gray: #83919f;
  --dark-purple: #120721;
  --light-blue: #74d5fd;
  --status-opened: #1edc9e;
  --status-closed: #433b5a;
  --status-pending: #83919f;
  --slider-gray: #393942;
  --dark-gray: #393942;
  --stormy-gray: #83919f;
  --deep-purple: #120721;
  --dark-background: #130713;
  --light-dark-background: #130713;
  --text-gray: #798795;
  --modal-border: #170f2e;
  --warning-colour: #bdc000;
  --warning-colour-alt: #272a0a;
  --warning-text-colour: #f0f0f0;
  --backdrop-filter: blur(12px);
  --header-bg: rgba(7, 0, 22, 0.8);
  --nav-button-hover: #49abd2;
  --nav-divider-bg: #36294e;
  --second-primary: #fdfdfd;
  --header-button-bg: #120721;
  --plain-button-bg: #0e0a16;
  --mask-gradient: #fff;
  --profit-indicator: #1edc9e;
  --loss-indicator: #f42222;
  --color-backdrop-dark: #14142880;
  --color-backdrop-darker: #1e1e3280;
  --color-border-light: #ffffff1a;
  --color-border-lighter: #ffffff33;
  --color-gradient-purple: #6f3ff566;
  --color-gradient-transparent: #6f3ff500;

  /* Gradients */
  --second-gradient-from: #e01dee;
  --second-gradient-to: #49abd2;
  --border-gradient-from: #49abd2;
  --border-gradient-to: #df1ced;
  --gradient: linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%);
  --gradient-from: #74d6fd;
  --gradient-to: #e01dee;
  --button-gradient-from: #74d6fd;
  --button-gradient-to: #e01dee;
  --button-gradient-via: #8fddfe;
  --button-gradient-hover-from: #74d6fd;
  --button-gradient-hover-to: #74d6fd;
  --button-gradient-active-from: #58c4ef;
  --button-gradient-active-to: #58c4ef;
  --card-bg-gradient-from: rgba(116, 214, 253, 0.5);
  --card-bg-gradient-to: rgba(11, 12, 16, 0.5);
  --closePosition-from: #49abd2;
  --closePosition-to: #e01dee;
  --blue-pink-gradient-from: #74d6fd;
  --blue-pink-gradient-to: #e01dee;
  --blue-pink-gradient-alt-from: #49abd2;
  --blue-pink-gradient-alt-to: #e01dee;
  --blue-pink-gradient-alt2-from: #49abd2;
  --blue-pink-gradient-alt2-to: #e01dee;
  --mask-gradient-from: linear-gradient(#fff 0 0) content-box;
  --mask-gradient-to: linear-gradient(#fff 0 0);
  --bg-app: url('../public/desktop-background.png');
  --bg-app-mobile: url('../public/mobile-background.png');
  --bg-main-gradient: linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%);
  --bg-button-gradient: linear-gradient(55deg, #74d6fd 0%, #e01dee 100%);
  --bg-button-gradient-hover: linear-gradient(55deg, #74d6fd 0%, #74d6fd 100%);
  --bg-button-gradient-active: linear-gradient(55deg, #58c4ef 0%, #58c4ef 100%);
  --bg-second-gradient: linear-gradient(55deg, #e01dee 0%, #49abd2 49%);
  --bg-border-gradient: linear-gradient(90deg, #49abd2 0%, #df1ced 99.5%);
  --bg-blue-pink-gradient: linear-gradient(90deg, #74d6fd 0%, #e01dee 100%);
  --bg-blue-pink-gradient-alt: linear-gradient(90deg, #49abd2 0%, #e01dee 100%);
  --bg-card-bg-gradient: linear-gradient(135deg, rgba(116, 214, 253, 0.5) 0%, rgba(11, 12, 16, 0.5) 100%);
  --bg-report-btn-bg-hover: linear-gradient(to right, rgba(147, 51, 234, 0.3), rgba(59, 130, 246, 0.3));

  /* Other */
  --thumb-image: url('./assets/icons/slider-thumb.svg');
  --purple-border: 1px solid #201338;
  --midnight-purple-border: 1px solid #36294e;
  --midnight-purple-hover-border: 1px solid #5b4b80;
  --font-weight-sm: 400;
  --font-weight-md: 500;
  --font-weight-lg: 600;
  --font-weight-xl: 700;
  --shadow-card: inset 4px 4px 9px 0 rgba(153, 234, 255, 0.25), 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  --blur-card: 42.1875px;
  --blur-backdrop: 12px;
  --border-purple: 1px;
  --border-midnight-purple: 1px;
  --border-midnight-purple-hover: 1px;
  --z-9999: 9999;
  --z-100: 100;

  /* Gradient Colors */
  --gradient-start: #49abd2;
  --gradient-end: #df1ced;
  --border-gradient: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 99.5%);
}

body {
  position: relative;
  overflow-x: hidden;
  background-color: var(--dashboard-bg);
}

main {
  overflow: hidden;
}

* {
  font-family: var(--font-family);
}

a {
  text-decoration: none;
}

li {
  list-style-type: none;
}

.App {
  background: url('/desktop-background.png') no-repeat;
  background-size: cover;
  min-height: 100vh;
  box-sizing: border-box;
  background-position: center;
}

@media (max-width: 768px) {
  .App {
    background: url('/mobile-background.png') no-repeat;
    background-size: cover;
    background-position: 50% 40%;
    height: 100%;
  }
}
@media (max-width: 480px) {
  .decoration:nth-child(2),
  .decoration:nth-child(4) {
    display: none;
  }
}
.decoration,
.star {
  position: absolute;
  z-index: -1;
}

.decoration-0 {
  width: 80%;
  height: 80%;
}

.decoration-1 {
  width: 30%;
  height: 30%;
}

.decoration-2 {
  width: 45%;
  height: 45%;
}

.decoration-3 {
  width: 75%;
  height: 75%;
}

.star {
  top: var(--top);
  left: var(--left);
  width: var(--size);
  height: var(--size);
}

@media (max-width: 1800px) {
  .decoration-0 {
    width: 65%;
    height: 65%;
    top: -15vh;
    left: -20vw;
  }

  .decoration-1 {
    width: 20%;
    height: 20%;
    top: -5vh;
    left: 10vw;
  }

  .decoration-2 {
    width: 40%;
    height: 40%;
    top: -10vh;
    left: 55vw;
  }

  .decoration-3 {
    width: 55%;
    height: 55%;
    top: -5vh;
    left: 62vw;
  }
}

@media (max-width: 480px) {
  .decoration-0 {
    width: 40%;
    height: 40%;
    top: -15vh;
    left: -5vw;
  }
  .decoration-2 {
    width: 50%;
    height: 43%;
  }
}
@keyframes scroll {
  0% {
    right: 0;
  }
  100% {
    right: 100%;
  }
}
.partnership-logo {
  animation: scroll 13s linear infinite;
  width: calc(150px * 8 * 2);
}

@import 'tailwindcss';

@theme {
  --color-primary: #fff;
  --color-dashboard-bg: rgba(11, 12, 16, 1);
  --color-primary-color: #0b0c10;
  --color-black: #000;
  --color-brand: #74d6fd;
  --color-pink: #e01dee;
  --color-secondary: #e7ecf0;
  --color-secondary-color: #1a1c24;
  --color-collateral: #1d9259;
  --color-borrow: #f42222;
  --color-spinner-bgn: rgba(0, 0, 0, 0.5);
  --color-spinner-content: #393939;
  --color-footer-bg: #00000d;
  --color-footer-text: #e7ebf5;
  --color-footer-line: rgba(231, 235, 245, 0.2);
  --color-footer-divider: #201338;
  --color-gray: #83919f;
  --color-light-purple: #36294e;
  --color-dark-purple: #120721;
  --color-light-blue: #74d5fd;
  --color-slider-gray: #393942;
  --color-status-opened: #1edc9e;
  --color-status-closed: #433b5a;
  --color-status-pending: #83919f;
  --color-success: #4caf50;
  --color-error: #ff5a5f;
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-bg: #120721;
  --color-border-color: #201338;
  --color-stormy-gray: #83919f;
  --color-deep-purple: #120721;
  --color-dark-bg: #130713;
  --color-light-dark-bg: #130713;
  --color-text-gray: #798795;
  --color-modal-border: #170f2e;
  --color-warning: #bdc000;
  --color-warning-alt: #272a0a;
  --color-warning-text: #f0f0f0;
  --color-nav-button-hover: #49abd2;
  --color-nav-divider-bg: #36294e;
  --color-header-bg: rgba(7, 0, 22, 0.8);
  --color-second-primary: #fdfdfd;
  --color-plain-button-bg: #0e0a16;
  --color-header-button-bg: #120721;
  --color-midnight-purple-hover: #5b4b80;

  --bg-app: url('../public/desktop-background.png');
  --bg-app-mobile: url('../public/mobile-background.png');
  --bg-main-gradient: linear-gradient(73deg, #74d6fd 1.13%, #e01dee 103.45%);
  --bg-button-gradient: linear-gradient(55deg, #74d6fd 0%, #e01dee 100%);
  --bg-button-gradient-hover: linear-gradient(55deg, #74d6fd 0%, #74d6fd 100%);
  --bg-button-gradient-active: linear-gradient(55deg, #58c4ef 0%, #58c4ef 100%);
  --bg-second-gradient: linear-gradient(55deg, #e01dee 0%, #49abd2 49%);
  --bg-border-gradient: linear-gradient(90deg, #49abd2 0%, #df1ced 99.5%);
  --bg-blue-pink-gradient: linear-gradient(90deg, #74d6fd 0%, #e01dee 100%);
  --bg-blue-pink-gradient-alt: linear-gradient(90deg, #49abd2 0%, #e01dee 100%);
  --bg-card-bg-gradient: linear-gradient(135deg, rgba(116, 214, 253, 0.5) 0%, rgba(11, 12, 16, 0.5) 100%);
  --bg-report-btn-bg-hover: linear-gradient(to right, rgba(147, 51, 234, 0.3), rgba(59, 130, 246, 0.3));

  --shadow-card: inset 4px 4px 9px 0 rgba(153, 234, 255, 0.25), 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  --blur-card: 42.1875px;
  --blur-backdrop: 12px;

  --border-purple: 1px;
  --border-midnight-purple: 1px;
  --border-midnight-purple-hover: 1px;

  --z-9999: 9999;
  --z-100: 100;
}

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-x: hidden; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}

/* Toastify Styles */
.Toastify__toast {
  margin-top: 90px;
}

.Toastify__toast-body {
  font-size: 16px;
  font-weight: 600;
}

@media (max-width: 1024px) {
  .Toastify__toast {
    left: 50px;
    height: 60px;
    width: 265px;
  }

  .Toastify__toast-body {
    font-size: 13px;
    font-weight: 500;
  }
}

@media (max-width: 768px) {
  .Toastify__toast {
    left: 70px;
    height: 40px;
    width: 250px;
  }

  .Toastify__toast-body {
    font-size: 13px;
    font-weight: 400;
  }
}

@media (max-width: 480px) {
  .Toastify__toast {
    left: 200px;
    width: 200px;
    border-radius: 6px !important;
  }

  .Toastify__toast-body {
    font-size: 12px;
  }
}

@media (max-width: 320px) {
  .Toastify__toast {
    left: 130px;
    width: 180px;
  }
}
