@import url('https://fonts.googleapis.com/css?family=Merriweather|Nunito:800');


@import url('https://use.fontawesome.com/releases/v5.5.0/css/all.css');


body {
  transition: transform .25s ease-out;
  margin : 0 auto;
  padding: 0 1rem;
}
a{
  text-decoration: none;
  color:  inherit !important;
  border-bottom: 3px solid #ffd900;
}

p{
  margin-bottom: 1rem;
}

.inline_code{
  color: red;
  border: 1px solid rgb(221, 220, 220);
  border-radius: 1px;
  background-color: blanchedalmond;
}

pre {
  background-color: #23241f;
  line-height: 1.7 !important;
  padding: 1rem;
  overflow-x: auto;
  margin-bottom: 1rem;
}
a:focus{
 
  background-color: #ffd900 !important;
  color: black; }

  .footer__inner__links:focus{
    background-color: transparent !important;
    color: black; }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      position: relative;
      }
      *:focus, *:active {
        outline: none; }

  ::selection{
    background-color: #ffd900
  }

.fab{
  font-size: calc(2.5rem + 2.5vw);
  color: #101F34;
}

.imp_note {
  display: inline-block;
  color: #06a206;
  border: 1px solid #508205;
  background-color: #c7ffcf;
  border-radius: 10px;
  padding: 0.5rem;
  margin: 1rem 0;
}

.footer__social__inner a:hover .fab, .footer__social__inner a:focus .fab {
  opacity: 0.5;
  transition: opacity 0.1s ease-out;
}

.not_found{
  text-align: center;
}


@media (min-width: 52rem) {
  .main-content{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }

  .main-content .list{
    grid-column: 2/12;
  }

  .main-content .post{
    grid-column: 2/12;
  }
}
img {
  max-width: 100%; }

table {
  max-width: 100%; }

table.main {
  width: 100%;
  padding: 0;
  font-size: .9em;
  color: #111; }

table.main td {
  padding: .75em 1em; }

table.main td:first-of-type, table.main td:first-of-type a {
  font-weight: bold; }

table.main tr:nth-of-type(odd) {
  background-color: #fff; }

table.main tr:nth-of-type(even) {
  background-color: #eee; }

table.main tr:first-of-type {
  background-color: #333;
  color: #fff; }

table.minimal {
  display: block;
  width: 100%;
  border-collapse: collapse; }

table.minimal td {
  padding: .5em .75em;
  border: 1px solid #ddd; }

table.minimal td:first-of-type {
  font-weight: bold; }

dd, ul, ol {
  padding: 0;
  list-style-type: none; }

.post__content ul, ol{
  margin-bottom: 1rem;
}

body {
  font-family: 'Merriweather', serif;
  font-weight: 300;
  line-height: 2;
  letter-spacing: 0.5px; 
  font-size: calc(0.9rem + 0.25vw); }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
  margin: 0.5em 0;
}

h1{
  font-size: calc(1rem + 2vw);
}

h2{
  font-size: calc(1rem + 1.4vw);
}

h3{
  font-size: calc(1rem + 0.8vw);
}



.post__title, .list__title{
  font-size: calc(1rem + 3vw);
  
}

.list__meta{
  font-family: 'Merriweather' !important;
  color: #777;
  font-weight: 400;
  font-size: 0.75rem;
}

.list__item-inner{
  padding: 1rem 0;
    margin: 0 0 2rem;
  border-bottom: 1px solid #ddd;
}
.list__link{
  display: block;
  text-decoration: none;
  color: inherit;
  border : none;
}

button,
input,
textarea,
select {
  font-family: 'Nunito', sans-serif;
  font-weight: inherit; }

strong,
b {
  font-weight: bold; }

a {
  color: #0072FF; }

header {
  padding-top: 1rem; 
  margin-bottom: 7vw;
  }
  header .logo{
    border-bottom: none;
  }
  @media (min-width: 63rem) {
    header {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
    }

    header .logo{
      grid-column: 2;
    }

    header .header__nav .nav-group {
      display: flex;
      align-items: flex-end;
      align-content: space-between;
      float: right; 
    }

    header .header__nav {
      grid-column: 3/12;
      align-self: center;
    }
    
    .menu-trigger{
      display: none;
    }
  }
  header .logo {
    display: block;
    margin: 0; }
    header .logo #logo_img {
      max-width: 80px; }
 
    header .header__nav .nav-group {
      margin: 0;
      padding: 0;
    }

    .nav-link a::after {
      content: ".";
      color: #cb5d9d;
  }
      header .header__nav .nav-group .nav-link {
        transition: background-color 0.1s ease-in;
        }
        header .header__nav .nav-group .nav-link a {
          transition: color 0.1s ease-in;
          text-decoration: none;
          display: block;
          padding: 0.5rem 1rem;
          text-transform: capitalize;
          border-bottom: none;
          font-size: 1.25rem;
          font-weight: 500;
          color: inherit;
          font-family: 'Nunito', sans-serif;
       }
    /*  header .header__nav .nav-group .nav-link:hover {
        background-color: #101F34; }
        header .header__nav .nav-group .nav-link:hover a {
          color: aliceblue; }*/

  .menu-trigger {
  position: absolute;
  width: 60px;
  height: 60px;
  right: 1em;
  background: none;
  outline: none;
  font-size: .85em;
  cursor: pointer;
  line-height: 1.3;
  border-radius: 5px;
  border: none;
  font-family: 'Nunito', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.5px; }

  /* @media all and (min-width: 52rem) and (max-width : 63rem) {
    .menu-trigger {
      top: 0px;
     }
  } */

@media all and (max-width: 63rem) {
  .menu-trigger {
    display: block;
    position: absolute;
    z-index: 10;
    top: -70px;
    right: 1em;
    padding: .5em 1em; }

    body.open {
      transform: translateY(484px);
  }
  
  .header__nav .nav-group {
      position: fixed;
      margin: 0;
      z-index: 9;
      padding: 2em !important;
      top: -484px;
      left: 0;
      width: 100%;
      background: linear-gradient(#471a64db, #6d3a8ded);
      color: #fff;
   }
  }

.enhanced .menu-trigger:hover {
  border: none;
  background: #000;
  color: #fff; }

.menu-trigger__icon {
  font-size: 1.2em;
  display: inline-block;
  font-weight: bold;
  margin-left: .35em;
  position: relative; }

.footer {
  padding: 1rem;
  margin-top: 3rem;
  background-color: #fafafa; }
  .footer__container {
    max-width: 100rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
 }

 .footer__social a{
   border-bottom: none;
 }

 .footer__copyright a{
  border-bottom: none;
}
 
 .footer-links-list{
  display: flex;
  flex-direction: column;
}

.footer-links-list li{
  display: inline-block;
  padding: 1rem;
}

.footer-links-list li a{
  text-decoration: none;
  transition: color 0.1s ease-in;
}

.footer-links li:hover {
  color: #101F34;
  background-color: #fff;
 }

    @media (min-width: 52rem) {
      .footer{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
      }
      .footer__container {
        grid-column: 2/12;
        display : grid;

        grid-template-areas: "footer_pic desc"
                              "footer_pic availability"
                              "social social"
                              "contact contact"
      }
      .footer__aboutinfo{
        grid-area: footer_pic;
        margin-right: 3rem;
      }

      .footer__aboutme{
        grid-area: desc;
      }

      .availability{
        grid-area: availability;
      }

      .footer-links{
        grid-area: links;
      }

      .footer__social{
        grid-area: social;
      }

      .footer__copyright{
        grid-area: contact;
      }



        .footer-links-list{
          flex-direction: row;
          justify-content: space-between;
        }
        
        .footer-links h2{
        text-align: center;
      }
     }
  .footer__menu {
    clear: both;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 40px;
    padding-bottom: 24px; }
    @media screen and (min-width: 40rem) {
      .footer__menu {
        padding-bottom: 80px;
        padding-top: 80px; } }

       .footer-links a {
        margin-top: 0.5rem;
        color:inherit; }
  .footer__social {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .footer__social__inner{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; 
    }

    .footer__social__inner a {
      margin: 0.5rem;
      align-self: center; }
  .footer__copyright {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #616d7c;
    padding-top: 24px;
    padding-bottom: 24px; }
    @media screen and (min-width: 40rem) {
      .footer__copyright {
        padding-top: 40px;
        padding-bottom: 40px; } }
    .footer__copyright > * {
      line-height: 1.5rem; }
      @media (max-width: 40rem) {
        .footer__copyright > * {
          width: 100%;
          text-align: center; } }
    .footer__copyright a {
      font-size: 13px;
      color: #616d7c; }
    .footer__copyright .copy,
    .footer__copyright .contact,
    .footer__copyright .languages {
      width: 100%;
      text-align: center; }
      @media screen and (min-width: 40rem) {
        .footer__copyright .copy,
        .footer__copyright .contact,
        .footer__copyright .languages {
          width: 33.3333%; } }
    @media screen and (min-width: 40rem) {
      .footer__copyright .copy {
        text-align: left; } }

.footer__aboutme {
  overflow: auto; }

.footer_logo {
  margin-bottom: 1rem;
  max-width: 100%;
 
}

@media(min-width: 52rem){
  .footer_logo{
    max-height: 500px;
  }
}

.footer__aboutme + p {
  float: right; }

.tags__title{
  margin-top: 3rem;
}

.meta__link{
  border-bottom: 2px dotted #615e5e;
  margin-right: 0.5rem;
  font-family: 'Merriweather' !important;
  color: #777;
}

.meta__link{
  border-bottom: 2px dotted #615e5e;
  margin-right: 0.5rem;
  font-family: 'Merriweather' !important;
  color: #615e5e !important;
}

.tags_list_li{
  display: inline-block;
  padding: 1rem;
  color: #615e5e;
}
.tags_list_li a{
  text-decoration: none;
  color: inherit;
}
.pagination {
  max-width: 70rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 60px; }
  .pagination li {
    font-size: 14px;
    color:inherit;
    text-align: center;
    margin-right: 16px;
    margin-bottom: 0.75rem;
  }
  .pagination li.active a, .pagination li.disabled a {
    color: #92A4BA;
    border-color: #92A4BA; }
  .pagination li.disabled a {
    pointer-events: none;
    cursor: default; }
  .pagination a {
    text-decoration: none;
    color: inherit;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: solid 1px;
    display: block;
    line-height: 28px; }


 @media (min-width: 52rem) {
      .contactme{
        display: grid;
        grid-template-columns: repeat(12, 1fr);
      }
    
      .contactme_devenquiry{
        grid-column: 1/8;
        grid-row:  1;
      }
    
      .contactme_consulting{
        grid-column: 1/8;
        grid-row:  2;
      }

      .contactme_just{
        grid-column: 1/8;
        grid-row:  3;
      }

      .contactme_note{
        grid-column: 10/13;
        grid-row: 1;
      }
    }

    .contactme_note{
      margin-top: 1.5em;
    }

    .size-2x{
      font-size: calc(1em + .5vw);
      margin-bottom: 1.5em;
      font-weight: 300;
    }

@media print{

  @page {
    margin: 50pt 25pt; /*50 is good*/
  }
  
  @page :first{
    margin-top: 100pt; /*100 is good*/
  }

  a[href^="http"]:not([href*="example.com"]):after {
    content: " (" attr(href) ")";
  }

  .post__content:after{
    content: "This article may not be the latest one. To get latest updates, contact me  or any other information please visit my website www.karankhanchandani.com"
  }

  header, .footer, .tags{
    display: none;
  }

  
  .highlight pre{
    color:#f8f8f2;
    background-color:#272822;
    -moz-tab-size:4;
    -o-tab-size:4;
    tab-size:4;
  }

  body {-webkit-print-color-adjust: exact;}

  pre {
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  
  p, img, table {
    page-break-inside: avoid;
    orphans: 2;
    widows: 2;
  }

  h1, h2, h3, h4, h5, h6 ,a, blockquote{
    page-break-inside: avoid;
  }

  .highlight pre{
    overflow: unset;
  }
}