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;
  }

  html {
    font-family: "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-body: rgba(15, 20, 34, 1);
    --color-aside: #0a0e1a;
    --color-footer: 10 10 10;
    --color-text: rgb(255 255 255);
    /* -------------------------------------------------------------------------- */
    --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: 240 247 254;
    --color-blue-100: 221 237 254;
    --color-blue-200: 182 216 252;
    --color-blue-300: 137 192 250;
    --color-blue-400: 74 158 247;
    --color-blue-500: 9 109 217;
    --color-blue-600: 8 99 196;
    --color-blue-700: 7 87 171;
    --color-blue-800: 6 69 137;
    --color-blue-900: 4 49 98;
    /* ---------------------------------- 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;
  }

  .pl,
  .pl__worm {
    animation-duration: 3s;
    animation-iteration-count: infinite;
  }

  .pl {
    animation-name: bump;
    animation-timing-function: linear;
    width: 8em;
    height: 8em;
  }

  .pl__worm {
    animation-name: worm;
    animation-timing-function: cubic-bezier(0.42, 0.17, 0.75, 0.83);
  }

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

  /* Animations */
  @keyframes bump {

    from,
    42%,
    46%,
    51%,
    55%,
    59%,
    63%,
    67%,
    71%,
    74%,
    78%,
    81%,
    85%,
    88%,
    92%,
    to {
      transform: translate(0, 0);
    }

    44% {
      transform: translate(1.33%, 6.75%);
    }

    53% {
      transform: translate(-16.67%, -0.54%);
    }

    61% {
      transform: translate(3.66%, -2.46%);
    }

    69% {
      transform: translate(-0.59%, 15.27%);
    }

    76% {
      transform: translate(-1.92%, -4.68%);
    }

    83% {
      transform: translate(9.38%, 0.96%);
    }

    90% {
      transform: translate(-4.55%, 1.98%);
    }
  }

  @keyframes worm {
    from {
      stroke-dashoffset: 10;
    }

    25% {
      stroke-dashoffset: 295;
    }

    to {
      stroke-dashoffset: 1165;
    }
  }
}

@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;
  }
}