body {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0.5rem, 1fr) minmax(300px, 800px) 40px minmax(0.5rem, 1fr);
  grid-template-rows: auto;
  grid-row-gap: 2rem;
  grid-template-areas: '. sitename search .'
                       '. nav nav .'
                       '. toc toc .'
                       '. content content .'
                       '. prev-next prev-next .'
                       '. footer footer .';
}

@media screen and (min-width: 35.5em) {
  body {
    grid-column-gap: 1rem;
    grid-template-areas: '. sitename search .'
                         '. nav nav .'
                         '. toc toc .'
                         '. content content .'
                         '. footer prev-next .';
  }
}

@media screen and (min-width: 48em) {
  body {
    grid-template-columns: minmax(0.5rem, 1fr) minmax(300px, 600px) 200px minmax(0.5rem, 1fr);
    grid-template-areas: '. sitename search .'
                         '. nav nav .'
                         '. content toc .'
                         '. footer prev-next .';
  }
}

body > footer, main {
  all: unset;
}

.site-name {
  grid-area: sitename;
}

.search-button {
  grid-area: search;
  align-self: center;
  justify-self: flex-end;

  border: 0;
  background: none;
  cursor: pointer;
}

.site-navigation {
  grid-area: nav;
  position: relative;
}

.content {
  grid-area: content;
}

.toc {
  grid-area: toc;
}

.prev-next {
  grid-area: prev-next;
}

.footer {
  grid-area: footer;
}

.search-wrapper {
  display: none;
  position: fixed;
  background-color: #fff;
  height: 100vh;
  width: 100vw;
  grid-template-columns: minmax(1rem, 1fr) minmax(300px, 800px) 30px minmax(1rem, 1fr);
  grid-template-rows: minmax(0, 200px) repeat(2, min-content) max(70vh, 400px) minmax(0, 200px);
  grid-row-gap: 1rem;
  grid-template-areas: ". . . ."
                       ". title close-button ."
                       ". input input ."
                       ". results results ."
                       ". . . .";
}

.search-wrapper--is-expanded {
  display: grid;
}

.search-wrapper__close-button {
  grid-area: close-button;
  justify-self: flex-end;
  align-self: center;

  border: 0;
  background: none;
  cursor: pointer;
}

.search-wrapper__title {
  grid-area: title;
  margin: 0;
}

.search-wrapper__form {
  grid-area: input;
}

.search-wrapper__input {
  padding: 5px;
  width: 100%;
  margin: 0;
}

.search-wrapper__results {
  margin: 0;
  grid-area: results;
  overflow: auto;

  li {
    margin: 0 0 2rem;

    a {
      display: block;
    }

    h3 {
      margin: 0;
    }
  }
}

.toc__list {
  margin: 0;
}

.site-navigation li {
  position: relative;
  padding: 0;
}

.site-navigation a {
  display: block;
  padding: 4px 10px;
}

.site-navigation ul{
  margin: 0;
  display: flex;
}

.site-navigation li:hover > ul{
  display: block;
}

.site-navigation ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ccc;
}

.site-navigation ul ul li {
  display: block;
}

.prev-next {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

.prev-next li {
  display: block;
}

.nav-link.disabled {
  color: #ccc;
}

.repo {
  margin: 0;
}

.page-title {
  margin: 0 0 3rem;
}

.post-list {
  padding: 0;
  margin: 0;

  li {
    display: block;
    margin: 0 0 3rem;

    h3 {
      margin: 0 0 1em;
    }
  }
}

.post-meta {
  color: #666;
}

.social-links {
  margin: 1rem 0;

  .social-media-list {
    margin: 0;
    padding: 0;
    
    li {
      display: inline-block;

      a {
        display: block;
        padding: 0.5rem 1rem;
      }
    }
  }
}

.pager {
  margin: 1rem 0;

  .pagination {
    display: flex;
    margin: 0;
    padding: 0;

    li {
      display: block;
      font-size: 1.2rem;

      .current-page,
      a {
        display: block;
        padding: 0.2rem 0.5rem;
      }
    }
  }
}