/* Graphik Font */

@font-face {
  font-family: 'Graphik';
  font-weight: 100;
  src: url(../fonts/Graphik/Graphik-100-Thin.otf) format('opentype');
}

@font-face {
  font-family: 'Graphik';
  font-weight: 200;
  src: url(../fonts/Graphik/Graphik-200-Extralight.otf) format('opentype');
}

@font-face {
  font-family: 'Graphik';
  font-weight: 300;
  src: url(../fonts/Graphik/Graphik-300-Light.otf) format('opentype');
}

@font-face {
  font-family: 'Graphik';
  font-weight: 400;
  src: url(../fonts/Graphik/Graphik-400-Regular.otf) format('opentype');
}

@font-face {
  font-family: 'Graphik';
  font-weight: 500;
  src: url(../fonts/Graphik/Graphik-500-Medium.otf) format('opentype');
}

@font-face {
  font-family: 'Graphik';
  font-weight: 600;
  src: url(../fonts/Graphik/Graphik-600-Semibold.otf) format('opentype');
}

@font-face {
  font-family: 'Graphik';
  font-weight: 700;
  src: url(../fonts/Graphik/Graphik-700-Bold.otf) format('opentype');
}

@font-face {
  font-family: 'Graphik';
  font-weight: 800;
  src: url(../fonts/Graphik/Graphik-800-Black.otf) format('opentype');
}

@font-face {
  font-family: 'Graphik';
  font-weight: 900;
  src: url(../fonts/Graphik/Graphik-900-Super.otf) format('opentype');
}

:root {
  --white: #ffffff;
  --black: #000000;

  --font-family1: 'Graphik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Open Sans', 'Helvetica Neue', sans-serif;
  --font-family2: 'Open Sans', 'Roboto', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Oxygen', 'Ubuntu',
    'Cantarell', 'Helvetica Neue', 'sans-serif';
  --font-mono: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;

  --gray-050: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --red-050: #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;

  --amber-050: #fffbeb;
  --amber-100: #fef3c7;
  --amber-200: #fde68a;
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;
  --amber-800: #92400e;
  --amber-900: #78350f;

  --green-050: #ecfdf5;
  --green-100: #d1fae5;
  --green-200: #a7f3d0;
  --green-300: #6ee7b7;
  --green-400: #34d399;
  --green-500: #10b981;
  --green-600: #059669;
  --green-700: #047857;
  --green-800: #065f46;
  --green-900: #064e3b;

  --blue-050: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;

  --indigo-050: #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;
  --indigo-900: #312e81;

  --purple-050: #f5f3ff;
  --purple-100: #ede9fe;
  --purple-200: #ddd6fe;
  --purple-300: #c4b5fd;
  --purple-400: #a78bfa;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;
  --purple-700: #6d28d9;
  --purple-800: #5b21b6;
  --purple-900: #4c1d95;

  --pink-050: #fdf2f8;
  --pink-100: #fce7f3;
  --pink-200: #fbcfe8;
  --pink-300: #f9a8d4;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --pink-700: #be185d;
  --pink-800: #9d174d;
  --pink-900: #831843;

  --border: 1px solid #2f3133;
  --borderLight: 1px solid #454546;
  --modalPadding: 2.5rem 1.5rem;
  --sidebarWidth: 220px;
  --navbarHeight: 50px;
  --mobileNavHeight: 50px;
  --mainMaxWidth: 1362px;

  --mainPadding: 4rem;
  --iconColor: #8d8f92;
  --activeColor: #a5adff;
  --color1: #fff;
  --color2: #dadbdd;
  --color3: #bababa;
  --color4: #8d949a;
  --color5: #81858b;
  --background1: #0e0e10;
  --background2: #191a1b;
  --background3: #212223;
  --background4: #34373a;
  --background5: #56585c;
  --lightGreen: #10b981;
  --lightYellow: #fcd34d;
  --lightRed: #f87171;
  --lightPurple: #a5adff;
  /* --mediumPurple: #7c3aed; */
  --mediumPurple: var(--indigo-700);
  --darkPurple: #6d28d9;
  --bronze: #6a3805;
  --silver: #d7d7d7;
  --gold: #c9b037;

  --focus-border: var(--indigo-700) !important;
  --separator-border: #0e0e10 !important;
}

body {
  padding: 0;
  margin: 0;
  font-family: var(--font-family1);
  font-weight: 500;
  /* background-color: #0e0e10; */
  background-color: #0e0e0e;
  color: var(--color1);
  overflow: hidden;
  /* display: flex;
  flex-direction: column; */
  height: 100vh;
  position: relative;
  /* width: 100%; */
  /* overflow-y: auto; */
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

button {
  cursor: pointer;
  border: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote {
  margin: 0;
}

input,
button,
select,
textarea {
  outline: none;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  border: 0;
  font-family: var(--font-family1);
}

/* Custom Scrollbar */

::-webkit-scrollbar {
  width: 10px;
  background: #262626;
}

::-webkit-scrollbar-thumb {
  background: #424242;
}

@media (max-width: 600px) {
  body {
    height: auto;
    overflow: auto;
  }
}
