html {

box-sizing: border-box;
font-size: $default-font-size;

}

*, *::before, *::after {

box-sizing: inherit;

}

body {

background-color: $body-bg-color;
font-family: $sans-serif-fonts;

}

.layout {

max-width: 700px;
margin: auto;
padding: 0 15px;

}

.header {

padding: 50px 0;

}

.main {

margin: 50px 0 120px;

}

.header__nav {

display: flex;
align-items: baseline;

}

.header__nav__item {

display: inline-block;
text-decoration: none;
font-size: 1rem;
font-family: $serif-fonts;
color: $header-nav-color;

}

.header__nav__item–title {

font-size: 1.55rem;
margin-right: 40px;
font-weight: bold;

}

.posts {

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

}

.posts__item {

display: flex;
flex-wrap: wrap;
margin-bottom: 50px;
align-items: baseline;

}

.posts__date {

width: 30%;
color: $post-date-color;
font-size: 1rem;
font-family: $serif-fonts;

}

.posts__title {

width: 70%;
font-size: 1rem;

}

.posts__link {

color: $post-link-color;
text-decoration: none;

}

.footer {

padding: 25px 0;
font-size: .9rem;
font-style: italic;
font-family: $serif-fonts;
color: $footer-color;

}

.footer__list {

list-style: none;
display: flex;
padding: 0;
margin: 0;

}

.footer__item {

margin-right: 10px;
display: flex;

}

.footer__item a {

color: $footer-color;
text-decoration: none;

}

.footer__item:nth-child(2):before {

content: '|';
margin-right: 10px;

}

.icon {

height: .9rem;
width: .9rem;
fill: $icon-color;

}

disqus_thread {

margin-top: 60px;

}