/*
 * 2007-2009 Apple-Inspired Glossy 3D Vibe CSS
 */

/* Define the Background Scrolling Animation */

@keyframes scrollBg {
  /* Start the background position */
  from { 
    background-position: 0 0; 
  }
  /* End the background position exactly at the width of the background-size (2000px).
     This ensures the end state smoothly matches the start state due to the repeating background. */
  to { 
    background-position: 2000px 0; 
  }
}

/*Old Logic*/
/*@keyframes scrollBg {*/
  /* Start the gradient at the original position (0, 0) */
/*  from { background-position: 0 0; }*/
  /* End the gradient position 800 pixels to the left. 
     This distance should be less than the width of the gradient itself. */
/*  to { background-position: 800px 0; }*/
/*}*/

/* Global Reset and Body Styling */
body {
    /* 1. Use background-image for the gradient definition */
    /* background-image: linear-gradient(to right, */
        /* #fcfcfc 0%,      /* NEAR WHITE (Sharp, Shining Highlight) */
        /* #e8e8e8 15%,     /* Quick transition to mid-tone */
        /* #a0a0a0 45%,     /* DARK GRAY (Deep Shadow/Maximum Sheen) */
        /* #e8e8e8 85%,     /* Quick transition back to mid-tone */
        /* #fcfcfc 100%     /* Near White to ensure seamless looping */
    /* );
    
    /* 2. All other properties must be set individually: */
    /* background-color: #e6e6e6; /* Fallback color */
    /* background-size: 2000px 100%; /* REQUIRED for the scrolling effect */
    /* background-repeat: repeat-x; */
    /* background-attachment: fixed; */
    
    /* Apply the animation */
    /* animation: scrollBg 30s linear infinite; */
    
    /* --- Old Logics --- */
    
    /* Subtle background with a light vertical gradient for depth */
    /* background: linear-gradient(to bottom, #f0f0f0 0%, #e6e6e6 100%); */
    
    /* GIF Background */
    /* 1. Set the GIF as the background image */
    background-image: url('ocean.gif'); 
    /* 2. CRITICAL: Make the image cover the entire viewport */
    background-size: cover;
    /* 3. Prevent the GIF from repeating if the image aspect ratio is different */
    background-repeat: no-repeat;
    /* 4. Keeps the background image fixed relative to the viewport (recommended) */
    background-attachment: fixed;
    /* 5. Center the image (useful if the aspect ratio doesn't perfectly match the screen) */
    background-position: center center;
    
    /* GIF Tiling Background */
    /*background-image: url('ocean.gif');*/
    /*background-repeat: repeat;*/
    /*background-attachment: fixed; */
    
    /* Font Styling */
    font-family: Arial, sans-serif; 
    color: #333; 
    margin: 0;
    padding: 30px 0;
    text-align: center; 
}

/* Main Container - The glossy white card effect */
#container {
    /* Using your preferred wider width */
    width: 1200px; 
    margin: 0 auto; 
    text-align: left; 
    padding: 30px;
    
    /* White-to-light-gray gradient for the 'card' surface */
    background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 100%); 
    
    border-radius: 12px; 
    
    /* Stronger drop shadow for more 3D pop */
    box-shadow: 
        0 8px 15px rgba(0, 0, 0, 0.2), /* Main drop shadow */
        inset 0 0 10px rgba(255, 255, 255, 0.5); /* Inner white glow for depth */
    
    /* Crisp light border to define the edge */
    border: 1px solid #ddd;
}

/* Headings - 3D Text Effect */
h1 {
    font-size: 2.5em; 
    /* Richer blue color */
    color: #004d99; 
    margin-bottom: 5px;
    
    /* Key for 3D/crisp text look: Multiple text shadows */
    text-shadow: 
        1px 1px 0 #fff, /* Light/Highlight shadow for bevel */
        0 0 2px rgba(0, 0, 0, 0.4); /* Subtle blur/depth shadow */
}

/* Subtitle under H1 */
.subtitle {
    font-size: 1.1em;
    color: #666;
    margin-top: 0;
    margin-bottom: 30px;
    font-style: italic;
}

/* Links */
a {
    color: #007bff; 
    text-decoration: none; 
    transition: color 0.2s; 
}

a:hover {
    color: #0056b3; 
    text-decoration: underline; 
}

/* Horizontal Rule - Simple and clean divider */
hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
    margin: 25px 0;
}

/* Navigation Bar - ENHANCED Glossy Buttons */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    display: flex; 
    justify-content: space-around; 
    
    /* A slightly darker container for the buttons to sit in */
    background-color: #e0e0e0;
    border-radius: 20px 12px;
    overflow: hidden; 
    
    /* Subtle 3D shadow for the whole nav bar */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    border: 1px solid #ccc;
}

nav a {
    display: block;
    padding: 12px 15px; /* Slightly bigger padding */
    border-radius: 27px 12px;
    color: #333;
    font-weight: bold;
    text-decoration: none;

    /* The core of the glossy look: dramatic vertical gradient */
    background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 50%, #e0e0e0 100%); 
    
    border-right: 1px solid #d4d4d4; 
    
    /* Inner shadow to give the pressed/inset look */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

nav li:last-child a {
    border-right: none; 
}

nav a:hover {
    color: #fff;
    /* Hover state: Invert the gradient and use the primary blue */
    background: linear-gradient(to bottom, #0099ff 0%, #007bff 100%); 
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); /* White text on blue needs shadow */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Image Wrapper for centering the image */
.image-wrapper {
    text-align: center;
    margin: 40px 0;
}

/* Image Styling - Gives it a nice frame */
img {
    max-width: 100%;
    height: auto;
    /* White-on-white frame with soft shadow */
    border: 1px solid #ccc;
    padding: 8px; /* Thicker white border/padding */
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

/* Footer */
footer {
    border-top: 1px solid #eee;
    margin-top: 40px;
    padding-top: 10px;
    font-size: 0.9em;
    color: #999;
    text-align: center;
}