/* resources/css/app.css */
@import "../../node_modules/@fortawesome/fontawesome-free/css/all.min.css";

/* Other CSS rules */
@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'Tan Pearl';
    src: url('tanPearl.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@media (prefers-color-scheme: dark) {
    html, body {
        background-color: #ffffff;
        color: #000000;
    }

    /* Override any other dark mode specific styles */
    .dark\:bg-gray-900 {
        background-color: #ffffff !important;
    }
    .dark\:text-white {
        color: #000000 !important;
    }
}

/* Remove outline on focus for all elements */
*:focus {
    outline: none;
}

html {
    scroll-behavior: smooth;
}
/* Adjust scrollbar width and color */
body::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
}
body.no-scroll {
    overflow: hidden;
}
.fade-element {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 3s ease-in-out, transform 3s ease-in-out;
}
.fade-in {
    opacity: 1;
}
.petal-overlay {
    position: fixed; /* Fixes the position to the viewport */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none; /* Allows interactions through the overlay */
    z-index: 9999; /* Ensures it is on top of other elements */
    opacity: 0.3; /* Set the opacity to a lower value */
    display: none; /* Initially hidden */
}
.petal-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire container */
}