/* tachyons.css */
html, body { height: 100%; }
body { 
  margin: 0;
  background-color: white;
}

div, section, ul {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: black;
}

a, a:visited {
  background-color: black;
  color: white;
}
/* spacing */
.pa0 { padding: 0; }
.pa4 { padding: 2rem; }
.pv1 { padding-top: .25rem; padding-bottom: .25rem; }
.pv2 { padding-top: .5rem; padding-bottom: .5rem; }
.pb2 { padding-bottom: .5rem; }

.ma0 { margin: 0; }
.ma2 { margin: .5rem; }
.mr4 { margin-right: 2rem; }
.mb4 { margin-bottom: 2rem; }
.mt4 { margin-top: 2rem; }
.mh4 { margin-left: 2rem; margin-right: 2rem; }
.mv1 { margin-top: .25rem; margin-bottom: .25rem; }
.mv2 { margin-top: .5rem; margin-bottom: .5rem; }

.tc { text-align: center; }

.measure { max-width: 30em; }
.no-underline { text-decoration: none; }
.list { list-style-type: none; }
.pointer:hover { cursor: pointer; }
.word-wrap { word-break: break-all; }

/* positioning */
.fixed { position: fixed; }
.relative { position: relative; }
.abs { position: absolute; }
.right-0  { right:  0; }
.bottom-0 { bottom: 0; }

.z-999 { z-index: 999; }

/* floats */
.fl { float: left; }
.fr { float: right; _display: inline; }

/* borders */

.bb { border-bottom-style: solid; border-bottom-width: 1px; }
.b--white { border-color: #fff; }

/* color */
.bg-black { background-color: #000; }
.white { color: #fff; }

/* display */
.db { display: block; }
.dib { display: inline-block; }

/* display / flex */
.flex { display: -webkit-box; display: -ms-flexbox; display: flex; }
.flex-row { flex-direction: row; }
.flex-column  { flex-direction: column; }
.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

/* width & height */
.h-25 { height: 25%; }
.vh-100 { height: 100vh; }
.w-40 { width: 40%; }
.w-15 { width: 15%; }
.w-25 { width: 25%; }
.w-75 {  width:  75%; }
.w-50 {  width:  50%; }
.w-100 { width: 100%; }
.mw7  {  max-width: 48rem; }

@media screen and (max-width: 48em) {
 .w-100-ns { width: 100%; }
 .right-container { z-index: -1; }
 .container { flex-direction: column;}
 .side-bar {  margin-bottom: 1rem; }
 .side-bar li { 
    display: inline; 
    padding-right: 1rem;
  }
}

/* typography */
.lh-title { line-height: 1.25; }
.lh-copy { line-height: 1.5; }

/* Type Scale */
.f2 { font-size: 2.25rem; }
.f3 { font-size: 1.5rem; }
.f4 { font-size: 1.25rem; }
.f5 { font-size: 1.1rem; }
.f6 { font-size: .875rem; }

.barlow {
  font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 
                'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial,
                sans-serif;
  font-weight: 300;
}
.open-sans {
  font-family: 'Open Sans Condensed', -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 
                'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial,
                sans-serif;
  font-weight: 700;
}
.animate-white {
  background-color: black;
  color: white;
  -webkit-transition: color 1s ease-out;
  -moz-transition: color 1s ease-out;
  -o-transition: color 1s ease-out;
  transition: color 1s ease-out;
}
.animate-white:hover, .animate-white:visited:hover {
  background-color: white;
  color: black;
}
.h-fit {
  height: fit-content;
}
.w-fit {
  width: fit-content;
  width: -moz-fit-content;    /* Firefox */
  width: -webkit-fit-content; /* Chrome */
}
.right-container {
  left: 50%;
  position: fixed;
}
.blog-content {
  margin: auto;
  line-height: 1.5;
}