/*************************************************************
    _______  _____   ______ _______ __   __   _______ _     _
    |       |     | |_____/ |______   \_/     |______ |_____|
    |_____  |_____| |    \_ |______    |    . ______| |     |

**************************************************************/

  /** Rules that apply to every page **/

  :root {--linkColor: #fe8019; --highlightColor: #689d6a; --mainColor: #282828; --textColor1: #928374; 
  --textColor2: #c8c8c8; --langColor: #b16286;}
  *::selection {background: var(--highlightColor)}
  ::-webkit-scrollbar {height: 0.5em; background: var(--mainColor);}
  ::-webkit-scrollbar-thumb {background: var(--textColor1);}

  #background {z-index: -1; position: fixed; padding-top: 19em; height: 40%; width: 40%; transform: rotate(90deg); 
  filter: invert(32%) sepia(42%) saturate(4916%) hue-rotate(344deg) brightness(78%) contrast(106%);} /* #cb2620 */

  body {letter-spacing: 0.1px; padding: 0; margin: 0 auto; font-family: Monospace, Courier; font-weight: 400; 
  font-size: 17px; color: var(--textColor2); background: var(--mainColor); width: 95%; max-width: 960px;}

  header {padding: 1% 0 1% 0; text-align: right; margin: 0.75em 0 0.75em 0; border-bottom: 1px var(--textColor1) solid;}
  .current {color: var(--linkColor); text-decoration: overline;}

  /** links **/
  a {text-decoration: none; color: var(--textColor1); font-size: 100%;}
  .link:hover {color: var(--linkColor); text-decoration: overline;}
  #continueReading {display: block; text-align: center; padding-bottom: 1em;}
  span {text-decoration: none; color: var(--textColor1); font-size: 100%;}

  h1 {text-align: left; margin-bottom: 0; text-decoration: none; color: var(--textColor1); font-size: 105%; font-weight: normal;}

  .postInfo {display: flex; justify-content: space-between; flex-wrap: wrap;}
  .postTitle {float: left;}
  .postDate {float: right;}

  main {height: 100%; margin-top: 0.75em; display:grid; grid-template-columns: repeat(4, 1fr);
  grid-gap: 0.75em; margin-bottom: 0.75em;}
  
  figure {margin: 1% auto 1% auto; width: 100%;}
  figure img {display: block; margin: 1em auto 1em auto; width: 100%;}
  figcaption {text-align: center;  margin: 1% auto 1% auto;}

  footer {text-align: right; border-top: 1px var(--textColor1) solid; padding-top: 10px; padding-bottom: 10px}
  .social {filter: invert(73%) sepia(15%) saturate(444%) hue-rotate(356deg) brightness(83%) contrast(85%);
  width: 2.5em; height: 2.5em;}

  .posts {grid-column: 1/-1; border: 1px var(--textColor1) solid; background: var(--mainColor); 
  padding: 0 2em 0 2em;}
          
  #post {grid-column: 1/-1; border: 1px var(--textColor1) solid; background: var(--mainColor); 
  padding: 0 2em 0 2em; margin-top: 0.75em; margin-bottom: 0.75em;}

  @media only screen and (max-width:725px) {
      main {margin-top: 0.75em; grid-template-columns: repeat(4, auto);
      grid-gap: 0.75em; margin-bottom: 0.75em;}
      #background {display: none;}
      .posts {padding: 0 1em 0 1em;}
      #post {padding: 0 1em 0 1em;}
      .social {width: 3.5em; height: 3.5em;}
  }

  @media only screen and (max-width: 500px) {
      body {letter-spacing: 0.1px; padding: 0; margin: 0 auto; font-family: 'Share Tech Mono', Monospace, Courier;
      font-weight: 400; font-size: 14px; color: var(--textColor2); background: var(--mainColor); width: 95%; 
      max-width: 960px;}
  }