---
---

@import "variables";
@import "syntax";
@import "tools/normalize";


/* = = = = = = = = = = Main Styles = = = = = = = = = = */

*, *::after, *::before {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow-x: hidden;
}

html {
  line-height: 1.5;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: $dark-gray;
  margin: 0;
  background-color: $white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &.invert {
      color: $white;
      background-color: $dark-gray;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lato', sans-serif;
  color: $dark-purple;
  font-weight: 400;

  .invert & {
      color: $light-purple;
  }
}

hr {
    border: none;
    width: 3em;
    margin: 1em auto;

    &::before {
        content: '§';
        display: block;
        text-align: center;
    }

    &.fin::before {
        content: '~ Fin ~';
        font-variant: small-caps;
        display: block;
        font-style: italic;
        text-align: center;
    }
}

img {
  height: auto;
  max-width: 100%;
}

a {
  color: $dark-pink;

  .invert & {
    color: $light-pink;
  }
}

blockquote {
  border-left: 3px solid $dark-purple;
  padding-left: 18px;
  margin-left: 21px;
  font-style: italic;
  color: $dark-purple;

  .invert & {
      border-left-color: $light-purple;
      color: $light-purple;
  }
}

pre {
  padding: 16px 32px;
  overflow-x: auto;

  code {
    border: 0;
    padding-right: 0;
    padding-left: 0;
  }
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: transform .4s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

.flex-container.active {
  transform: translate3d(300px, 0, 0);
  &::after {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-color: rgba(0,0,0,0.5);
  }
}

.content {
  flex-grow: 1;
}

.wrapper {
  width: 960px;
  max-width: 90%;
  margin: 0 auto;
  position: relative;
}

::-moz-selection {
  background: rgba(49, 30, 62, 0.7);
  color: #ffffff;

  .invert & {
    background: rgba(149, 130, 162, 0.7);
  }
}

::selection {
  background: rgba(49, 30, 62, 0.7);
  color: #ffffff;

  .invert & {
    background: rgba(149, 130, 162, 0.7);
  }
}

.clearfix::before, .clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.clearfix::before {
  clear: both;
}

/* = = = = = = = = = = Header Styles = = = = = = = = = = */
@import "parts/header";

/* = = = = = = = = = = Search Styles = = = = = = = = = = */
@import "parts/search";

/* = = = = = = = = = = Post-Card Styles = = = = = = = = = = */
@import "parts/post-card";

/* = = = = = = = = = = Pagination Styles = = = = = = = = = = */
@import "parts/pagination";


/* = = = = = = = = = = Footer Styles = = = = = = = = = = */
@import "parts/footer";

/* = = = = = = = = = = Post-Page Styles = = = = = = = = = = */
@import "parts/post-page";

/* = = = = = = = = = = Author Box Styles = = = = = = = = = = */
@import "parts/author-box";

/* = = = = = = = = = = About Page Styles = = = = = = = = = = */
@import "parts/about";

/* = = = = = = = = = = Tags Styles = = = = = = = = = = */
@import "parts/tags";

/* = = = = = = = = = = Animate Styles = = = = = = = = = = */
@import "parts/animate";

/* = = = = = = = = = = Media = = = = = = = = = = */
@import "media"