/**
 * RESET STYLES
 */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
}

article,
aside,
figcaption,
figure,
footer,
header,
nav,
section,
iframe { display: block; }

audio,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

ol,
ul { margin-left: 1.75rem; }

blockquote,
q { quotes: none; }

blockquote::before,
q::before { content: ""; }

table {
  border-collapse: collapse;
  border-spacing: 0;
}





/**
 * GENERAL STYLES
 */

html {
  font-size: 22px !important;
  font-family: "Bitter", sans-serif;
  line-height: 1;
}

a {
  text-decoration: none;
  color: #32a5f0;
}

strong { font-weight: bold; }

i { font-style: italic; }





/**
 * HELPERS
 */

.mt-half { margin-top: .5rem; }
.mt-full { margin-top: 1rem; }
.mt-double { margin-top: 2rem; }

.mr-half { margin-right: .5rem; }
.mr-full { margin-right: 1rem; }
.mr-double { margin-right: 2rem; }

.mb-half { margin-bottom: .5rem; }
.mb-full { margin-bottom: 1rem; }
.mb-double { margin-bottom: 2rem; }

.ml-half { margin-left: .5rem; }
.ml-full { margin-left: 1rem; }
.ml-double { margin-left: 2rem; }

.Reign {
  font-family: "Bitter", sans-serif;
  text-transform: uppercase;
}

.highlight { color: #e74c3c; }





/**
 * PROGRESS STYLES
 */

.progress {
  position: fixed;
  width: 100%;
  height: 2px;
  margin-top: -3rem; /* the `padding-top` of the header */
}

.progress__value {
  width: 0;
  height: 100%;
  background: #32a5f0;
  transition: all .5s ease-out;
}

.home-template .progress { display: none; }





/**
 * HEADER STYLES
 */

.site-header {
  display: flex;
  justify-content: center;
  width: 90%;
  margin: 3rem auto 6rem;
}





/**
 * CONTENT STYLES
 */

.site-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-content > *:last-child { margin-bottom: 0; }






/**
 * POST STYLES (POST, PAGE)
 */

.post {
  width: 800px;
  margin-bottom: 10rem;
}

.post__header { margin-bottom: 4rem; }

.post__header h2 {
  font-size: 2rem;
  line-height: 1.35;
}

.post__tags a + a { margin-left: 10px; }

.post__content {
  margin-bottom: 4rem;
  font-size: 1.125rem;
  line-height: 1.75;
}

.post__content--is-page { margin-bottom: 0; }

.post__content h3,
.post__content ul,
.post__content ol,
.post__content blockquote,
.post__content pre,
.post__content pre[class*=language-],
.post__content iframe,
.post__content p { margin-bottom: 2rem; }

.post__content h3 {
  font-family: "Bitter", sans-serif;
  text-transform: uppercase;
  font-size: 1.25rem;
  font-weight: 700;
}

.post__content ol ol,
.post__content ul ul { margin-bottom: 0; }

.post__content iframe { width: 100%; }

.post__content img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

.post__content blockquote,
.post__content pre { display: block; }

.post__content blockquote {
  padding: 1rem 1.5rem;
  color: #1abc9c;
  border-left: 4px solid #1abc9c;
  font-style: italic;
}

.post__content blockquote > * {
  margin-bottom: 0;
  font-size: 1.125rem;
}

.post__content p code {
  background: #f5f2f0;
  font-family: monospace;
  border-radius: 5px;
  padding: .25rem .5rem;
}

.post__content pre,
.post__content pre[class*=language-] {
  padding: 0 1.5rem;
  margin-top: 0;
  font-size: 16px;
  border-radius: 5px;
}

.post__content > *:last-child { margin-bottom: 0; }





/**
 * POST SUMMARY STYLES (HOMEPAGE)
 */

.post--is-summary {
  position: relative;
  padding-bottom: 3rem;
  margin-bottom: 3rem;
  text-align: center;
}

.post--is-summary:not(:last-of-type)::after {
  display: block;
  width: 50%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  background: #ccc;
  content: "";
}

.post--is-summary h2 {
  font-size: 2rem;
  line-height: 1.35;
}





/**
 * PAGINATION STYLES
 */

.pagination {
  font-family: "Bitter", sans-serif;
  text-transform: uppercase;
}

.pagination a + span,
.pagination span + a { margin-left: 4rem; }





/**
 * ABOUT PAGE SPECIFIC STYLES
 */

.profile-photo { margin-bottom: 4rem; }

.profile-photo img {
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
}





/**
 * FOOTER STYLES
 */

.site-footer {
  padding: 6rem 0 3rem;
  display: flex;
  justify-content: center;
}





/**
 * FOOTER STYLES
 */

.discuss-wrapper {
  margin-top: 4rem;
}





/**
 * MQ STYLES
 */

@media (max-width: 900px) {
  .post { width: 90%; }
}

@media (max-width: 650px) {
  html { font-size: 18px !important; }
}

@media (max-width: 500px) {
  html { font-size: 16px !important; }

  .pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pagination a + span,
  .pagination span + a {
    margin-left: 0;
    margin-top: 2rem;
  }

  .site-footer > section {
    justify-content: initial;
    align-items: center;
    flex-direction: column;
  }
}