Frontend/src/index.css

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

@layer base {
  @font-face {
    font-family: "Poppins";
    src: url("assets/fonts/Poppins-Bold.eot");
    src: url("assets/fonts/Poppins-Bold.eot?#iefix") format("embedded-opentype"),
      url("assets/fonts/Poppins-Bold.woff2") format("woff2"),
      url("assets/fonts/Poppins-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Poppins";
    src: url("assets/fonts/Poppins-Medium.eot");
    src: url("assets/fonts/Poppins-Medium.eot?#iefix")
        format("embedded-opentype"),
      url("assets/fonts/Poppins-Medium.woff2") format("woff2"),
      url("assets/fonts/Poppins-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Poppins";
    src: url("assets/fonts/Poppins-Regular.eot");
    src: url("assets/fonts/Poppins-Regular.eot?#iefix")
        format("embedded-opentype"),
      url("assets/fonts/Poppins-Regular.woff2") format("woff2"),
      url("assets/fonts/Poppins-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Poppins";
    src: url("assets/fonts/Poppins-Thin.eot");
    src: url("assets/fonts/Poppins-Thin.eot?#iefix") format("embedded-opentype"),
      url("assets/fonts/Poppins-Thin.woff2") format("woff2"),
      url("assets/fonts/Poppins-Thin.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Inter";
    src: url("assets/fonts/Inter-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Inter";
    src: url("assets/fonts/Inter-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Inter";
    src: url("assets/fonts/Inter-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Inter";
    src: url("assets/fonts/Inter-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Inter";
    src: url("assets/fonts/Inter-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Inter";
    src: url("assets/fonts/Inter-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Inter";
    src: url("assets/fonts/Inter-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Inter";
    src: url("assets/fonts/Inter-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Inter";
    src: url("assets/fonts/Inter-Thin.ttf") format("truetype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }

  html {
    font-family: "Inter", "Poppins", -apple-system, "Segoe UI", system-ui,
      "Roboto", "Helvetica Neue", "Arial";
    color: var(--color-text);
  }

  *,
  ::before,
  ::after,
  .theme-dark *,
  .theme-dark::before,
  .theme-dark::after {
    /* ------------------------------- Body color ------------------------------- */
    --color-aside: #0a0e1a;
    --color-footer: 10 10 10;
    --color-text: rgb(38, 38, 38);
    /* -------------------------------------------------------------------------- */
    --color-serv: 25 29 43;
    --color-serv-50: 227 230 237;
    --color-serv-100: 200 205 223;
    --color-serv-200: 142 152 189;
    --color-serv-300: 90 104 155;
    --color-serv-400: 58 67 100;
    --color-serv-500: 25 29 43;
    --color-serv-600: 21 24 35;
    --color-serv-700: 15 17 26;
    --color-serv-800: 9 11 16;
    --color-serv-900: 6 7 10;
    /* ---------------------------------- Blue ---------------------------------- */
    --color-blue-50: 230 247 255;
    --color-blue-100: 186 231 255;
    --color-blue-200: 145 213 255;
    --color-blue-300: 89 192 255;
    --color-blue-400: 64 169 255;
    --color-blue-500: 24 144 255;
    --color-blue-600: 9 109 217;
    --color-blue-700: 0 80 179;
    --color-blue-800: 0 58 140;
    --color-blue-900: 0 39 102;
    /* ---------------------------------- Gray ---------------------------------- */
    --color-gray-50: 250 250 250;
    --color-gray-75: 240 240 240;
    --color-gray-100: 235 235 235;
    --color-gray-200: 214 214 214;
    --color-gray-300: 191 191 191;
    --color-gray-400: 166 166 166;
    --color-gray-500: 140 140 140;
    --color-gray-600: 115 115 115;
    --color-gray-700: 89 89 89;
    --color-gray-800: 64 64 64;
    --color-gray-900: 38 38 38;
  }

  /* Dark theme */
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: hsl(var(--hue), 10%, 10%);
      --fg: hsl(var(--hue), 10%, 90%);
    }
  }
}

@layer components {
  /* Separate
    ======================================================================== */

  .separate {
    @apply flex items-center text-center;
  }

  .separate::after,
  .separate::before {
    content: "";
    @apply border-b border-gray-300 flex-1;
  }

  .separate:not(:empty)::after {
    @apply ml-2;
  }

  .separate:not(:empty)::before {
    @apply mr-2;
  }
}