/* Custom styles for subtle enhancements not easily done with only Tailwind classes,
   or for specific scrollbar styling. */

/* Import Audrey font. You'll need to replace this with the actual link
   if you're hosting it or using a service like Google Fonts.
   Example for a Google Font:
   @import url('https://fonts.googleapis.com/css2?family=Audrey&display=swap');
*/
@font-face {
    font-family: 'Audrey';
    src: url('path/to/Audrey-Regular.woff2') format('woff2'),
         url('path/to/Audrey-Regular.woff') format('woff');
    font-weight: normal; /* Ensure non-bold */
    font-style: normal;
}


body {
    font-family: 'Audrey', sans-serif; /* Using Audrey font for a unique look */
    font-weight: normal; /* Ensure the body text is not bold */
}

/* Ensure headings are not bold */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal; /* Override any default bolding for headings */
}

/* Custom scrollbar for WebKit browsers */
.project-vertical-scroll-wrapper::-webkit-scrollbar {
    width: 8px; /* Vertical scrollbar width */
}
.project-vertical-scroll-wrapper::-webkit-scrollbar-track {
    background: #1a1a1a; /* Darker track */
    border-radius: 10px;
}
.project-vertical-scroll-wrapper::-webkit-scrollbar-thumb {
    background: #4a4a4a; /* Medium gray thumb */
    border-radius: 10px;
}
.project-vertical-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #6a6a6a; /* Lighter gray on hover */
}
/* Hide scrollbar for Firefox */
.project-vertical-scroll-wrapper {
    scrollbar-width: thin;
    scrollbar-color: #4a4a4a #1a1a1a;
}

/* Base styles for containers, adjust as needed */
.container {
    max-width: 1280px; /* Example max-width for content */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* Equivalent to px-4 */
    padding-right: 1rem; /* Equivalent to px-4 */
}

/* Updated style for project item background to black */
.project-item {
    background-color: #000 !important; /* Set to pure black, using !important to override Tailwind */
}

@media (min-width: 768px) { /* md breakpoint */
    .container {
        padding-left: 2rem; /* Equivalent to md:px-8 */
        padding-right: 2rem; /* Equivalent to md:px-8 */
    }
}