body    {
            margin: 10px auto;
            max-width: 100%;
            height: auto;
            font-family: Calibri;
            background: #95391C;

            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-template-areas: "head"
                                 "nav "
                                 "main"
								 "foot";
        }
        
h1      {
			text-align: center;
			font-size: 25px;
		}

header, nav, main, section, aside, footer   {
                                                border: 1px solid;
                                                padding: 10px;
                                                margin: 10px;

                                            }

header  {
            background: #FFFFFF;
            border-color: #d5d5d5;
            grid-area: head;
        }

nav     {
            background: #fffbf0;
            border-color: #e7c157;
            grid-area: nav;
        }

main    {
            background: #FFFFFF;
            border-color: #df6c20;
            grid-area: main;
        }

aside   {
            background: #fffbf0;
            border-color: #8db243;
            grid-area: aside;
        }


footer  {
            background: #fffbf0;
            border-color: #8a9da8;
            grid-area: foot;
        }

@media (min-width: 40em) {
body                     {
                            grid-template-columns: repeat(2, 1fr);
                            grid-template-areas: "head head"
                                                 "nav  aside"
                                                 "main main"
                                                 "foot foot";
                        }
h1      {
			text-align: center;
			font-size: 40px;
		}
                        }

@media (min-width: 60em) {
body    {
           grid-template-columns: repeat(4, 1fr);
           grid-template-areas: "head head head head"
                                "nav main main main"
                                "aside main main main"
                                "foot foot foot foot";
        }
h1      {
			text-align: center;
			font-size: 50px;
		}
                          }