@tailwind base;
@tailwind components;
@tailwind utilities;

/* Basic Reset & Body Styles */
body {
    background-color: #121212;
    color: #e0e0e0;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    line-height: 1.6;
}

/* Home Section Styling */
#home {
    /* This creates the feathered edge at the bottom of the hero section */
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
       /* Default (mobile) background image */
    background-image: url('/assets/images/hero-bg-mobile.png');
}
/* On screens 640px wide and larger (Tailwind's 'sm' breakpoint), switch to the desktop image */
@media (min-width: 640px) {
    #home {
        background-image: url('/assets/images/hero-bg.png');
    }
}

/* Section Styling */
section {
    border-bottom: 1px solid #2a2a2a;
}

section:last-of-type {
    border-bottom: none;
}

h2 {
    font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #ffffff;
}

/* Footer */
footer {
    background-color: #1a1a1a;
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: #888;
}