@charset "utf-8";

body {
   display: grid;
   gap: 0.5em;

   margin: 0 auto;
   margin:10px;
   max-width: 100%;

   color:#fff;
   background: #222;
}

nav {display:none;}
aside {display:none;}

@media (min-width: 980px) {
   body {
      grid-template-columns: 1fr 4fr;
      grid-template-rows: auto 1fr auto;
   }
   nav {display:inline;}
}

@media (min-width: 1200px) {
   body {
      grid-template-columns: 1fr 4fr 1fr;
      grid-template-rows: auto 1fr auto;
   }
   aside {display:inline;}
}


header,nav,main,article,fieldset,aside,footer {
   border-radius: 0px 0.5em 0.5em;
   border: thin solid;
   padding: 10px;
}

header,footer {
   grid-column: 1 / -1;
}

header {
   background: #111;
   border-color: #000;
   display: grid;
   grid-template-columns: min-content 1fr;
   text-align: right;
}

nav {
   background: #111;
   border-color: #000;
}

main {
   background: #111;
   border-color: #000;
}

aside {
   background: #111;
   border-color: #000;
}

footer {
   background: #111;
   border-color: #000;
}

footer * {
   /*
   float: right;
   clear: right;
   margin: 0 0 1em;
   */

}