body {
    margin: 0;
    font-family: Arial, sans-serif;
}

nav {
    background-color: #c75959; /* Light gray background for navigation */
    padding: 10px; /* Some padding for the nav */
    text-align: center; /* Center align nav links */
}

.parent {
    display: grid;
    grid-template-columns: 0.1fr 1fr 0.1fr; /* Three columns */
    grid-template-rows: 0.5fr repeat(3, 2fr) 0.5fr; /* Five rows */
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    height: calc(100vh - 50px); /* Full viewport height minus nav height */
}

.div1 { 
    grid-area: 1 / 2 / 2 / 3; /* Header */
    background-color: rgba(255, 0, 0, 0.3); /* Semi-transparent red */
    padding: 20px; 
    text-align: center; 
}

.div2 { 
    grid-area: 2 / 2 / 3 / 3; /* Main Content */
    background-color: rgba(0, 255, 0, 0.3); /* Semi-transparent green */
    padding: 20px; 
}

.div3 { 
    grid-area: 3 / 2 / 4 / 3; /* Sidebar */
    background-color: rgba(0, 0, 255, 0.3); /* Semi-transparent blue */
    padding: 20px; 
}

.div4 { 
    grid-area: 4 / 2 / 5 / 3; /* Footer */
    background-color: rgba(255, 165, 0, 0.3); /* Semi-transparent orange */
    padding: 20px; 
}

.div5 { 
    grid-area: 5 / 2 / 6 / 3; /* Extra Content */
    background-color: rgba(255, 255, 0, 0.3); /* Semi-transparent yellow */
    padding: 20px; 
}

.main-container {
    padding: 20px; /* Padding for the main container */
}

.row {
    margin-bottom: 20px; /* Margin between rows */
}

.images img {
    max-width: 100%; /* Make images responsive */
    height: auto; /* Maintain aspect ratio */
    margin: 5px; /* Margin between images */
}