}

html, body {

width: 100%;
height: 100%;

}

.clearfix {

&:before {
  content: " ";
  display: table;
}

&:after {
  content: " ";
  display: table;
  clear: both;
}

*zoom: 1;

}

body {

// background-color: $base-background-color;
background: rgb(221,211,211);
background: linear-gradient(160deg, rgba(221,211,211,1) 0%, rgba(224,224,255,1) 45%, rgba(169,218,228,1) 100%);
background-attachment: fixed;

}

footer, article {

margin: 4em auto;

}

hr {

border-top: none;
border-bottom: 2px solid lighten($light-gray-color, 7%);
width: 100%;
margin: $small-spacing 0;

}

article {

background-color: white;
box-shadow: 0px 0px 0px 20px white;

}

.container {

padding: $base-spacing;
margin-left: auto;
margin-right: auto;
max-width: 800px;
font-weight: normal;

}

.pull-left {

float: left;

}

.pull-right {

float: right;

}

.link {

color: $blue-color;
padding-bottom: .05em;
border-bottom: 2px solid transparent;

transition: border 300ms linear;
//@include transition(border 300ms linear);

&:hover,
&:focus,
&:active {
  border-bottom: 2px solid $blue-color;
}

}

header {

text-align: left;
padding: 0.6em;

}

header, footer {

text-transform: uppercase;

}

.site-title {

font-size: inherit;
padding: 0 2em;
background-color: $accent-color;
//background: $accent-color ;
min-height: 128px;
position: relative;

p {
  padding-bottom: 0.5em;
}

}

.site-title h1 {

display: inline-block;
font-size: 4.85em;
background-color: transparent;
line-height: 1em;
padding: 0.27em 0 0.1em;
padding-right: 70px;
margin: 0;
position: relative;
z-index: 1000;

}

.site-title h1:hover, nav a:hover {

transform: scale(1) rotate(0deg) translate(0px, 0px) skew(-15deg, 0deg);
font-style: normal;

}

.site-title .site-logo {

width: 120px;
top: 0px;
right: 0px;
position: absolute;
z-index: 500;

}

.site-title > span {

color: black;
display: inline-block;
padding-bottom: 1.5em;
text-transform: none;

} .site-title > span:empty {

display: none;

} nav ul {

margin-top: 0.6em;

} nav li {

display: inline-block;
background-color: $accent-color;
margin-bottom: 0.6em;

} nav a, nav input {

display: inline-block;
padding: 0.4em 0.6em;
background-color: transparent;

}

.intro {

position: relative;

.back {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 50%;
  filter: blur(4px);
  z-index: 10;
}

.author-name {
  display: inline-block;
  padding: 0 .2em;
  background: lighten($light-gray-color, 15%)
}

a {
  @extend .link;
}

.container {
  padding-bottom: 10px;
  position: relative;
  z-index: 100;
}

}

.logo {

float: left;
margin: 0 0 1em 0;
cursor: pointer;
letter-spacing: 0.8px;
font-size: 20px;
line-height: 28px;
font-weight: 300;

span {
  font-weight: 700;
}

}

// SVG Icons a svg, .icon svg {

height: 1em;
fill: $blue-color;

}

.icon {

vertical-align: middle;

}

.category-title {

margin: 1em 0 0.5em 0;

&:first-child {
  margin-top: 0;
}

}

.post-item {

margin-bottom: 0.2em;
display: block;

a {
  color: $action-color;
}

.article-title {
  display: inline-block;
  width: 85%;
  //border-bottom: 1px dashed lighten($light-gray-color, 10%);
}

.date-label {
  //border: 1px solid lighten($light-gray-color, 10%);
  padding: 0 0.2em;
  margin-left: 1em;
  margin-top: 2px;
  @extend .pull-right;
}

}

.post-meta {

color: $medium-gray-color;
text-transform: uppercase;
display: inline-block;
letter-spacing: 1px;
// Solution adapted from https://github.com/thoughtbot/bourbon/blob/v4-stable/app/assets/stylesheets/functions/_px-to-rem.scss
font-size: 14px / 16px * 1em;
margin-bottom: 1px;

}

.post-title {

margin-top: 0;
margin-bottom: 1em;
color: $dark-gray-color;

}

.post-link, .post a, .page a {

@extend .link;

}

.post {

@extend .clearfix;

}

.pagination {

padding: 2em;

li, a, span {
  display: inline-block;
  vertical-align: middle;
}

a, span {
  font-size: 12px / 16px * 1em;
  padding: .5em;
}

.prev, .next {
  @extend .link;
}

}

.share {

border-top: 0.2em dashed lighten($light-gray-color, 13%);
padding-top: $base-spacing * 0.3;
margin-top: $base-spacing * 1;

p {
  margin: 0 5em;
  font-size: 14px / 16px * 1em;
  color: $medium-gray-color;
}

}

.disqus {

background-color: lighten($light-gray-color, 16%);
padding: $base-spacing 0;

hr {
  margin: $base-spacing 0;
}

}

.site-footer {

@extend .clearfix;

background-color: $accent-color;

padding: $base-spacing 0;

a {
  @extend .link;
}

small {
  display: block;
  font-size: 12px / 16px * 1em;
  color: darken($medium-gray-color, 10%);
}

.block {
  display: block;
}

}

.video-container {

      position:relative;
      padding-bottom:56.25%;
      padding-top:30px;
      height:0;
      overflow:hidden;

iframe,
object,
embed {
  position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
}

}

.divider {

border-top: 0.2em solid lighten($light-gray-color, 13%);
margin-bottom: $base-spacing * 2;
margin-top: $base-spacing * 2;

}

.tags-list a{

margin-right:0.5em;
opacity:0.75;
white-space:nowrap;
text-decoration:none

} .tags-list a .tag-count{

background:#268bd2;
border-radius:1000px;
color:rgba(255,255,255,0.8);
font-size:0.75em;
margin-left:0.25em;
padding-left:0.6em;
padding-right:0.6em

} .tags-list a:hover{

opacity:1;

}

.post-tags {

padding-top: $base-spacing * 0.5;

} .post-tags a {

text-decoration: none;

}

@keyframes posts-for-tag-fade-in{

from{
    opacity:0
}
to{
    opacity:1
}

} .posts-for-tag:not(:target) {

display:none

} // .posts-for-tag{ // display:none // } .posts-for-tag:target {

animation:posts-for-tag-fade-in 0.6s ease-in-out;
display:block

}

// This applies from 0px to 600px @media (max-width: 600px) {

.date-label {
  float: left !important;
  border: 0 !important;
  margin-left: -2px !important;
  margin-top: 2px;
  margin-right: 1em;
}

.post-item {
  padding: 0 0.5em;
}

.article-title {
  border-bottom: none !important;
}

.post-link {
  &:hover,
  &:focus,
  &:active {
    border-bottom: 2px solid transparent;
    color: $blue-color;
  }
}

}