/* Custom styles to supplement Tailwind */
html {
    scroll-behavior: smooth;
}

body {
    background-color: #FDFBF7; /* Cream */
}

/* Mobile menu transitions */
#bar1 {
    transform-origin: center;
}
#bar2 {
    transform-origin: center;
}

/* Active state for mobile menu button */
.mobile-active #bar1 {
    transform: translateY(6px) rotate(45deg);
}
.mobile-active #bar2 {
    transform: translateY(-6px) rotate(-45deg);
    width: 32px;
}

/* Utility for image aspect ratios */
img {
    max-width: 100%;
    height: auto;
}

/* Selection color */
::selection {
    background-color: #FFD4DC;
    color: #7C1334;
}