:root {
  --main-color: #FC3F29;
  --hover-color: #FF6E00;
  --hover-dark-color: #29E6FC;
}

.header {
  margin-bottom: 5px;
}

.header nav,
.post > ul.pagination {
  border-top: 1px solid #999;
  padding-top: 15px;
}

.header .avatar {
  margin: -40px 20px 0px 10px;
}

.header .avatar img,
.post > ul.pagination img {
  width: 100px;
  height: 100px;
  overflow: visible;
  border-radius: 0;
}

.post > i.nav {
  font-size: 30px;
}

.post > .header-image > img {
  margin: 0;
}
.post > .header-image > p {
  margin-top: 0;
  font-size: 14px;
  font-style: italic;
  text-align: right;
}

blockquote {
  font-family: Amiko,Roboto,Graphik,Helvetica,sans-serif;
}

blockquote.thought-process {
  font-size: 1rem;
}
blockquote.thought-process > p > em {
  font-weight: normal;
}

.header .site-description .scheme-toggle a svg {
  max-height: 24px;
}

img.about-headshot {
  float: right;
  padding: 3px;
  border: 2px solid #ccc;
  margin-left: 20px;
  margin-bottom: 10px;
}

.alert {
  position: relative;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  color: #856404;
  border: 1px solid #ffeeba;
  background-color: #fff3cd;
}

.text-align-left {
  text-align: left;
}
.text-align-right {
  text-align: right;
}

// https://css-tricks.com/dont-overthink-it-grids/
.grid {
  width: auto;
}
[class*='col-'] {
  float: left;
}
.col-1-3 {
  width: 33.33%;
}
.col-2-3 {
  width: 66.66%;
}
.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
.col-1-8 {
  width: 12.5%;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
[class*='col-'] {
  padding-right: 20px;
}
[class*='col-']:last-of-type {
  padding-right: 0;
}
