#container {
            max-width: 1000px;
            display: grid;
            grid-template-columns: auto auto 30%;
            grid-template-areas:
                'header header header'
                'body    body   nav  '
                'footer footer footer';
            margin: auto;
            gap: 10px;

        }

        #head #nav #body #footer {
            max-width: inherit;
        }

        #postlistdiv ul {
            padding: 20px
        }


        img {
            width: 100%;
        }

        /* NAV */


        #nav {
            background-color: var(--container-bg);
            height: auto;
            margin: 10px 10px 10px 10px;
            box-sizing: border-box;
            grid-area: nav;
  height: 500px;
              display: grid;
            grid-template-rows: 60px auto;
            grid-template-areas:
                'nav-header'
                'nav-body';
            margin: auto;

        }
              #postlistdiv {
            grid-area: nav-body;
        }

        #nav > .headingText {
        grid-area: nav-header
        }

        #postlistdiv {
            
              overflow-y: auto;
        }

        /* BODY */

        #body {
            background-color: var(--container-bg);
            grid-area: body;
            margin: 10px 0px 10px 0px;
            box-sizing: border-box;
  height: 500px;
            display: grid;
            grid-template-rows: 70px auto;
            grid-template-areas:
                'body-header'
                'body-body';
            margin: auto;
        }

         #postTitleH1{
            grid-area:body-header;
        }


        .bodyContent {
              grid-area: body-body;
              overflow-y: auto;

        }

        #status {
            max-width: 300px;
            float: right;
            padding: 0px 10px;
        }

        #status h2 {
            margin: 0px;
        }

        /* FOOTER */

        footer {
            background-color: var(--container-bg);
            height: 20px;
            grid-area: footer;
        }

        .mobilehide {
            display: inline-block;
        }

        .mobileShow {
            display: none;
        }

        .headText {
            font-family: var(--additional-font-1)
        }

        .headingText {
            font-family: var(--additional-font-2)
        }

                      #body {

        }

        #nav {

        }

                @media only screen and (max-width: 800px) {
        #container {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-template-areas:
                'header header header'
                'body    body   body '
                'nav nav nav'
                'footer footer footer';
            margin: auto;

        }

                    #head {
                background: var(--banner-bg-mobile);
            }

        #body {
            height: auto;
        }

        #nav {
            height: 200px;
            margin: 0px 0px 10px 0px;
            
        }
        
            #headerText>h1 {
            font-size: 2.4em;
        }

                }