/**

This CSS mostly uses the BEM (Block Element Modifier) naming pattern (getbem.com/) for modularity:

Complete example (from getbem.com):

<style>
    .form { }
    .form--theme-xmas { }
    .form--simple { }
    .form__input { }
    .form__submit { }
    .form__submit--disabled { }
</style>

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>

**/

/* html and body need to have height: 100% in order for the sticky bottom

* site-footer to work. */

html, body {

height: 100%;

}

body {

box-sizing: border-box;
display: flex;
flex-direction: column;

}

.site-header {

padding-left: 20px;
padding-right: 20px;
padding-top: 12px;
padding-bottom: 12px;
background-color: var(--body-color);
color: var(--muted-color);

}

.site-header__navbar {

text-align: center;
overflow-x: auto;
white-space: nowrap;

}

.site-header__nav-links {

list-style: none;
margin-bottom: 0;

}

.site-header__nav-item {

display: inline-block;
vertical-align: bottom;
margin-left: 0;

}

.site-header__nav-item:first-child a {

padding-left: 0;

}

.site-header__nav-item:last-child a {

padding-right: 0;

}

.site-header__nav-link {

color: hsla(0,0%,100%,.75);
text-decoration: none;
border: none;
padding-right: 16px;
line-height: 32px;
transition: color 250ms linear;
font-size: var(--navbar-font-size);
font-weight: var(--navbar-font-weight);

}

.site-header__nav-link–active {

color: white;

}

.content {

flex-shrink: 0;

}

.content__outer-container {

max-width: 800px;
margin-left: auto;
margin-right: auto;
padding: 0 20px;

}

.content__header {

padding: 50px 0;

}

.content__title {

text-align: center;

}

.content__inner-container {

max-width: 650px;
margin-left: auto;
margin-right: auto;

}

.post-footer {

margin-top: 90px;

}

.content .posts-list {

list-style-type: none;

}

.content .posts-list__item {

margin-left: 0;

}

.site-footer {

margin-top: auto;
padding-top: 10rem;
text-align: center;

}

.site-footer__links {

list-style: none;
margin-bottom: 0;

}

.site-footer__links-item {

display: inline-block;
padding-right: 16px;
margin-left: 0;

}

.site-footer__links-item:last-child {

padding-right: 0;

}