/* -------------------------------------------------------------------
 * STYLE.CSS - Ducko's Silly Website :3
 * Theme: Frutiger Aero (Practicly done)
 * ------------------------------------------------------------------- */

/*
 * A. BASE STYLES & RESETS
 *********************************************/

:root {
    --color-pink: #ffc0cb;
    --color-red: #ff0000;
    --color-magenta: #ff00ff;
    --color-yellow: #ffff00;
    --font-main: 'Verdana', sans-serif;
    /* Define a new primary text color for the dark container */
    --color-primary-text: #fff; 
}
html, body {
    height: 140%;
    min-height: 140%;
}
/* Update the body styles in your style.css file */
body {
    /* Set background from the old HTML body attribute */
    background: url('/IMG_2535.jpeg'); /* 1. Specify the image */
    background-attachment: fixed;
    /* 2. Key fixes for full-screen, non-repeating image: */
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed; /* This makes the image stay put when scrolling */
    background-size: cover; /* This makes the image cover the entire viewport */
    
    /* Font and margin/padding settings */
    font-family: var(--font-main);
    margin: 0; 
    padding: 0;
    color: var(--color-primary-text); 
}
a {
    text-decoration: none; 
    color: var(--color-primary-text); 
}

/*
 * B. LAYOUT & STRUCTURE
 *********************************************/

/* Wrapper for the navigation bar */
.nav-container {
    text-align: center;
    margin: 0; 
    padding: 0;
}

/*
 * C. NAVIGATION BAR 
 *********************************************/
.frutiger-aero-nav {
    background: linear-gradient(to bottom,
        #444444 0%,      
        #222222 55%,     
        #111111 55%,     
        #000000 100%     
    );
    
    /* Border adjustments for connection */
    border: 1px solid black; 
    border-bottom: 0; /* REMOVE BOTTOM BORDER to connect to content box */
    
    /* Remove bottom rounding */
    border-radius: 5px 5px 0 0; /* Top-Left 5px, Top-Right 5px, Bottom-Left 0, Bottom-Right 0 */
    
    /* Layout */
    display: flex;
    align-items: center; 
    justify-content: center; 
    position: relative;
    height: 40px;
    gap: 20px; 
    padding: 0 15px; 
    
    /* Use the same centering logic as the content container */
    max-width: 930px;
    margin-left: auto;
    margin-right: auto;
    
    /* Shadow below the nav bar, since the content container's border is removed */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); 
}

/* Link items inside the nav bar */
.nav-item {
    display: inline-block; 
    color: white; 
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);

    /* Glassy Bevel Effect */
    background-color: rgba(255, 255, 255, 0.15); 
    padding: 5px 12px; 
    border-radius: 10px; 
    
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.6), 
        0 2px 5px rgba(0, 0, 0, 0.4);
    
    transition: all 0.2s ease; 
}

.nav-item:hover {
    color: #ffda00; 
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(255, 255, 255, 0.8), 
        0 4px 8px rgba(0, 0, 0, 0.5); 
    transform: translateY(-1px); 
}

/*
 * D. MAIN CONTENT CONTAINER 
 *********************************************/
.content-container {
    max-width: 900px;
    margin: 0 auto 40px auto; 
    padding: 30px; 
    
    /* --- DARK FRUTIGER AERO GLASS STYLES --- */
    background-color: rgba(0, 0, 0, 0.4); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px); 

    /* Border adjustments for connection */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 0; 
    border-radius: 0 0 20px 20px; 

    /* Gloss/Shadow */
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.75), 
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
        
    /* Layout */
    text-align: center;
}

/*
 * E. COMPONENT STYLES
 *********************************************/
 

.blinkie-marquee img {
    width: 100px; 
    height: 31px;
}

.header-image-container {
    text-align: center;
    margin: 20px 0;
}

.header-image {
    width: 900px;
    max-width: 100%; 
}

.youtube-embed {
    border: 3px solid black; 
    margin: 20px 0;
}

/* Utility Classes (Ensuring text pops on the dark background) */
.text-pink { color: var(--color-pink); }
.text-red { color: var(--color-red); }
.text-white { color: var(--color-primary-text); }
.text-magenta { color: var(--color-magenta); }
.text-yellow { color: var(--color-yellow); }