/* COLOURS */
html, body {
  border-top: 3px solid #0D76EC;
}
div.footer {
  border-bottom: 5px solid #0D76EC;
}
.container a {
  color: #0D76EC;
}
.container a:hover {
  color: #12437A;
}
.container .label-success {
  background-color: rgba(92, 139, 184, 0.6);
  color: #FFF;
}
.container a.label-success:hover,
.container a.label-success.active {
  background-color: rgba(92, 139, 184, 0.9);
  color: #FFF;
}
.container a.label-rss {
  background-color: rgba(242, 101, 34, 0.8);
  color: #FFF;
}
.container a.label-rss:hover {
  background-color: rgba(242, 101, 34, 1);
}
.container h1 {
  font-weight: bold;
  color: #0D76EC;
}
.container h4 a {
  color: #0D76EC;
}
.container h4 a:hover {
  color: #0060CC;
}

/* Avoid scrollbar jumps in centering 
 * see https://css-tricks.com/eliminate-jumps-in-horizontal-centering-by-forcing-a-scroll-bar/
 */
div#wrap { 
  margin-left: calc(100vw - 100%);
}

div.avatar img {
  max-height: 190px;
}
.panel {
  box-shadow: none;
  -webkit-box-shadow: none;
}

/* Site specific settings */
section#about p {
  font-size: 18px;
  margin-bottom: 20px;
}

div.contact p {
  line-height: 1.5em;
  margin-bottom: 30px;
}

/* transparency of tags */


/* Scale social icons with hovering */
.social-links {
  display: flex;
  justify-content: center;
}
.social-links li a {
  font-size: 26px;
}
.social-links li a i {
  transform: scale(0.8);
  transition: transform .3s;
}
.social-links li a:hover i {
  transform: scale(1);
}

/* BLOG */
.metadata-page {
  font-size: 18px;
  text-align: left;
  margin: 3em 0 2em 0;
}
.metadata-page .row {
  padding-bottom: 0;
}
.blog-summary {
  padding-bottom: 1em;
}
.metadata-summary {
  font-size: 0.8em;
  opacity: 0.7;
}
.blogpost .header-image img {
  width: 100%;
  height: auto;
  padding-bottom: 2px;
}
.blogpost .header-image p {
  opacity: 0.7;
  font-size: 0.8em;
  text-align: center;
  line-height: 1em;
  margin-bottom: 1.5em;
}

a.learn-more {
  font-size: 1.8em;
  line-height: 0.8em;
  font-weight: 700;
  font-variant: small-caps;
  text-transform: lowercase;
  padding: 0 1em 0 .3em;
  position: absolute;
}
a.learn-more::after {
  position: absolute;
  right: 0.3em;
  content: " » ";
  opacity: .8;
  transition: all 150ms linear;
}
a.learn-more:hover::after {
  right: 0;
  opacity: 1;
}

/* HELPER CLASSES */
.vertical-align {
  display: flex;
  align-items: center;
}

/* CODE / SYNTAX */
pre code {
  white-space:pre;
}