main.css

/---*/
# Front matter comment to ensure Jekyll properly reads file.*/
---*/
*/
/**/
  Site variables*/

$base-font-family: 'Bellefair', sans-serif;

$body-font-family: 'Cardo', sans-serif;

$code-font-family: "Source Code Pro", monospace;

$brand-color: black;

$container-width: 1100px;

$tablet-width: 600px;

$phone-width: 480px;

$header-thickness: 56px;

@import "_sass/-sections-dir";



body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, li {
    margin-bottom:0rem;
  margin: 0;
  padding: 0;
}

figure {
    margin-bottom:0rem;
    margin: 0;
    padding: 0;
}

p12 {
    margin-top:0rem;
}

/*
  Basic styling
*/

/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: .2rem;
  font-weight: bold;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

h1 {
  font-size: 2.4rem;
}
h1 span {
    font-size: 26px;
    
}
h2 {
  margin-top: 1.3rem;
  font-size: 1.45rem;
}
h3 {
  margin-top: 1.2rem;
  font-size: 1.35rem;
}

h4 {
  margin-top: 1.2rem;
  font-size: 1.2rem;
}

h4 span{
  font-size: 1.3rem;
}


h5, h6 {
  margin-top: 1rem;
  font-size: 1.24rem;
}

/* Body */
body {
/*  font-family: $base-font-family;*/
    font-family:'Bellefair', sans-serif;
}
body img {
    align: middle;
    margin: 5px auto auto auto;
    display: block;
    max-width: 600px;
}

p {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  line-height: 1.65;
  font-family: 'Cardo', sans-serif;
}

p0 {
  display: block;
  margin-top: .1em;
  margin-bottom: .1em;
  margin-left: 0;
  margin-right: 0;
  line-height: 0.3;
  font-family: 'Cardo', sans-serif;
}

p1 {
  display: block;
  margin-top: 0em;
  margin-bottom: .1em;
  margin-left: 0;
  margin-right: 0;
  line-height: 0.3;
  font-family: 'Cardo', sans-serif;
}


p2 {
  display: block;
  margin-top: 1em;
  margin-bottom: 2em;
  margin-left: 2.5em;
  margin-right: 0;
  line-height: 1.3;
  font-family: 'Cardo', sans-serif;
}

remark {
    display:block;
    margin-left: 2.5em;
}

/* Lists */
ul, ol, dl {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  margin-left: 1.5rem;
  font-family: 'Cardo', sans-serif;
}

ol li {
  margin-top: 0rem;
  margin-bottom: 0rem;
  margin-left: 1.5rem;
}

plist {
      display: block;
      margin-top: 0em;
      margin-bottom: 0em;
      line-height: 1.65;
      font-family: 'Cardo', sans-serif;
}

li {
  font-family: 'Cardo', sans-serif;
  margin-top : 0rem;
  margin-bottom: 0.2rem;
  margin-left:  1.5rem;
}

dt {
  font-weight: bold;
}
dd {
  margin-bottom: .5rem;
}

/*
  Links
*/

a {
  color: black;
  text-decoration: none;

}



/*
  Blockquote
*/

blockquote {
  margin: 10px 20px 10px;
  padding: 0px 15px;
  border-left: 0.25em solid #ccc;
  color: #999;
  line-height: 1.5;
}

/**
 * Tables
 */
 table {
     border-collapse: collapse;
     margin-bottom: 30px;
     width: 100%;
 }

 table, th, td {
     border: 1px solid black;
 }
 th, td {
     padding: 15px;
     text-align: left;
 }




code,
pre {
  font-family: "Source Code Pro", monospace;
}
code {
  padding: .25em .5em;
  font-size: .8rem;
  background-color: #f5f5f5;
  border-radius: 0px;
}
pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  margin-left: 0rem;
  margin-right: 4rem;
  padding: 0rem;
  font-size: .8rem;
  line-height: 1.4;
  white-space: pre;
  white-space: pre-wrap;
  word-break: break-all;
  word-wrap: break-word;
  background-color: #f5f5f5;
  border-radius:20px;
}
pre code {
  padding: 0;
  font-size: 100%;
  color: inherit;
  background-color: transparent;
}



code_remark,
pre {
  font-family: "Source Code Pro", monospace;
}
code_remark {
  padding: .05em .15em;
  font-size: .7rem;
  background-color: #f5f5f5;
  border-radius: 3px;
}
pre code_remark {
  padding: 0;
  font-size: 100%;
  color: inherit;
  background-color: transparent;
}

/* Pygments via Jekyll */
.highlight {
  margin-bottom: 1rem;
  border-radius: 4px;
}
.highlight pre {
  margin-bottom: 0;
}

/* Gist via GitHub Pages */
.gist .gist-file {
  font-family: "Source Code Pro", monospace; !important;
}
.gist .markdown-body {
  padding: 15px;
}
.gist pre {
  padding: 0;
  background-color: transparent;
}
.gist .gist-file .gist-data {
  font-size: .8rem !important;
  line-height: 1.4;
}
.gist code {
  padding: 0;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
}


.container {
  width: 1300px;
  margin-left: auto;
  margin-right: auto;
}
.container a {
  // text-decoration: underline;
  transition-duration: 0.1s;
  border-bottom: 4px solid #9270B1;
}


.container a:hover {
  // text-decoration: underline;
  transition-duration:0.1s;
  border-bottom: 0px solid #9270B1;
}


.posts-wrapper {
  padding-top:  56px+10px;
  margin: auto;
  display: block;
  width: 1300px - 20px;
}
.posts-wrapper h1 {
  margin: 20px 0px 5px;
}

/*@media (max-width: 1300px) {*/
/*  .container {*/
/*    width: 95vw;*/
/*    margin-left: auto;*/
/*    margin-right: auto;*/
/*  }*/
/*  .posts-wrapper {*/
/*    padding-top:  56px+10px;*/
/*    margin: auto;*/
/*    display: block;*/
/*    width: 95vw;*/
/*  }*/
/*}*/



.footer {
  background: white;
  color: black;
  text-align: center;
  min-height: 56px;
  line-height: 45px;
  width: 1300px;
}
.footer a {
  color: black;
  padding: 0px 10px 0px;
  text-decoration: none;
  border-bottom: 0px;
}
@media (max-width: 1300px) {
  .footer {
    background: white;
    color: black;
    text-align: center;
    min-height: 56px;
    line-height: 45px;
    width: 95vw;
  }
}



.site-header {
  min-height: 56px;
  width: 1300px;
  position: fixed;
  background-color: white;
  box-shadow: 0 5px 6px -6px #bbb;
  z-index: 100;
}
@media (max-width: 1300px) {
  .site-header {
      min-height: 56px;
      width: 95vw;
      position: fixed;
      background-color: white;
      box-shadow: 0 5px 6px -6px #bbb;
      z-index: 100;
  }
}
.site-header a {
  color: black;
  text-decoration: none;
  border-bottom: 0px solid;
  transition-duration: 0.2s;

}
.site-header a:hover{
  transition-duration: 0.2s;
   border-bottom: 1px solid #9270B1;
}
.site-title {
  font-size: 28px;
  font-weight: 400;
  line-height: 56px;
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 10px;
  float: left;
}
.menu-list {
  font-family:'Cardo', sans-serif;
  font-weight: 600;
  // font-size: 24px;
  line-height:  56px;
  float: right;
}
.menu-link {
  padding: 5px 5px;
}


/*
  Responsiveness with a dropdown menu
*/

figure:hover {
    cursor: pointer;
}


/*
  BUTTONS FOR CODE DROPDOWNS
*/
input[type=button], input[type=submit], input[type=reset] {
  background-color: '#fbfbfb';
  border: none;
  color: black;
  padding: 6px 6px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  border-radius:5px;
  font-family: "Source Code Pro", monospace; !important;
}

span.link_emoji{
    font-size:11pt;
    line-height: 1.0;
}

/*
  ZOOM ON CLICK FOR IMAGES
*/
input[type=checkbox] {
  display: none;
/*  margin-left:0 auto;*/
/*  margin-right:0 auto;*/
  width:1300px;
  text-align:center;
}

.container-fluid img {

    transition: transform 0.75s ease;
    cursor: zoom-in;
}

input[type=checkbox]:checked ~ label > img {
  transform: scale(1.3);
  cursor: zoom-out;
}









@media (min-width: 1300px) {
  .dropbtn {
    display: none;
  }
  .dropdown-content {
    display: none;
  }
}
@media (max-width: 1300px) {
  .menu-list {
    display: none;
  }
  .site-title {
    padding-right: 0.25rem;
  }
  .dropbtn {
      background-color: white;
      color: black;
      padding: 16px;
      margin-top: 4px;
      font-size: 16px;
      border: none;
      cursor: pointer;
  }
  .dropdown {
      position: relative;
      display: inline-block;
  }
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
  }
  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
  }
  .dropdown-content a:hover {
    background-color: #f1f1f1
  }
  .dropdown:hover .dropdown-content {
      display: block;
  }
  .dropdown:hover .dropbtn {
      background-color: #f1f1f1;
  }
}


.featured-posts {
  height: 200px;
  margin: 5px 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  opacity: 0.5;
  filter: alpha(opacity=0.5);
  border-radius: 20px;
  transition-duration: 1s;

}

.featured-posts:hover {
  height: 200px;
  margin: 5px 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  opacity: 1;
  filter: alpha(opacity=1);
  transition-duration: 1s;
}
.featured-posts h2 {
  opacity: 1;
  bottom: 0;
  margin: 0;
  padding: 10px;
  position: absolute;
}

.featured-posts h2 span {
   display: inline-block;
  //  color: white;

/*   font: $base-font-family;*/
    font:'Bellefair', sans-serif;
   font-size: 1.5em;
   color: white;
   font-weight: 400;
   letter-spacing: -1px;
  //  background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.4);
   padding: 10px;
   opacity: 1;

}

// // .featured-posts h2 span:hover {
// //   background=
// }
.featured-posts span a {
  color: white;
}
.featured-posts h1 {
  margin: 10px;
  opacity: 1;
}

/*
  Pagination
*/

.pagination {
  text-align: center;
}
.pagination a {
  text-decoration: none;
}
.pagination-button {
  color: #999;
  border: 1px solid #e0e0e0;
  padding: 15px 45px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}
.pagination-active {
  color: black;
}
.pagination-active:hover {
  background-color: #e0e0e0;
}


.page-title {
  padding: 0px 10px 10px;
}
.misc-content {
  max-width: 600px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

.baye {
    margin-bottom: 0px;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}










/*
EYESEEU
 */









































.active, .accordion:hover {
  background-color: #ccc;
}

.desc {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}
.page-content {
  width: 800px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}
.post-date {
  display: block;
  margin-bottom: 1rem;
  color: #9a9a9a;
  font-size:0.8rem;
}
.featured-image img {
  align: middle;
  margin: 5px auto 25px;
  display: block;
  max-width: 600px;
}
@media (max-width: 1300px) {
  .page-content {
    width: 60vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .featured-image img {
    align: middle;
    margin: 5px auto 25px;
    display: block;
    max-width: 60vw;
  }
}
@media (max-width: 600px) {
  .page-content {
    width: 95vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .featured-image img {
    align: middle;
    margin: 5px auto 25px;
    display: block;
    max-width: 95vw;
  }
}
.post-share {
  padding-bottom: 1rem;
}
.sharing-icons a {
  padding-right: 10px;
  border-bottom: 0px;
}


/*
  Related Posts
*/

.related {
  padding-bottom: 1rem;
}
.related ul, ol, dl {
  margin: 0px;
}
.related-posts {
  padding: 10px 0px 10px;
  list-style: none;
  display: inline-block;
}
.related-thumbnail {
  position: relative;
  width: 600px;
  height: 200px;
  overflow: hidden;
}
.related img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
  width: 600px;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.related-title {
  float: right;
  padding-bottom: .5rem;
/*  font-family: $base-font-family;*/
   font-family:'Bellefair', sans-serif;
}
@media (max-width: 1300px) {
  .related-thumbnail{
    width: 60vw;
  }
}
@media (max-width: 600px) {
  .related-thumbnail{
    width: 95vw;
  }
}



$icon-transition-time: 1.0s;
$envelope-color: #f39c12;
$twitter-color: #00aced;
$instagram-color: #375989;
$github-color: #343434;
$linkedin-color: #0073a4;
$facebook-color: #3d5b99;
$google-color: #e64a41;
$pinterest-color: #bd081c;
$medium-color: #00AB6C;
$codepen-color: black;
$rss-color: #ff6600;

@mixin social-media-icon($color, $transition){
  -webkit-transition: $transition;
  -o-transition: $transition;
  -ms-transition: $transition;
  -moz-transition: $transition;
  transition: $transition;
  &:hover{
    color: $color;
  }
}

.fa-envelope {
  padding: 5px;
  @include social-media-icon($envelope-color, $icon-transition-time);
}

.fa-twitter {
  padding: 5px;
  @include social-media-icon($twitter-color, $icon-transition-time);
}

.fa-instagram {
  padding: 5px;
  @include social-media-icon($instagram-color, $icon-transition-time);
}

.fa-github {
  padding: 5px;
  @include social-media-icon($github-color, $icon-transition-time);
}

.fa-linkedin {
  padding: 5px;
  @include social-media-icon($linkedin-color, $icon-transition-time);
}

.fa-facebook {
  padding: 5px;
  @include social-media-icon($facebook-color, $icon-transition-time);
}

.fa-google-plus {
  padding: 5px;
  @include social-media-icon($google-color, $icon-transition-time);
}

.fa-pinterest {
  padding: 5px;
  @include social-media-icon($pinterest-color, $icon-transition-time);
}

.fa-medium {
  padding: 5px;
  @include social-media-icon($medium-color, $icon-transition-time);
}

.fa-codepen {
  padding: 5px;
  @include social-media-icon($codepen-color, $icon-transition-time);
}

.fa-rss-square {
  padding: 5px;
  @include social-media-icon($rss-color, $icon-transition-time);
}