/* --- Global Resets & Body Styling --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    font-family: sans-serif;
    overflow: hidden; /* Prevent scroll */
    
    /* Default Background Properties for both mobile/desktop */
    background-size: cover; /* Ensures the image covers the entire viewport */
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Optional: keeps the background static when scrolling (if scrolling were enabled) */
    background-color: #000;
}

/* --- Mobile Background Default (Up to 768px) --- */
body {
    /* **MUST** place 'overengineered-mobile.jpg' in the correct path */
    background-image: url('overengineered-mobile.jpg'); 
}

/* --- Media Query for Desktop Background (769px and up) --- */
@media (min-width: 769px) {
    body {
        /* **MUST** place 'overengineered.jpg' in the correct path */
        background-image: url('assets/overengineered-desktop.jpg'); 
    }
}


/* --- Content Styling --- */
.content-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}


/* --- SVG Logo Styling --- */

.logo-container {
    /* Ensures the container takes up the full width */
    width: 100vw;
    padding: 0 6px /* Add some horizontal padding */
}

.logo {
    /* The <object> element for the SVG */
    display: block;
    width: 100%; /* Makes the SVG take the full width of its container (logo-container) */
    height: auto;
    transition: width 0.3s ease-in-out; /* Smooth scaling */
}