@supports (font-variation-settings: normal) {
  @font-face {
    font-family: "Open Sans";
    src: url(/assets/resources/open-sans/open-sans-variable-font-wdth-wght.ttf) format('truetype');
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Open Sans";
    src: url(/assets/resources/open-sans/open-sans-italic-variable-font-wdth-wght.ttf) format('truetype');
    font-style: italic;
    font-display: swap;
  }
}
@supports not (font-variation-settings: normal) {
  @font-face {
    font-family: "Open Sans";
    src: url(/assets/resources/open-sans/static/OpenSans/OpenSans-Light.ttf) format('truetype');
    font-style: normal;
    font-display: swap;
    font-weight: 300;
  }
  @font-face {
    font-family: "Open Sans";
    src: url(/assets/resources/open-sans/static/OpenSans/OpenSans-Regular.ttf) format('truetype');
    font-style: normal;
    font-display: swap;
    font-weight: 400;
  }
  @font-face {
    font-family: "Open Sans";
    src: url(/assets/resources/open-sans/static/OpenSans/OpenSans-Medium.ttf) format('truetype');
    font-style: normal;
    font-display: swap;
    font-weight: 500;
  }
  @font-face {
    font-family: "Open Sans";
    src: url(/assets/resources/open-sans/static/OpenSans/OpenSans-Bold.ttf) format('truetype');
    font-style: normal;
    font-display: swap;
    font-weight: 700;
  }
  @font-face {
    font-family: "Open Sans";
    src: url(/assets/resources/open-sans/static/OpenSans/OpenSans-Italic.ttf) format('truetype');
    font-style: italic;
    font-display: swap;
  }
}

@font-face {
  font-family: "Open Sans-fallback";
  size-adjust: 105.42999999999994%;
  ascent-override: 105%;
  src: local("Arial");
}

body {
  color: #2c3e50;
  font-family: 'Open Sans', 'Open Sans-fallback', sans-serif;
  font-size: 18px;
  line-height: 1.7;
}

a {
  color: #c85014;
  text-decoration: underline;
  word-break: break-word;
  text-underline-position: under;
  text-underline-offset: 1px;
  text-decoration-thickness: 1px;
}
a:hover,a:focus {
  text-decoration-thickness: 2px;
  text-shadow: 0px 0px 1px;
}

/* skip link */
.visible-hidden {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.visible-hidden:focus {
  clip: auto;
  height: auto;
  overflow: auto;
  position: absolute;
  width: auto;
}

/* title for screen readers only */
.sr-only {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  margin: -1px !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

a.nav-link {
  padding-bottom: 5px;
  padding-top: 7px;
  color: #aaa;
}
a.nav-link i{
  font-size: 16px;
}
a.nav-link:hover { color: #777; }

#contact-list {
  font-size: 14px;
}
#contact-list a {
  color: #fff;
}
.icon {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
}
#contact-list a .icon {
  -o-transition:fill .2s ease-out;
  -ms-transition:fill .2s ease-out;
  -moz-transition:fill .2s ease-out;
  -webkit-transition:fill .2s ease-out;
  transition:fill .2s ease-out;
}
#contact-list a:hover .icon-github-alt,
#contact-list a:focus .icon-github-alt {
  fill: #111;
}
#contact-list a:hover .icon-twitter,
#contact-list a:focus .icon-twitter {
  fill: #00ACEE;
}
#contact-list a:hover .icon-linkedin-in,
#contact-list a:focus .icon-linkedin-in {
  fill: #1D87BD;
}
#contact-list a:hover .icon-envelope,
#contact-list a:focus .icon-envelope {
  fill: #E93E30;
}
#contact-list a:hover .icon-rss,
#contact-list a:focus .icon-rss {
  fill: #e74c3c;
}

#contact-list-secondary {
  padding-bottom: 10px;
}

.page-header {
  color: #e74c3c;
  text-shadow: 1px 1px 1px rgba(150, 150, 150, 1);
}

article{
  margin-bottom: 40px;
  padding: 0 5px 0;
}

.article_body{
  margin-top: 20px;
  margin-bottom: 20px;
}

/* code sections */
pre {
  font-size: 14px;
}

.post-date {
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 3px;
}


article.home div a, article.home pre a,
article.home div a:hover, article.home pre a:hover {
  color: #2c3e50;
}
article img { max-width: 100%; }

h1,h2,h3,h4,h5,h6 { font-family: 'Open Sans', sans-serif; }
h1, h2, h3, h4 {
  color: #e75e3c;
}

article:not(.home) h1,
article:not(.home) h2,
article:not(.home) h3 {
  margin: 20px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
article:not(.home) h4 {
  margin: 0 0 3px 0;
}

article.home h2 {
  font-weight: 500;
  margin-bottom: 15px;
  line-height: 1.5;
}
article.home h1 a,
article.home h2 a {
  color: #e75e3c;
}
article.home h1 a:hover,
article.home h2 a:hover {
  color: #e75e3c;
}

/* Pagination section */
.page_number {
  font-size: 14px;
  color: #6d6d6d;
}

footer {
  padding-top: 15px;
  font-size: small;
  font-family: 'Open Sans';
}

@media not screen, not (min-width: 768px) {
  .sidebar {
    padding: 10px;
    margin-bottom: 20px;
  }
  .sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sidebar-logoAndTitle {
    display: flex;
    align-items: center;
  }
  .sidebar-header .title{
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0 0 0 10px;
    font-size: 16px;
  }
  .sidebar-header .title a{
    text-decoration: none;
  }

  .author {
    display: none;
  }
  .author-link-mobile {
    line-height: 1;
    margin-right: 5px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
    text-decoration: none;
  }
  .author-link-mobile:focus,
  .author-link-mobile:hover {
    color: #111;
    text-decoration: none;
  }

  #site-short-description, #contact-list, .page-header{ 
    display: none;
  }
}

@media only screen and (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0px;
    padding-top: 10%;
    background-color: #2c3e50;
    color: #fff;
    min-height: 100vh;
  }
  .sidebar-header {
    text-align: center;
    margin-bottom: 10px;
  }
  .sidebar-header .title{
    letter-spacing: 3px;
    text-transform: uppercase;
  }
  .sidebar-header .title a{
    text-decoration: none;
    color: #fff;
  }
  .sidebar-header .logo {
    width: auto;
    height: 75px;
  }

  .author {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
    margin: 30px 0 20px 0;
    text-align: center;
  }
  .author-link-mobile {
    display: none;
  }

  .page-header{
    margin-right: 70px;
    padding-left: 15px;
  }
  article {
    padding: 0 5% 0;
  }
}

/* Tags listing page */
/* nav-vertical-tabs component */
.nav-tabs-vertical {
  border-right: 1px solid #ddd;
}
.nav-tabs-vertical li {
  margin-right: -1px;
}
.nav-tabs-vertical>li.active>a, .nav-tabs-vertical>li.active>a:hover, .nav-tabs-vertical>li.active>a:focus {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-right-color: transparent;
}
.nav-tabs-vertical>li>a {
  line-height: 1.428571429;
  border: 1px solid transparent;
  border-radius: 4px 0 0 4px;
}

.badge { background: #e74c3c; }
.cat-tag-menu .badge { margin-top: 5px; }

/* Utilities for blog posts */
.img-center {
  margin: 20px auto;
  display: block;
}