@import "tailwindcss";
@import "preline/variants.css";
@source "../../../node_modules/preline/dist/*.js";


@custom-variant dark (&:is(.dark, .dark *));
@custom-variant dark (&:where(.dark, .dark *));
@theme {


  --color-bodybg: rgb(240, 241, 247);
  --color-bodybg2: rgb(var(--color-darkbg));
  --color-primary: rgb(132, 90, 223);
  --color-primaryrgb: rgb(132, 90, 223);
  --color-secondary: rgb(35, 183, 229);
  --color-warning: rgb(245, 184, 73);
  --color-info: rgb(73, 182, 245);
  --color-success: rgb(38, 191, 148);
  --color-danger: rgb(230, 83, 60);
  --color-light: rgb(243, 246, 248);
  --color-dark: rgb(35, 35, 35);
  --color-orange: rgb(255, 165, 5);
  --color-pink: rgb(231, 145, 188);
  --color-teal: rgb(18, 194, 194);
  --color-tealmain: rgb(18, 194, 194);
  --color-purple: rgb(137, 32, 173);
  --color-defaulttextcolor: rgb(51, 51, 53);
  --color-defaultborder: rgb(243, 243, 243);
  --color-defaultbackground: rgb(247, 248, 249);
  --color-menuprimecolor: rgb(83, 100, 133);
  --color-menubordercolor: rgb(243, 243, 243);
  --color-headerprimecolor: rgb(83, 100, 133);
  --color-headerbordercolor: rgb(243, 243, 243);
  --color-bootstrapcardborder: rgb(243, 243, 243);
  --color-list-hover-focus-bg: rgb(245, 246, 247);
  --color-textmuted: rgb(140, 144, 151);
  --color-inputborder: rgb(233, 237, 246);
  --color-red: rgb(208, 61, 70);
  --color-blue: rgb(43, 62, 101);
  --color-green: rgb(29, 216, 113);
  --color-cyan: rgb(0, 209, 209);
  --color-indigo: rgb(77, 93, 219);
  --color-gray: rgb(134, 153, 163);
  --color-yellow: rgb(255, 193, 2);
  --color-facebook: rgb(59, 89, 152);
  --color-twitter: rgb(0, 172, 238);
  --color-github: rgb(51, 51, 51);
  --color-google: rgb(207, 78, 67);
  --color-youtube: rgb(255, 0, 0);


  --font-size-defaultsize: 0.813rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-7xl: 4.5rem;
  --font-size-8xl: 6rem;
  --font-size-9xl: 8rem;


  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --animate-projects: particles 2s linear infinite;
  --animate-spin: spin 1s linear infinite;
  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-bounce: bounce 1s infinite;
  --animate-bell: ring 2s ease-in-out infinite;
  --animate-wase: wase 4s linear infinite;
  --animate-spin-slow: spin 3s linear infinite;
  --animate-slow-ping: ping 2s linear infinite;


  --color-gray-100: rgb(249,250,251);
  --color-gray-200: rgb(242,244,245);
  --color-gray-300: rgb(230,234,235);
  --color-gray-400: rgb(219,223,225);
  --color-gray-500: rgb(148,158,183);;
  --color-gray-600: rgb(121,135,161);
  --color-gray-700: rgb(77,88,117);
  --color-gray-800: rgb(56,56,83);
  --color-gray-900: rgb(50,50,81);
  --font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-montserrat: "Montserrat", ui-sans-serif, system-ui, sans-serif;


  --shadow-defaultshadow: 0 0.125rem 0 rgba(10, 10, 10, 0.04);
  /* --breakpoint-*: initial; */
  /* --breakpoint-sm: 30rem;     */
  /* --breakpoint-md: 48rem;     */
  /* --breakpoint-lg: 62rem;     */
  /* --breakpoint-xl: 75rem;     */
  /* --breakpoint-2xl: 87.5rem;  */
  /* --breakpoint-3xl: 112.5rem; */
  --breakpoint-xs: 30rem;
  --breakpoint-2xl: 100rem;
  --breakpoint-3xl: 120rem;



}

[class="dark"],
html.dark,
.dark {
  /* color-scheme: dark; */
  --color-bodybg: rgb(26 28 30);
  --color-bodybg2: rgb(37, 39, 41);
  --color-darkbg: rgb(37 39 41);
  --color-light: rgb(43 46 49);
  --color-dark: rgb(240 245 248);
  --color-inputborder: rgb(49 51 53);
  --color-formcontrolbg: rgb(35 38 40);
  --color-defaulttextcolor: rgb(255 255 255);
  --color-gray-100: rgb(249,250,251);
  --color-gray-200: rgb(242,244,245);
  --color-gray-300: rgb(230,234,235);
  --color-gray-400: rgb(219,223,225);
  --color-gray-500: rgb(148,158,183);
  --color-gray-600: rgb(121,135,161);
  --color-gray-700: rgb(77,88,117);
  --color-gray-800: rgb(56,56,83);
  --color-gray-900: rgb(50,50,81);
}



@keyframes particles {
  0% {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }

  100% {
    transform: translateY(-90px) rotate(180deg);
    opacity: 0;
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }

  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes ring {
  0% {
    transform: rotateZ(0)
  }

  1% {
    transform: rotateZ(30deg)
  }

  3% {
    transform: rotateZ(-28deg)
  }

  5% {
    transform: rotateZ(34deg)
  }

  7% {
    transform: rotateZ(-32deg)
  }

  9% {
    transform: rotateZ(30deg)
  }

  11% {
    transform: rotateZ(-28deg)
  }

  13% {
    transform: rotateZ(26deg)
  }

  15% {
    transform: rotateZ(-24deg)
  }

  17% {
    transform: rotateZ(22deg)
  }

  19% {
    transform: rotateZ(-20deg)
  }

  21% {
    transform: rotateZ(18deg)
  }

  23% {
    transform: rotateZ(-16deg)
  }

  25% {
    transform: rotateZ(14deg)
  }

  27% {
    transform: rotateZ(-12deg)
  }

  29% {
    transform: rotateZ(10deg)
  }

  31% {
    transform: rotateZ(-8deg)
  }

  33% {
    transform: rotateZ(6deg)
  }

  35% {
    transform: rotateZ(-4deg)
  }

  37% {
    transform: rotateZ(2deg)
  }

  39% {
    transform: rotateZ(-1deg)
  }

  41% {
    transform: rotateZ(1deg)
  }

  43% {
    transform: rotateZ(0)
  }

  100% {
    transform: rotateZ(0)
  }
}

@keyframes wase {

  0%,
  100% {
    transform: rotate(-3deg);
  }

  50% {
    transform: rotate(3deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}