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

        }

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

        #postlistdiv ul {
            padding: 20px
        }


        img {
            width: 100%;
        }


        /* BODY */

        #body {
            background-color: var(--container-bg);
            grid-area: body;
            margin: 10px 0px 10px 0px;
            box-sizing: border-box;
            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;
        }

        .heading {
            padding-top: 15px;

        }
        /* 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 '
                'footer footer footer';
            margin: auto;

        }

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

        #body {
            height: auto;
        }

        
            #headerText>h1 {
            font-size: 2.4em;
        }

        }

  @media only screen and (max-width: 500px) {

        #footer {
            
            height: 50px;
        }

                }