/* 
 * Custom Styles for XEBEC HALL
 * Utilizing Tailwind CSS + Custom Extensions 
 */

@layer utilities {
    .text-shadow-sm {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
    .text-shadow-md {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
    .text-shadow-lg {
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    }
    
    .aspect-w-4 {
        position: relative;
        padding-bottom: 75%; /* 4:3 Aspect Ratio */
    }
    .aspect-h-3 {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}

/* Animations that are not bundled by default in basic CDN (without plugins) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
}

/* Base modifications for the layout */
html {
    scroll-behavior: smooth;
    /* Prevent horizontal scroll issues */
    overflow-x: hidden;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Add stylish selection */
::selection {
    background-color: #2b6cb0; /* primary color */
    color: white;
}