/* Reset and Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; color: #333; margin: 10 20px; padding: 20px; text-align:justify; }

/* Wrapper: Centered Layout */
#wrapper {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding-top: 10px;
}

/* Header & Nav */
header { grid-column: 1 / -1; margin-bottom:  5px; margin-top:1px; position: relative; }
header h1 { letter-spacing: 0.31em; margin-bottom: 5px; }
header h1::after {
    content: ""; display: block; height: 6px; border-top: 2px solid #000; border-bottom: 2px solid #000; width: 100%;
}
nav { grid-column: 1 / -1; margin-top:-40px; margin-bottom: 0px; }
nav .nav { list-style: none; display: flex; gap: 20px; }
nav .nav a { text-decoration: none; color: #000; font-weight: bold; }
nav .nav a:hover { color: #03F; }

/* Content Columns */
#leftcolumn { width: 450px; }
#leftcolumn h3 { margin-bottom: 15px; margin-top: -25px;
    text-align: center;
    font-weight: bold;}

p { font-size: .8em; margin-bottom: .5em; text-align: justify; 
 }

/* Thumbnails & Large Image */
.thumbnail-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.thumbnail { height: 80px; border: 2px solid #000; cursor: pointer; opacity: 0.7; transition: 0.2s; }
.thumbnail:hover { opacity: 1; }

#LargeOne { width: 100%; height: auto; border: 1px solid black; display: block; margin-top: -76px; }

.Copyright { grid-column: 1 / -1; text-align: center; font-size: 0.8em; margin-top: 20px; }

aside {
    display: contents; 
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
    #wrapper { grid-template-columns: 1fr; }
    
    /* Move the Large Image to the top */
    #LargeOne { 
        order: -1; 
        margin-top: 0; /* Adjust margin if needed for mobile view */
    }
    
    header { order: 0; }
    
    header h1 { font-size: 1.5em; text-align: center; }
    nav .nav { justify-content: center; }
}

{
    #wrapper { 
        grid-template-columns: 1fr; 
        display: grid; /* Ensure grid is active */
    }

    /* Target the image directly */
    #LargeOne {
        order: -1;
        margin-top: 0;
        grid-column: 1 / -1; /* Ensure it spans the full width */