body {
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f0f0;
}

.container {
    display: grid;
    /* Defines the column widths: left (auto, dynamic), middle (65% fixed), right (auto, dynamic) */
    grid-template-columns: auto 65% auto;
    grid-template-rows: auto 1fr auto; /* Header, Content, Footer rows */
    grid-template-areas:
        "header header header"
        "left content right"
        "footer footer footer";
    min-height: 100vh;
}

.header {
    grid-area: header;
    background-color: #0021A5; /* Gators Blue */
    color: white;
    padding: 20px;
    text-align: center;
}

.footer {
    grid-area: footer;
    background-color: #0021A5;
    color: white;
    padding: 10px;
    text-align: center;
}

.left-column {
    grid-area: left;
    background-color: #F84922; /* Gators Orange */
    padding: 15px;
    color: white;
}

.middle-content {
    grid-area: content;
    background-color: #ffffff;
    padding: 15px;
    overflow-y: auto; /* Adds scroll to content if needed */
}

.right-column {
    grid-area: right;
    background-color: #F84922; /* Gators Orange */
    padding: 15px;
    color: white;
    /* Add the pixel art as a background image */
    background-image: url('cdn.shopify.com');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Basic styling for the list in the left column */
.left-column ul {
    list-style-type: none;
    padding: 0;
}

.left-column li a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 5px 0;
}

/* Optional: Media query for better mobile responsiveness */
@media (max-width: 768px) {
    .container {
        /* Stacks columns vertically on smaller screens */
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "content"
            "left"
            "right"
            "footer";
    }
    .right-column {
        min-height: 200px; /* Ensure pixel art is visible on mobile */
    }
}