/*
* all css files imported here so that they're compiled 
* into single file.
* Remember that ordering is important.
*/
header {
  background-color: #212022; }
  header a:hover {
    color: #3190c0 !important; }

#navbarTogglerHolder {
  display: none; }

nav {
  background-color: #212022 !important; }

#aboveHeader {
  height: 100px;
  position: relative; }
  #aboveHeader::after {
    content: '';
    z-index: 2;
    position: absolute;
    bottom: -5px;
    background-color: #b6b5ba;
    width: 70%;
    max-width: 1110px;
    height: 3px;
    left: 0;
    right: 0;
    margin: 0 auto; }
  #aboveHeader a {
    color: #fff; }
  #aboveHeader span {
    font-size: 1.7rem;
    color: #76c744; }
  #aboveHeader p {
    font-size: 1rem; }

@media (max-width: 767px) {
  #aboveHeader {
    height: 90px; }
    #aboveHeader::after {
      bottom: -2px; }
  #navbarTogglerHolder {
    position: absolute;
    top: 28px;
    right: 12px;
    display: block; }
    #navbarTogglerHolder button {
      padding: 3px 5px; }
    #navbarTogglerHolder span {
      font-size: 1.4rem; } }

@media (max-width: 400px) {
  #navbarTogglerHolder {
    top: 20px; } }

footer {
  background-color: #212022;
  color: #ffffff80; }
  footer a {
    color: #fff; }
    footer a:hover {
      color: #3190c0; }
  footer h2 {
    color: #76c744; }
  footer #footer-icons {
    font-size: 2.2rem; }
    footer #footer-icons a {
      display: inline-block;
      margin: 0px 15px; }

body {
  background-color: #f5f5f5; }

main {
  min-height: 580px; }

.sidebarItem {
  box-shadow: 0px 0px 1px 0px #b5b5b5;
  padding: 10px;
  margin-bottom: 20px; }
  .sidebarItem h1 {
    font-size: 1.3rem; }
  .sidebarItem h2 {
    font-size: 1rem;
    margin: 0px; }
  .sidebarItem .popularPost {
    display: inline-block;
    width: 100%;
    background-color: #e64510;
    color: #efefef;
    padding: 7px 0px 9px 23px;
    margin: 5px 0px; }
  .sidebarItem#followMe a {
    color: #333;
    font-weight: 500; }
  .sidebarItem#followMe i {
    display: inline-block;
    margin: 5px 10px;
    font-size: 1.4rem; }
  .sidebarItem#aboutMe p {
    font-size: 0.96rem; }

@media (max-width: 576px) {
  main {
    padding-right: 30px !important;
    padding-left: 30px !important; } }

.blog-item {
  box-shadow: 0 0 2px 0 #8e8e8e; }
  .blog-item a {
    color: #333333; }
  .blog-item h2 {
    margin-bottom: 2px; }
  .blog-item p.meta {
    color: #868686; }
  .blog-item p:not(.meta) {
    color: #424242; }

#archiveTitle {
  font-size: 2.1rem; }

.archive-item h2 {
  font-size: 1.6rem; }

h2 {
  font-size: 1.9rem;
  margin-top: 10px; }

h3 {
  font-size: 1.5rem;
  margin-top: 10px; }

pre {
  background: #ececec;
  color: #696969;
  box-shadow: 0px 0px 0px 1px #d0d0d0; }
  pre code {
    padding: 30px;
    display: block;
    line-height: 18px; }

p.meta {
  color: #868686; }

img.shadow {
  margin: 5px 0px 10px 0px;
  box-shadow: 0 0 3px 0 #d2d2d2; }

.hljs {
  display: block;
  overflow-x: auto;
  padding: .5em;
  background: white;
  color: black; }

.hljs-comment, .hljs-quote, .hljs-variable {
  color: #008000; }

.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag {
  color: #00f; }

.hljs-string, .hljs-title, .hljs-section, .hljs-attribute, .hljs-literal, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-addition {
  color: #a31515; }

.hljs-deletion, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-meta {
  color: #2b91af; }

.hljs-doctag {
  color: #808080; }

.hljs-attr {
  color: #f00; }

.hljs-symbol, .hljs-bullet, .hljs-link {
  color: #00b0e8; }

.hljs-emphasis {
  font-style: italic; }

.hljs-strong {
  font-weight: bold; }