$background : “../assets/DSCN136150-QHD.JPG”;

body::before {

background-size: cover;
background-attachment: fixed;
content: '';
will-change: transform;
z-index: -1;
left: 0;
right: 0;
bottom: 0;
top: 0;
position: fixed;

}

@media (max-width: 512px) and (-webkit-min-device-pixel-ratio: 1.5), (max-width: 512px) and (min-resolution: 1.5dppx), (max-width: 1024px) and (-webkit-max-device-pixel-ratio: 1.5), (max-width: 1024px) and (max-resolution: 1.5dppx) {

body::before {
  background-image: url($background);
  background-size: cover/center;
}
#github {
  background-image: "GitHub-Mark-32px.png";
}

}

@media (min-width: 513px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 513px) and (max-width: 1024px) and (min-resolution: 1.5dppx), (min-width: 1025px) and (max-width: 2048px) and (-webkit-max-device-pixel-ratio: 1.5), (min-width: 1025px) and (max-width: 2048px) and (max-resolution: 1.5dppx) {

body::before {
  background-image: url($background);
  background-size: cover/center;
}
#github {
  background-image: "../assets/GitHub-Mark-32px.png";
}

}

@media (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 1025px) and (min-resolution: 1.5dppx), (min-width: 2049px) and (-webkit-max-device-pixel-ratio: 1.5), (min-width: 2049px) and (max-resolution: 1.5dppx) {

body::before {
  background-image: url($background);
  background-size: cover/center;
}
#github {
  background-image: "../assets/GitHub-Mark-32px.png";
}

}

.title-no-picture {

background-color: #263238;

}

h3.quote a {

color: white;
text-decoration: none;

}

body .blog {

font-family: 'Roboto', 'Helvetica', sans-serif;

}

.page-content {

max-width: 900px;
width: 100%;
margin: auto;

}

.blog {

.mdl-card h3 {
  margin: 0;
}
&.mdl-layout .mdl-layout__content {
  padding-top: 200px;
}
.mdl-card {
  min-height: 360px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.mdl-card__media, .mdl-card__title {
  /* box-sizing: border-box; */
  background-size: cover;
  padding: 24px;
  display: -webkit-flex;
  display: -ms-flexbox;
  /* display: flex; */
  -webkit-flex-grow: 2;
  -ms-flex-positive: 2;
  /* flex-grow: 1; */
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  /* align-items: flex-end; */
  cursor: pointer;
}
.card-meta {
  > * {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    height: auto;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  .mdl-card__supporting-text {
    min-height: 64px;
  }
}
&:not(.blog--blogpost) .mdl-card__supporting-text ~ .mdl-card__supporting-text {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

}

.blog_posts {

max-width: 900px;
padding: 0;
display: flex;
margin: 0 auto;
flex-shrink: 0;

}

.blog-post {

&:hover, &:focus {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

}

.mdl-mini-footer__link-list {

max-height: 16px;

}

.disclaimer {

font-size: 90%;

}

.heart {

color: red;

}

.mdl-mini-footer .me {

font-weight: 600;

}

.blog .mdl-mini-footer {

margin-top: 80px;
height: 120px;
padding: 40px;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-color: white;
box-sizing: border-box;

}

pre.highlight {

background: #282c34;
color: #abb2bf;

}

.blog {

.blog__posts > .nav {
  margin: 12px 15px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  color: white;
  font-weight: 500;
  > .nav__button {
    color: white;
    text-decoration: none;
  }
}
.section-spacer {
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.meta {
  box-sizing: border-box;
  padding: 16px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  height: auto;
  > * {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

}

.blog–blogpost .meta > * {

-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;

}

.blog .mdl-card__supporting-text.meta {

width: 100%;
padding: 16px;
min-height: 64px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;

}

.blog–post .mdl-card__supporting-text p {

max-width: 512px;
margin: 16px auto;
font-size: 16px;
line-height: 28px;

}

.blog .blog__posts {

max-width: 900px;
padding: 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
margin: 0 auto;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;

}

.blog–post .back {

position: absolute;
top: 16px;
left: 16px;
color: white;
z-index: 9999;

}

.highlight .lineno {

word-break: keep-all;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;

}

.gutter.gl {

text-align: right;
padding-right: 15px;
padding-left: 5px;
border-right: 1px solid #aaa;

}

.highlight {

.code {
  padding-left: 10px;
}
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);

}

.blog–post .mdl-card__supporting-text {

margin: auto;

}

.blog_posts .mdl-card__media {

height: 170px;
a{
  text-decoration:none;
}

}

.layout-transparent {

.mdl-layout__header, .mdl-layout__drawer-button {
  /* This background is dark, so we set text to white. Use 87% black instead if
     your background is light. */
  color: white;
}

}

.mdl-layout__header-row .mdl-navigation__link {

/* This background is dark, so we set text to white. Use 87% black instead if
   your background is light. */
color: white;

}

.blog–post img {

max-width: 100%;

}