.item1 { grid-area: header; }
.item2 { 
    grid-area: strip; 
    background-image: url('../images/stripes.gif'); 
    background-repeat: repeat-y; 
    min-width: 100px;
    max-width: 100%;
    height: auto;
}
.item3 { grid-area: comments; }
.item4 { grid-area: footer; }

/** main container */
.grid-container {
    display: grid;
    grid-template-areas:
    'strip 	header  header'
    'strip 	comments comments'
    'strip 	footer footer';
    gap: 15px;
    padding: 2px;
    max-width: 780px;
    border: 0px solid #333;
}

/** panels */
.grid-container > div {
    padding: 2px 0;
    border: 0px solid #333;
}

:root {
    --gapPadding: 2px;
    --fontColor: #fff;
    --maxWidth: 680px;
}

.max-container {
    border: solid 0px #000;
    max-width: var(--maxWidth);
}

.user-container {
    border: solid 2px var(--fontColor);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
}

.thedate {
    border: solid 2px var(--fontColor);
    background-color: #d2d2d2;
    padding: var(--gapPadding);
}

.themessage {
    border: solid 2px var(--fontColor);
    background-color: #e2e2e2;
    padding: var(--gapPadding);
}

.fullname,
.usermail,
.thecity,
.province {
    margin: 0;
    padding: var(--gapPadding);
}

.fullname {
    flex: 1;
    font-style: italic;
}

.center-section {
    display: flex;
    justify-content: center;
    flex: 2;
}

.right-section {
    display: flex;
    flex: 1;
    text-align: right;
    justify-content: right;
}

.nav-container {
    border: solid 0px #000;
    display: flex;
    max-width: var(--maxWidth);
    padding: var(--gapPadding);
}

.left-nav-section {
    background-color: #99cca6;
    flex: 1;
}

.mid-nav-section {
    background-color: lightblue;
    text-align: center;
    flex: 3;
}

.mid-nav-section a:link {font-style: normal; font-weight: normal}
.mid-nav-section a:visited {font-style: normal; font-weight: normal}
.mid-nav-section a:active {color: #ffffff;  text-decoration: none;}

.right-nav-section {
    background-color: lightcoral;
    text-align: right;
    flex: 1;
}