@import "./font.css";

:root {
  --Dark-100: #0c0e12;
  --Dark-150: #0e1115;
  --Dark-200: #101318;
  --Dark-300: #14181f;
  --Dark-400: #181d25;
  --Dark-600: #29303d;
  --Dark-500: #212631;
  --Dark-700: #313949;
  --Dark-800: #414c62;
  --Light-300: #525f7a;
  --Light-500: #7887a5;
  --Light-600: #919db6;
  --Light-800: #c2c9d6;
  --Primary-300: rgb(44, 216, 205);
  --Primary-500: #3ffff3; // rgb(63 255 243)
  --Primary-700: #99fff9;
  --Primary-Button: radial-gradient(
      50.36% 100% at 50.36% 0%,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(180deg, #7deec1 0%, #34e6ef 100%);
  --Secondary-500: #5aa3ed;
  --Gradient-Volt: linear-gradient(
    90deg,
    #43bbff 0%,
    #6b25ff 49.5%,
    #ff4588 100%
  );

  --color-bg: var(--Dark-200);
  --color-text: var(--Light-500);
  --color-text2: var(--Light-300);
  --color-headline: var(--Light-800);
  --color-link: var(--Light-300);
  --color-link-active: var(--Light-800);
  --color-accent: var(--Primary-500);
  --color-line: var(--Dark-100);
  --color-modal-close: #414c62;
  --color-warning: #cfcc81;
  --color-error: #ff66b3;
  --color-success: #3ffff3;
  --color-purple: #6b25ff;
  --roundness: 16px;
  --line-color: var(--Dark-500);

  --primary: var(--Primary-500);
  --primary-darken: var(--Primary-300);
  --primary-transparent-2: #3ffff320;
  --primary-transparent-6: #3ffff360;
  /* --to: #ffc900;

  --primary-darken-transparent: #ff370010;
  --to-transparent: #ffc90010; */

  --gradient: var(--Primary-Button);
  /* --gradient-transparent: linear-gradient(
    90deg,
    var(--primary-darken-transparent),
    var(--to-transparent)
  ); */
}

h1 *,
h2 *,
h3 *,
h4 *,
h5 * {
  font-family: Auto, sans-serif !important;
  font-weight: 300;
}

.font-body {
  font-family: Firs, sans-serif !important;
  font-weight: 400 !important;
}

.text-blue-500 {
  color: var(--primary) !important;
}
.hover\:text-blue-500:hover {
  color: var(--primary) !important;
}
.hover\:text-blue-800:hover {
  color: var(--primary) !important;
}

@media (min-width: 960px) {
  .md\:text-blue-500 {
    color: var(--primary) !important;
  }
}

.bg-blue-100 {
  background-color: var(--primary-transparent-2) !important;
}

.bg-blue-500 {
  background-color: var(--primary-transparent-6) !important;
}

.docs-markdown a:not(.no-link) {
  color: var(--primary) !important;
}

html:not(.dark) {
  --primary: var(--color-purple);
  --primary-transparent-2: #6b25ff20;
  --primary-transparent-6: #6b25ff60;
}

.docs-markdown h1 .header-anchor-trigger:hover,
.docs-markdown h2 .header-anchor-trigger:hover,
.docs-markdown h3 .header-anchor-trigger:hover,
.docs-markdown h4 .header-anchor-trigger:hover,
.docs-markdown h5 .header-anchor-trigger:hover,
.docs-markdown h6 .header-anchor-trigger:hover {
  color: var(--primary-darken) !important;
}

.bg-white .black {
  display: none !important;
}

.dark .black {
  display: block !important;
}

.dark .white {
  display: none !important;
}

.dark strong {
  color: white;
}
/* 

#danger-must-read * {
  color: var(--primary) !important;
}


.hover\:bg-blue-200:hover {
  background-color: rgba(242, 117, 57, 0.2) !important;
}

.group:hover .group-hover\:text-blue-500 {
  color: rgba(242, 117, 57, 0.6) !important;
}



html {
  font-size: 18px;
  overflow-y: scroll;
}

::selection {
  background-color: rgba(242, 117, 57, 0.2);
}

#docs-site-logo {
  font-size: 2rem !important;
}

#docs-site-logo span:last-child {
  margin-top: 8px;
}

#docs-site-logo * {
  font-family: Aldrich, sans-serif !important;
  font-weight: 400;
}


.dark .dark\:bg-dark-850 {
  background: black !important;
}

.dark .dark\:bg-dark-800 {
  background: black !important;
}


.no-points ul {
  list-style-type: none !important;
  padding-left: 1rem !important;
}
.no-points ul ul {
  list-style-type: none !important;
}
.no-points ul li svg {
  margin-right: 0.5rem !important;
}

.plus ul {
  list-style-type: "+  " !important;
}

.minus ul {
  list-style-type: "-  " !important;
}

.img-link {
  div {
    padding: 0px !important;
  }
  > div {
    border: none !important;

    > div:nth-child(2) {
      display: none;
    }
  }
  .ml-2 {
    margin-left: 0px !important;
  }
  svg {
    display: none !important;
  }
  .content-center {
    margin-bottom: 0px !important;
  }
}

.height-600 {
  > div {
    justify-content: center;
  }

  img {
    max-height: 600px;
  }
}

.height-500 {
  > div {
    justify-content: center;
  }

  img {
    max-height: 500px;
  }
}

.height-300 {
  > div {
    justify-content: center;
  }
  img {
    max-height: 300px;
  }
}

.height-250 {
  > div {
    justify-content: center;
  }
  img {
    max-height: 250px;
  }
}

.height-200 {
  > div {
    justify-content: center;
  }
  img {
    max-height: 200px;
  }
} */