@import url("./base-btn.css");
@import url("./base-color.css");
@import url("./base-text.css");
@import url("./layouts/header.css");
@import url("./layouts/footer.css");
@import url("./layouts/pagination.css");
@import url("./layouts/loader.css");
@import url("./components/product.css");
@import url("./pages/homepage.css");
@import url("./pages/major.css");


@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
        Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji,
        Segoe UI Symbol, Noto Color Emoji;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: var(--my-primary);
}

:root {
  --primary: #ff6638;
  --bg-content: #f8f8f8;
  --black: #000;
  --white: #ffff;
  --gray: #ccc;
  --blue: #081327;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #73777b;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --black-100: #f5f5f4;
  --black-200: #e7e5e4;
  --black-300: #d6d3d1;
  --black-400: #a8a29e;
  --black-500: #78716c;
  --black-600: #57534e;
  --black-700: #44403c;
  --black-800: #292524;
  --black-900: #000;
  --orange-100: #fff7ed;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --orange-900: #7c2d12;
  --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;
  --yellow-100: #fef9c3;
  --yellow-200: #fef08a;
  --yellow-300: #fde047;
  --yellow-400: #eab308;
  --yellow-500: #eab308;
  --yellow-600: #ca8a04;
  --yellow-700: #a16207;
  --yellow-800: #854d0e;
  --yellow-900: #713f12;
  --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;

  /* Root v2 */
  --my-primary: #ff6638;
  /* opacity 30% 20% 10% 5% primary*/
  --my-primary-300: #fddfbc;
  --my-primary-200: #fdead2;
  --my-primary-100: #fff5e9;
  --my-primary-50: #fff7f5;
  --my-secondary: #0e0759;
  --my-white: #fff;
  --my-black: #212121;
  --my-gray: #f4f4f4;
  --my-light-gray: #f9f9f9;
  --my-dark-gray: #eeeeee;
  --my-darkest-gray: #8a8894;
  --my-disabled: #f4f3fe;

  /* background */
  --my-bg-color: #f4f3fe;
  --my-bg-white: #fff;
  --my-bg-light: #fafafa;
  --my-bg-gray: #f0f0f0;

  /* text */
  --my-text-gray: #8a8894;
  --my-text-disabled: #c5c0db;

  --success: #28a745;
  --success-2: #23883a;
  --error: #dc3545;
  --error-2: #bf2635;
  --warning: #ffc107;
  --warning-2: #efb60a;

  /* text */
  --my-rounded: 4px;
  --my-rounded-2: 8px;

  /* text body */
  --fw: 400;
  --fs: 16px;
  --lh: 140%;

  /* ohter */
  --width-sidebar-challenge: 60px;
}

body {
    position: relative;
    background: #fafafa;
}

.container {
    max-width: 85rem;
    margin: 0 auto;
}