@font-face {
      font-family: 'Assistant';
      src: url('fonts/assistant/Assistant-Regular.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
}

body {
   font-family: 'Assistant', Helvetica, Arial, sans-serif;
   margin: 0.25em;
   background-color: white;
}

p {
   font-size: 1.1em;
   margin: 0 0 0.8em 0;
}

h1 {
   font-size: 1.4em;
   margin: 0.25em 0;
}

h2 {
   font-size: 1.3em;
   padding: 0.5em 0 0.5em 0;
   margin: 0;
}

h3 {
   font-size: 1.2em;
   padding: 0;
   margin: 0 0 0.5em 0;
   padding: 1em 0 0 0;
}

a {
   text-decoration: underline;
   color: black;
}

a:hover {
   text-decoration: none;
   color: grey;
   transition: all 0.75s ease-in-out;
   -moz-transition: all 0.75s ease-in-out;
   -webkit-transition: all 0.75s ease-in-out;
}

blockquote {
    font-family: "Consolas", "courier new";
    font-size: 0.9em;
}

pre, code {
    display: table;
    color: grey;
    background-color: black;
    padding: 0.25em;

    white-space: pre-wrap;
}

img, table {
    max-width: 100%;
    overflow-x: hidden;
}

img.about {
    width: 200px;
    height: auto;
    padding: 0.5em;
    float: right;
}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

.grid {
   color: black;
   padding: 0.5em 0;
   margin: 0;
}

.header {
   grid-area: header;
   padding: 0 0.5em;
   margin: 0;
   border-bottom: solid 1px black;
}

.navbar {
   grid-area: navbar;
   padding: 0 0.5em;
   margin: 0;
   border-bottom: solid 1px black;
   font-size: 1em;
}

.navbar ul {
   padding: 0;
   margin: 0.25em;
}

.navbar li {
   display: inline;
   list-style-type: none;
   text-align: center;
   border-radius: 5px;
   padding: 4px 1px;
   margin: 0px;
   width: auto;
   text-decoration: none;
}

.content {
   grid-area: content;
   padding: 0 20px;
}

.sidebar {
   grid-area: sidebar;
   padding: 0 0.5em;
   margin: 0 0 0.25em 0;
}

.sidebar .postlink  {
   display: block;
   padding: 3px;
}

.footer {
   grid-area: footer;
   /*border-top: solid 1px black;*/
   padding: 1em 0.5em;
}


@media only screen and (max-width: 799px) {
   .wrapper {
      display: grid;
      grid-gap: 0px;
      grid-template-columns: 1fr;
      grid-template-rows: none 1fr none none 1em;
      grid-template-areas:
         "header"
         "navbar"
         "content"
         "sidebar"
         "footer";
   }
   p { font-size: 1em; }
   h1 { font-size: 1.0em; }
   h2 { font-size: 1em; }
   h3 { font-size: 0.9em; }
   .navbar a { font-size: 0.9em; }
}

@media only screen and (min-width: 800px) {
   .wrapper {
      display: grid;
      grid-gap: 0px;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: none none 1em;
      grid-template-areas:
         "header  header  navbar  navbar"
         "sidebar content content content"
         "footer  footer  footer  footer";
   }

   .navbar li {
      width: 40px;
      margin: 0 10px;
   }
}

@media only screen and (min-width: 1100px) {
   .wrapper {
      width: 1100px;
      margin: auto;
   }
}