/*
 * Global resets
 */
html {
  font-family: sans-serif;
}
@media (min-width: 48em) {
  html {
    font-size: 16px;
  }
}
/*@media (min-width: 58em) {
  html {
    font-size: 20px;
  }
}*/

/* No `:visited` state is required by default (browsers will use `a`) */
a {
  color: #268bd2;
  text-decoration: none;
}
a strong {
  color: inherit;
}
/* `:focus` is linked to `:hover` for basic accessibility */
a:hover,
a:focus {
  text-decoration: underline;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: .5rem;
  font-weight: bold;
  line-height: 1.25;
  color: #313131;
  text-rendering: optimizeLegibility;
}
h1 {
  /*font-size: 2rem;*/
}
h2 {
  margin-top: 1rem;
  /*font-size: 1.5rem;*/
}
h3 {
  margin-top: 1.5rem;
  /*font-size: 1.25rem;*/
}
h4, h5, h6 {
  margin-top: 1rem;
  font-size: 1rem;
}

/* Body text */
p {
  margin-top: 0;
  margin-bottom: 1rem;
}

strong {
  color: #303030;
}


/* Lists */
ul, ol, dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

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

/* Misc */
hr {
  position: relative;
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #fff;
}

abbr {
  font-size: 85%;
  font-weight: bold;
  color: #555;
  text-transform: uppercase;
}
abbr[title] {
  cursor: help;
  border-bottom: 1px dotted #e5e5e5;
}

/* Gist via GitHub Pages */
.gist .gist-file {
  font-family: Menlo, Monaco, "Courier New", 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;
}

/* Quotes */
blockquote {
  padding: .5rem 1rem;
  margin: .8rem 0;
  color: #7a7a7a;
  border-left: .25rem solid #e5e5e5;
}
blockquote p:last-child {
  margin-bottom: 0;
}
@media (min-width: 30em) {
  blockquote {
    padding-right: 5rem;
    padding-left: 1.25rem;
  }
}

img {
  display: block;
  max-width: 100%;
  margin: 0 0 1rem;
  border-radius: 5px;
}

/* Tables */
table {
  margin-bottom: 1rem;
  width: 100%;
  border: 1px solid #e5e5e5;
  border-collapse: collapse;
}
td,
th {
  padding: .25rem .5rem;
  border: 1px solid #e5e5e5;
}
tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
  background-color: #f9f9f9;
}

/*
 * Sidebar
 */
.sidebar {
  text-align: center;
  padding: 2rem 1rem;
  color: rgba(255,255,255,.5);
  background-color: #202020;
}
@media (min-width: 48em) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 17rem;
    min-height: 35rem;
    text-align: left;
  }
}

/* Sidebar links */
.sidebar a {
  color: #fff;
}

/* About section */
.sidebar-about h1 {
  color: #fff;
  margin-top: 0;
  font-family: "Abril Fatface", serif;
  font-size: 2rem;
  text-align: center;
}
.sidebar-about a {
  text-decoration: none;
}
.sidebar-about a:hover,
.sidebar-about a:focus {
  text-decoration: underline;
}

.sidebar-pic {
  border-radius: 100px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
/* Sidebar nav */
.sidebar-nav {
  margin-bottom: 1rem;
  text-align: center;
}

.sidebar-nav-item {
  display: block;
  line-height: 1.75;
  text-decoration: none;
}
a.sidebar-nav-item:hover,
a.sidebar-nav-item:focus {
  text-decoration: underline;
}
a.sidebar-nav-item:active {
  font-weight: bold;
}
a.sidebar-contact-item {
  text-decoration: none;
}

.sidebar-info {
  font-size: 1rem;
  text-align: center;
}

p.copyright {
  margin-top: 1rem;
}

/* Sticky sidebar
 *
 * Add the `sidebar-sticky` class to the sidebar's container to affix it the
 * contents to the bottom of the sidebar in tablets and up.
 */

@media (min-width: 48em) {
  .sidebar-sticky {
    position: absolute;
    right:  1rem;
    bottom: 1rem;
    left:   1rem;
  }
}

/*
 * Content
 */

.content {
  padding-top:    4rem;
  padding-bottom: 4rem;
}

@media (min-width: 48em) {
  .content {
    max-width: 60rem;
    margin-left: 19rem;
    margin-right: 2rem;
  }
}

/*
 * Posts and pages
 *
 * Each post is wrapped in `.post` and is used on default and post layouts. Each
 * page is wrapped in `.page` and is only used on the page layout.
 */

.post {
  margin-bottom: 4em;
}

/* Blog post or page title */
.post-title,
.post-title a {
  color: #303030;
  text-decoration: none;
  font-size: 1.5rem;
}
.post-title {
  margin-top: 0;
}
.post-title:hover,
.post-title a:hover {
  text-decoration: underline;
}

/* Meta data line below post title */
.post-date {
  display: block;
  margin-top: -.5rem;
  margin-bottom: .5rem;
  color: #9a9a9a;
}

.post-category {
  display: block;
  font-weight: bold;
  margin-bottom: .5rem;
}

.post-category a {
  color: #303030;
  text-decoration: none;
}
.post-category a:hover {
  text-decoration: underline;;
}

.post-tag a {
  color: #303030;
  text-decoration: none;
}
.post-tag a:hover {
  text-decoration: underline;;
}

.post-abstract {
  margin-top: 1rem;
  text-align: justify;
  text-justify: inter-word;
}

.post-more a{
  color: #9a9a9a;
  text-decoration: none;
}

.post-more a:hover {
  text-decoration: underline;
}

.post-content {
  margin-top: 2rem;
  text-align: justify;
  text-justify: inter-word;
}

.post-content h1, h2, h3, h4, h5, h6 {
  text-decoration: underline;
}

.page-title,
.page-footer,
.projects-title {
  text-align: center;
  font-size: 2rem;
  margin-top: -1.5rem;
  margin-bottom: 2rem;
}

.page-footer a {
  color: #303030;
  text-decoration: none;
}
.page-footer a:hover {
  text-decoration: underline;
}

.previous-next-post {
  margin-bottom: 2em;
  padding-top: 2em;
  margin-bottom: 2em;
  padding-bottom: 2em;
  border-top: 1px solid #9a9a9a;
  border-bottom: 1px solid #9a9a9a;
  width: 100%;
  display: inline-block;
}

.previous-post {
  float: left;
  width: 45%;
  display: inline-flex;
}

.previous-post-title {
}

.previous-post-arrow {
}

.previous-next-post-gap {
  width: 10%;
}

.next-post {
  float: right;
  width: 45%;
  display: inline-flex;
}

.next-post-title {
  margin-left: auto;
  margin-right: 0;
}

.next-post-arrow {
  margin-left: auto;
  margin-right: 0;
}

.share-button {
  margin-right: 0.5rem;
}


/*
 * Projects
 *
 */
 .project-grid {
   display: grid;
   text-align: center;
   grid-auto-flow: row dense;
   grid-template-columns: 300px;
   grid-template-rows: 200px 200px 200px 200px 200px 200px;
   grid-gap: 15px 15px;
 }

 @media (min-width: 59em) {
   .project-grid {
     grid-template-columns: 300px 300px;
     grid-template-rows: 200px 200px 200px;
   }
 }

 @media (min-width: 79em) {
   .project-grid {
     grid-template-columns: 300px 300px 300px;
     grid-template-rows: 200px 200px 200px;
   }
 }

 .project-grid-item {
   position: relative;
 }

 .project-grid-item:hover {

 }

 .project-overlay {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   height: 100%;
   width: 100%;
   opacity: 0;
   transition: .5s ease;
   background-color: #303030;
 }

 .project-grid-item:hover .project-overlay {
   opacity: 1;
 }

 .project-text {
   color: white;
   font-size: 20px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   ms-transform: translate(-50%, -50%);
 }

 .projects-title {
   text-align: center;
   font-size: 1rem;
   margin-top: -1.5rem;
   margin-bottom: 2rem;
 }

 .project-details-image {
   margin-left: auto;
   margin-right: auto;
 }

 .project-container p {
   text-align: justify;
 }

 .resume-programming-item label {
   display:block;
   float:left;
   width:125px;
 }
 .resume-list {
   margin-bottom: 0px;
 }

 .ps-icon {
   display: inline-block;
   text-align: center;
   width: 1.7em;
   margin: 0;
 }