/* --- GLOBAL STYLES: 90s TERMINAL AESTHETIC --- */

body {
    /* Use a standard background color, common in early 2000s */
    background-color: #E0E0EE; /* A slight off-white/light-gray */
    color: #000000;
    
    /* The core font for that vintage terminal look */
    font-family: "Courier New", Courier, monospace;
    font-size: 13px;
    margin: 0;
    padding: 10px;
}

/* Base link styling */
a {
    color: #0000CC; /* Standard bright blue link */
    text-decoration: underline;
}

a:hover {
    color: #FF0000; /* BRIGHT RED hover for contrast */
}

/* Styling for the main content table (Your primary container) */
.main-layout-table {
    width: 100%;
    /* 90s aesthetic: tables often had thick borders */
    border: 3px solid #AAAAAA; 
    border-collapse: collapse;
    background-color: #FFFFFF;
}

/* --- Navigation Icon and Logo Consistency Fix --- */

/* Targets ALL images in the first table row of the main layout table */
.main-layout-table tr:first-child img {
    width: 50%; /* Force a consistent width of 50px */
    height: auto;           /* Keep aspect ratio */
    display: block;         /* Treat as a block element */
    margin: 0 auto;         /* Center the image within its cell */
}

.footer-text {
    text-align: center;
    font-style: italic;
    font-size: 11px;
    padding: 15px 0;
    border-top: 1px dashed #AAAAAA;
}

h1, h2, h3 {
    color: #000080; /* Deep blue heading */
    border-bottom: 2px solid #AAAAAA;
    padding-bottom: 5px;
}

/* --- GALLERY STYLES --- */

/* The main container for the scrollable row */
.gallery-container {
    padding: 10px;
    background-color: #F8F8F8; /* Light gray background for contrast */
    border: 1px solid #AAAAAA;
    margin: 15px 0;
    
    /* Crucial CSS for horizontal scrolling */
    display: flex; /* Arranges children side-by-side */
    flex-wrap: nowrap; /* Prevents wrapping to a new line */
    overflow-x: scroll; /* Enables horizontal scrolling */
    white-space: nowrap; /* Ensures images stay in a single line */
    -webkit-overflow-scrolling: touch; /* Improves scrolling on touch devices */
}

/* Styling for each image within the gallery - THIS IS THE SCALING CHANGE */
.gallery-container img {
    /* New: Use VW (viewport width) or a percentage of the parent container */
    /* Let's use max-height to ensure they never get too tall, and a relative width */
    width: 20vw; /* Take up 20% of the viewport width */
    max-width: 150px; /* Cap the max width at 150px for large screens */
    height: auto; /* Let the height adjust automatically based on width */
    
    margin-right: 15px; /* Spacing between photos */
    border: 2px solid #000000;
    padding: 3px; 
    background-color: #FFFFFF;
}

/* --- FIX FOR MENU BAR ICONS --- */
/* This makes all icons scale with the 25% column width and max-out at 75px */
.nav-icon {
    width: 90%; 
    height: auto; 
    max-width: 75px; 
}