body {
  text-align: left;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  border: 2px solid black;
  grid-template-rows: 50px auto;
  grid-gap: 5px;
  grid-template-areas: "header"
                       "article"
                       "footer";
}

header,
aside,
article,
footer {
  background: #242424;
  padding: 1em;
}

header {
  grid-area: header;
}

article {
  grid-area: article;
}

footer {
  grid-area: footer;
}



@media (min-width:600px) and (max-width:1100px){
  .grid {
    display:grid;
    border: 5px solid black;
    grid-template-areas:
    "header header"
    "article article"
    "footer footer";
  }
}

/* Large Screens */
  @media(min-width:1101px){
  .grid{
      display:grid;
      border: 5px solid black;
      grid-template-areas:
      "header header"
      "article article"
      "footer footer";
}
  }
  aside{float:right}
  body,html{font-size:100%;line-height:130%;font-family:'Anonymous Pro',monospace;color:#e3e0d7;background-color:#080808}
  h1,h2,h3{font-weight:900;color:#cae982;margin:1em 0 .5em}
  img#avatar{width:120px;border-radius:50%;border:2px solid #88b8f6;margin-top:1em}
  .grid{background-color:#242424;max-width:900px;margin:1em auto;padding:1em 1.5em}

  a,summary{color:#88b8f6;text-decoration:underline;cursor:pointer;outline:0}
  h2{font-style:italic}
  footer{border-top:2px dashed #9c998e}
  footer{color:#9c998e; font-style:italic}
  header{border-top:2px dashed #9c998e}

  .header {
    grid-area: header;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .red,p>code,time,ul>li:before{color:#e5786d}

  aside{float:right}
  body,html{font-size:105%;line-height:130%;font-family:'Anonymous Pro',monospace;color:#e3e0d7;background-color:#080808}
  h1,h2,h3{font-weight:900;color:#cae982;margin:1em 0 .5em}
  img#avatar{width:120px;border-radius:50%;border:2px solid #88b8f6;margin-top:1em}
  .grid{background-color:#242424;max-width:900px;margin:1em auto;padding:1em 1.5em}

  ul>li:before{content:'- ';margin-left:-1.1em;float:left}
  blockquote>p:before{content:'> ';margin-left:-1.1em}
  blockquote:after,blockquote:before,q:after,q:before{content:none}
  audio,blockquote,details,footer,h1,h2,h3,ol,p,ul{padding:0;border:0;font:inherit;vertical-align:baseline}
  article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,p>img,section{display:block}
  ol,ul{list-style:none}