/* grid container */
.left-sidebar-grid {
    display:grid;
    grid-template-areas:
        'header'
        'main-content'
        'left-sidebar'
        'footer';
}

/* general column padding */
.left-sidebar-grid > * {
    padding:1rem;
}

/* assign columns to grid areas */
.left-sidebar-grid > .header {
    grid-area:header;
    background-color: var(--header-bg-color);
     background-image: url("ThePerfectBlue.gif"); 
    background-position: 100%;
    background-repeat: repeat;
/* change the minimum height if you want it to take up more/less space */
    min-height: 100px;
    margin: 0 auto;
    padding-top: 10px;
    text-align: center;
}
.header > h1 {
    margin: 20px auto;
    max-width: 1080px;
    width: fit-content;
    padding: 12px;
}
.left-sidebar-grid > .main-content {
    grid-area:main-content;
    background:#fff;
}
.left-sidebar-grid > .left-sidebar {
    grid-area:left-sidebar;
    background: #333;
    color: white;
    padding: 0.5rem;
    border-radius: 16px;
    width: 280px;
    max-width: 250px;
    transition: transform 0.3s ease;
    transform: none;
    background-color:#1c3614;
}

.left-sidebar ul {
    padding-left: 0;
    margin: 1em;
}
.left-sidebar-grid > .footer {
    grid-area:footer;
    background:#72c2f1;
}
.white-bg {
    margin: auto;
    width: fit-content;
    background-color: rgb(255, 255, 255);
    border-radius: 1em;
    padding: 0 20px;
}

/* tablet breakpoint */
@media (min-width:768px) {
    .left-sidebar-grid {
        grid-template-columns:repeat(3, 1fr);
        grid-template-areas:
            'header header header'
            'left-sidebar main-content main-content'
            'footer footer footer';
    }
}