/****
 * TYPOGRAPHY 
 * (perfect four ratio - 3:4)
 *
 * Thanks to:
 * - https://www.gridlover.net/try
 * - https://scotch.io/tutorials/aesthetic-sass-3-typography-and-vertical-rhythm
 * - http://concisecss.com/documentation/core#typography (colors)
 ****/
:root {
  --html-font-size: 16px;  
  --base-font-size: 1rem;
  --line-height: 1.5;
  --scale-factor: 1.3333;
  --leading: 1.5rem;
  --letter-spacing: 0.05em;

  --accent-color: #C65146;
  --line-color: #DCDCDC;
  --selection-color: #EBE1D3;
  --link-color: #b73333;
  --link-hover-color: #653131;
  --nav-link-color: #fa8181;
  --nav-link-hover-color: #f25a5a;

  --heading-text-color: #222;
  --primary-text-color: #444;
  --secondary-text-color: #666;
  --primary-inverted-text-color: #fefefe;
  --secondary-inverted-text-color: #f5f5f5;

  --primary-background: #fefefe;
  --light-background: #f5f5f5;
  --dark-background: #32373d;

  --success-color: #10a887;
  --warning-color: #F17F42;
  --error-color: #da3c3c;
}

html {
  font-size: 16px;
  line-height: 1.5;
}

body {
  font-family: 'Raleway', sans-serif;
  -moz-font-feature-settings: "liga", "clig", "onum", "frac", "kern";
  -webkit-font-feature-settings: "liga", "clig", "onum", "frac", "kern";
  -ms-font-feature-settings: "liga", "clig", "onum", "frac", "kern";
  font-feature-settings: "liga", "clig", "onum", "frac", "kern";
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  font-weight: normal;
  margin: auto;
  letter-spacing: 0.05em;
  font-size: 1rem;
  line-height: 1.5rem;
}
h1, .h1 {
  font-size: 2.375rem;
  line-height: calc(1.5rem * 2);
  margin-top: calc(1.5rem * 1);
  margin-bottom: calc(1.5rem * 0);
}
h2, .h2 {
  font-size: 1.75rem;
  line-height: calc(1.5rem * 2);
  margin-top: calc(1.5rem * 1);
  margin-bottom: calc(1.5rem * 1);
}
h3, .h3 {
  font-size: 1.3125rem;
  line-height: calc(1.5rem * 1);
  margin-top: calc(1.5rem * 1);
  margin-bottom: calc(1.5rem * 0);
}
h4, .h4 {
  font-size: 1rem;
  line-height: calc(1.5rem * 1);
  margin-top: calc(1.5rem * 1);
  margin-bottom: calc(1.5rem * 0);
}
h5, .h5 {
  font-size: 1rem;
  line-height: calc(1.5rem * 1);
  margin-top: calc(1.5rem * 1);
  margin-bottom: calc(1.5rem * 0);
}
p, ul, ol, pre, table, blockquote {
  margin-top: calc(1.5rem * 0);
  margin-bottom: calc(1.5rem * 1);
}
ul ul, ol ol, ul ol, ol ul {
  margin-top: calc(1.5rem * 0);
  margin-bottom: calc(1.5rem * 0);
}
a, b, i, strong, em, small, code {
  line-height: calc(1.5rem * 0);
}
pre, code {
  font-family: 'Hack', monospace;  
}
code.hljs {
  font-size: calc(1rem * 0.75);
  line-height: calc(1.5rem * 0.75);
}
small, sub, sup, time, .panel-header, hr::before, footer {
  font-size: calc(1rem * 0.75);
}
sub, sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
.primary-subtitle, .secondary-subtitle {
  font-style: italic;
}
.primary-subtitle { 
  margin-top: calc(1.5rem * -1);
}
.secondary-subtitle {
  margin-top: 0; 
}
.leading {
  line-height: calc(1.5rem * 1);
  margin-top: calc(1.5rem * 1);
  margin-bottom: calc(1.5rem * 0);
}

b, strong, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .panel-title {
  font-weight: bold;
}

i, em, .primary-subtitle, .secondary-subtitle, .panel-header {
  font-family: 'Raleway', sans-serif;
  font-style: italic;
  -moz-font-feature-settings: "liga", "clig", "dlig", "onum", "frac", "kern";
  -webkit-font-feature-settings: "liga", "clig", "dlig", "onum", "frac", "kern";
  -ms-font-feature-settings: "liga", "clig", "dlig", "onum", "frac", "kern";
  font-feature-settings: "liga", "clig", "dlig", "onum", "frac", "kern";
}

h1, h2, h3, h4, h5 {
  font-family: 'Raleway', sans-serif;  
  font-style: normal;
  -moz-font-feature-settings: "liga", "clig", "dlig", "onum", "frac", "kern";
  -webkit-font-feature-settings: "liga", "clig", "dlig", "onum", "frac", "kern";
  -ms-font-feature-settings: "liga", "clig", "dlig", "onum", "frac", "kern";
  font-feature-settings: "liga", "clig", "dlig", "onum", "frac", "kern";
}
a {
  text-decoration: none;
}
.content {
  border-radius: 4px;
  padding: 0 calc(1.5rem * 0.5);
  padding-bottom: calc(1.5rem * 0.25);
}
.container-fluid {
  padding: 0 calc(1.5rem * 0.5);
}

time {
  text-align: right;
  display: block;
}


.sidebar header {
  text-align: center;  
}

.logo {
  margin: auto;
  display:block;
  margin-left:20px; /* Fix for incorrect font alignment */
}

a.logo {
  text-decoration: none;
}
hr {
  border: none;  
  margin: 0;
}

hr::before {
  content: '\2042'; 
  display:block;
  text-align: center;
}

.card:last-child .card-footer::after {
  content: none;  
}

.card-footer {
  text-align: center;
  margin: auto;
}

.label {
  padding: calc(1.5rem * 0.15);
  border-radius: 2px;
}

.card-footer .action::after {
  content: '\00B7';
}

.card-footer .action:last-child::after {
  content: none;  
}

.panel {
  margin-top: calc(1.5rem * 1);  
}

.panel-header {
  text-align: right;  
}

.panel-body {
  margin-top: calc(1.5rem * -1);  
}

.panel-body header {
  text-align: left;  
}

footer, .badges {
  text-align: center;  
}

ul.inline {
  padding-left: 0;  
}

ul.inline li {
  display: inline;  
}

footer p, footer ul.inline, .secondary-subtitle {
  margin-bottom: calc(1.5rem * 0);  
}

footer .h3rald {
  font-size: 0.85rem; /* Compensate */
  vertical-align: text-bottom;
}

.clearfix {
  clear: both;  
}

img {
  max-width: 100%;  
}

pre code, img {
  border-radius: 4px;
}



/*****
 * THEME
 *****/

body {
  background: #fefefe;
  color: #444;
}

h1, h2, h3, h4, h5 {
  color: #222;
}

.primary-subtitle {
  color: var(secondary-text-color);  
}

a, a:visited {
  color: #b73333;
}

a:hover {
  color: #653131;  
}

.content {
  background: #fefefe;
  color: #444;
}

.main, .sidebar, .sidebar .content {
  background: #32373d;
  color: #fefefe;
}

.sidebar a, .sidebar a:visited {
  color: #fa8181;
}

.sidebar a:hover {
  color: #f25a5a;  
}

a.logo, a.logo:visited, a.logo:hover {
  color: #fefefe;
}

.sidebar hr, .main hr, .panel-header {
  color: var(--secondary-inverted-text-color);
}

.label {
  color: #fefefe;
}

.label-success {
  background: #10a887;  
}

.label-warning {
  background: #F17F42;  
}

.label-error {
  background: #da3c3c;  
}

code, pre {
  background-color: #f5f5f5;
}

pre code, img {
  border: 1px solid #DCDCDC;
}