/* CSS Document */
body{
             margin: 10px auto;
             max-width: 100%;
             height: auto;
             font-family: Calibri;
             background: #FF4500;
             display: grid;
             color: black;
             grid-template-columns: repeat(1, 1fr);
             grid-template-areas:     "head"
                                      "nav "
                                      "main"
		                           	 "aside"
                                     "foot";
                 }
		h1 {
			text-align: center;
			font-size: 25px;
		}
        
        h2 {
             text-align: center;   
           }
           
        table {
                width: 35%;
              }
                header, nav, main, section, aside, footer {
                         border: 1px solid;
                         padding: 10px;
                         margin: 10px;

                }

                header {
                         background: #F0FFF0;
                         border-color: #FF6347;
                         grid-area: head;
                         text-align: center
                }

                nav {
                         background: #F0FFF0;
                         border-color: #FF6347;
                         grid-area: nav;
                }

                main {
                         background: #F0FFF0;
                         border-color: #FF6347;
                         grid-area: main;
                }

                aside {
                         background: #F0FFF0;
                         border-color: #FF6347;
                         grid-area: aside;
                }


                footer {
                         background: #F0FFF0;
                         border-color: #FF6347;
                         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;
		}
         }