/* Smooth scroll behavior for the entire page */
html {
  scroll-behavior: smooth;
}

/* Fade in animation for components */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Slide in from left animation */
.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide in from right animation */
.slide-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale in animation */
.scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scale-in.visible {
  opacity: 1;
  transform: scale(1);
} 
@tailwind base;
@tailwind components;
@tailwind utilities;
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */


 .sidebar-open {
    margin-left: 20rem; /* width of your sidebar */
    transition: margin-left 0.3s;
  }
  .sidebar-closed {
    margin-left: 0;
    transition: margin-left 0.3s;
  }

  /* color primary should be : #F5EB17 I hae put a red to see if it worked. */


  /* [data-theme="bumblebee"]{
    --color-primary: 
    --color-primary-content: #ffffff;
    --color-secondary: #000000;
    --color-secondary-content: #ffffff;
    --color-base-100: #ffffff;
    --color-base-200: #C3C8FF;
    --color-base-300: #9FA6FF;
    --color-base-400: #7C85FF;
    --color-base-500: #5964FF;
    --color-base-600: #3643FF;
    --color-base-700: #152642;
    --color-accent: #4C5BD7;
    --color-neutral: #C1C7CD;
    --color-neutral-content: #152642;
  } */