body {
  text-align: left;
}

.mobile-nav {
  display: none !important;
}

.avatar-mobi {
  display: none;
}

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

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

.header {
  border-top: 2px dashed #9c998e;
  grid-area: header;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.nav{
 display: flex;
 flex-direction: row;}

article {
  grid-area: article;
}

footer {
  grid-area: footer;
}

.aside {
  grid-area: aside;
}

@media screen and (max-width: 479px) {
  .mobile-nav {
    display: grid !important;
  }

  .desktop-nav {
    display: none !important;
  }

  .avatar-mobi {
    display: block;
    text-align: right;
  }

  .avatar-desktop {
    display: none !important;
  }

  img#avatar {
    margin-top: 0em !important;
}


}

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

/* Large Screens */
  @media(min-width:1101px){
  .grid{
      display:grid;
      border: 2px solid black;
      grid-template-areas:
      "header header"
      "article aside"
      "footer footer";
}
  }

h1:before{content:'# '}
h2:before{content:'## '}
h3:before{content:'### '}
.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: 4em;margin-right: 10px;}
.grid{background-color:#242424;max-width:900px;margin:1em auto;padding:1em 1.5em}
ul>li:before{content:'- ';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}
blockquote{color:#95e454}
footer{color:#9c998e; font-style:italic}
footer{border-top:2px dashed #9c998e}
header{border-top:2px dashed #9c998e}
h1{padding-bottom:.5em;border-bottom:2px dashed #cae982}
a,summary{color:#88b8f6;text-decoration:underline;cursor:pointer;outline:0}
.blueText
{
    color: #88b8f6;
}