/*
 *  __                  __
 * /\ \                /\ \
 * \ \ \___   __  __   \_\ \     __
 *  \ \  _ `\/\ \/\ \  /'_` \  /'__`\
 *   \ \ \ \ \ \ \_\ \/\ \_\ \/\  __/
 *    \ \_\ \_\/`____ \ \___,_\ \____\
 *     \/_/\/_/`/___/> \/__,_ /\/____/
 *                /\___/
 *                \/__/
 *
 * Designed, built, and released under MIT license by @mdo. Learn more at
 * https://github.com/poole/hyde.
 */

/*
 * Global resets
 *
 * Update the foundational and global aspects of the page.
 */

html {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
@media (min-width: 38rem) {
  html {
    font-size: 16px;
  }
}
@media (min-width: 58rem) {
  html {
      font-size: 18px;
  }
}

pre {
  tab-size: 3;
}
.page-list-separator {
   margin: 0 0 .5em 0;
}

/*
 * Sidebar
 *
 * Flexible banner for housing site name, intro, and "footer" content. Starts
 * out above content in mobile and later moves to the side with wider viewports.
 */

.sidebar {
  text-align: left;
  color: rgba(255,255,255,.5);
  background-color: rgb(73, 104, 194);
   padding-top: 1rem;
   padding-bottom: 1rem;
}

@media (min-width: 48rem) {
   .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 17rem;
   }
}

/* Sidebar links */
.sidebar a {
  color: #fff;
}

/* About section */
.sidebar-about h1 {
  color: rgb(33, 64, 154);
  font-family: "Montserrat", serif;
  font-weight: bold;
  font-size: 3rem;
  white-space: nowrap;
  text-align: center;
}

/* Sidebar nav */
.sidebar-nav {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-left: 0;
  list-style: none;
}

@media (min-width: 48rem) {
   .sidebar-nav {
      margin-top: 2rem;
      margin-bottom: 2rem;
   }
}

.sidebar-nav-item {
  display: block;
}
a.sidebar-nav-item:hover,
a.sidebar-nav-item:focus {
  text-decoration: underline;
}
.sidebar-nav-item.active {
  font-weight: bold;
}

/* Sticky sidebar
 *
 * Add the `sidebar-sticky` class to the sidebar's container to affix it the
 * contents to the bottom of the sidebar in tablets and up.
 */
@media (min-width: 48rem) {
  .sidebar-sticky {
    position: absolute;
    top: 1rem;
   }

   .sidebar-footer {
      position: absolute;
      bottom: 0;
   }
}

/* Content */

.content {
   padding-top:    3rem;
   padding-bottom: 4rem;
}

@media (min-width: 48em) {
   .content {
      margin-left: 18rem;
      margin-right: 1rem;
   }
}

@media (min-width: 64em) {
   .content {
      max-width: 64rem;
      margin-left: 20rem;
      margin-right: 4rem;
   }
}

.footnote {
  font-size: 0.7em;
  margin-top: 0.5rem;
}

/*
 * Logo on home page
 */
.logo {
  color: rgb(33, 64, 154);
  margin-top: 0;
  position: absolute;
  left: 20%;
  font-family: "Montserrat", serif;
  font-size: 3rem;
  font-weight: bold;
  white-space: nowrap;
}

.next-page, .previous-page {
}

.next-page {
   float: right
}

@media (min-width: 48rem) {
   .logo {
      position: absolute;
      top: 30%;
      left: 40%;
      font-size: 4rem;
   }
}

@media (min-width: 64rem) {
   .logo {
      position: absolute;
      top: 30%;
      left: 30%;
      font-size: 6.5rem;
  }
}