input.css

@import "tailwindcss";

@source "./*.html";

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

@theme {
  /* Custom breakpoints */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 976px;
  --breakpoint-xl: 1440px;

  /* Custom font families */
  --font-sans: "Josefin Sans", sans-serif;
  --font-alata: "Alata", sans-serif;

  /* Custom letter spacing */
  --letter-spacing-widest: 0.3rem;

  /* Custom colors */
  --purple-base: #631bff;
}

@layer base {
  html {
    @apply scroll-smooth;
  }

  a {
    @apply font-alata  flex;
  }

  h2 {
    @apply text-white text-3xl md:text-5xl xl:text-6xl;
  }

  h3 {
    @apply uppercase text-white my-8 text-sm md:text-2xl;
  }

  input {
    @apply focus:outline-0 block border border-slate-400 w-full rounded-full px-4 py-1 bg-white dark:bg-slate-300 text-black;
  }

  textarea {
    @apply focus:outline-0 block border border-slate-400 w-full rounded-2xl px-4 py-1 bg-white dark:bg-slate-300;
  }

  label {
    @apply font-light text-black dark:text-slate-200;
  }
}

@layer components {
  .btn {
    @apply border-2 border-white rounded-full px-12 text-sm md:text-xl py-3 font-semibold  font-alata tracking-[0.5rem] cursor-pointer hover:bg-black hover:text-white transition delay-150 hover:scale-105 hover:-translate-y-2 ease-in-out;
  }

  .btn-pry {
    @apply bg-white text-purple-900  hover:text-white hover:bg-purple-700;
  }

  .btn-sec {
    @apply text-purple-100 bg-purple-900 border-0 dark:bg-transparent dark:border-2;
  }

  .cta-btn {
    @apply px-3 py-0.5 rounded-full bg-purple-700 dark:bg-purple-300 dark:text-black text-white text-[0.75rem] cursor-pointer;
  }

  .link {
    @apply hover:scale-110;
  }

  .link-underline {
    @apply border-t-2  m-1 opacity-0 group-hover:opacity-100;
  }

  .logo {
    @apply w-10 md:w-16;
  }

  .light-theme {
    /* @apply text-[#443868] */
    @apply text-[#b136c4];
  }

  /* hamburger */

  .hamburger {
    @apply w-8 h-6  relative cursor-pointer block;
  }

  .hamburger1,
  .hamburger2,
  .hamburger3 {
    @apply w-8 h-1 bg-slate-700 dark:bg-slate-200 absolute rounded-full;
  }

  .hamburger1 {
    @apply top-0;
  }

  .hamburger2 {
    @apply top-2 w-6 right-0;
  }

  .hamburger3 {
    @apply top-4;
  }

  .toggleMenu .hamburger1 {
    @apply transition-all duration-150 rotate-45 -translate-x-1 translate-y-2;
  }

  .toggleMenu .hamburger2 {
    @apply hidden;
  }

  .toggleMenu .hamburger3 {
    @apply transition-all duration-150 -rotate-45 -translate-x-1 -translate-y-2;
  }

  .section-title {
    @apply text-purple-700 dark:text-purple-300 text-3xl font-sans font-extrabold text-center pt-12 pb-6;
  }

  .emphasize {
    @apply font-extrabold text-purple-700 dark:text-purple-300;
  }

  .skill-container {
    @apply hover:border-4 border-purple-500 dark:border-purple-300 shadow-2xl rounded-xl p-8 mx-16 md:mx-0 max-w-sm lg:max-w-[800px] dark:bg-slate-700/40;
  }

  .skill-progress-bar {
    @apply absolute  h-2 bg-purple-600 rounded-l-full dark:bg-purple-400
  }

  .project-container {
    @apply dark:bg-slate-700/40 w-full hover:border-4  border-b-12 shadow-2xl rounded-4xl mx-auto max-w-sm lg:max-w-[800px] space-y-6;
  }

  .subtitle {
    @apply text-lg font-extrabold;
  }

  .icon {
    @apply text-purple-700 dark:text-purple-300 pr-2;
  }

  .icon2 {
    @apply text-2xl md:text-4xl !text-slate-500 hover:!text-purple-800 hover:scale-105;
  }

  .success-toast {
    @apply bg-lime-500 w-[400px];
  }

  .fail-toast {
    @apply bg-rose-500 w-80;
  }

  input::placeholder {
    @apply text-slate-400 text-sm;
  }
}

.material-symbols-outlined {
  @apply text-purple-700 dark:text-purple-300;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20;
}