/*--- LINKS -----------------------------------------------------------------*/

a {  
	text-decoration: none;
	color: $link-color; 

	&:visited { 
		color: lighten($link-color, 20); 
	}

	&:hover { 
		color: lighten($link-color, 20); 
          text-decoration: underline;
	}

	&:focus { 
		outline: thin dotted; 
		color: darken($link-color, 20);
	}

	&:hover, 
	&:active { 
		outline: 0; 
	}
}

/*--- BLOCKQUOTE ------------------------------------------------------------*/

blockquote {
    border-left: 4px solid $border-color;
    font-size: 14px;
    font-family: $alt-font;
    margin-left: 1em;
    margin-right: 5em;
    padding-left: 15px;
    line-height: 22px;
}

/*--- CODE FORMAT -----------------------------------------------------------*/

tt, code, kbd, samp, pre {
	font-family: $code-font;
}

p > code,
a > code,
li > code,
figcaption > code,
td > code {
    margin: 0 2px;
	padding: 0 5px;
    font-size: 12px;
	line-height: 1.5;
    border: 1px solid lighten(#000, 90);
	background-color: lighten(#000, 95);
	border-radius: 3px;
}

pre {
    font-size: 12px;
	line-height: 1.5;
	overflow-x: auto;

	&::-webkit-scrollbar {
		height: 12px;
		background-color: #34362e;
		border-radius: 0 0 4px 4px;
	}

	&::-webkit-scrollbar-thumb:horizontal {
		background-color: #6a6d5d;
		border-radius: 4px;
	}
}

/*--- ABOUT SECTION (SOCIAL MEDIA) ------------------------------------------*/

.personal-social-media {
    word-spacing: 10px;
    
    img:hover {
        opacity: 0.5;
    }
}

/*--- DIVIDING LINE ---------------------------------------------------------*/

hr { 
    display: block; 
    margin: 1em 0 1.5em; 
    padding: 0;
    height: 1px; 
    border: 0; 
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #fff; 
}

/*--- FIGURES & IMAGES ------------------------------------------------------*/

figure {
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;

  img {
    margin-bottom: 0px;
  }
}

svg:not(:root) {
  overflow: hidden; 
}

/*--- PAGINATION ------------------------------------------------------------*/

.pagination {
    a{
        color: $base-color;
    }
    
    a:hover {
        color: lighten($base-color,30);
    }
    
    word-spacing: 10px;
}

/*--- EQUATIONS -------------------------------------------------------------*/

.has-jax {
    font: inherit; 
    font-size: 100; 
    background: inherit; 
    border: inherit;
    color: #006699;
}

/*--- NAVIGATION BAR --------------------------------------------------------*/

.navigation-bar {
    
    a{
        color: $base-color;
    }
    
    a:hover {
        color: lighten($base-color,30);
    }
    
    word-spacing: 20px;
}

/*--- TAGS ------------------------------------------------------------------*/

.inline-tags {
    font-size: 14px;

    a {
        color: #F2992E;
    }
    
    &:hover {
        color: lighten(#F2992E,20);
    }
}

/*--- GLOBAL TRANSITION -----------------------------------------------------*/

b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a {
	transition: all 0.2s ease;
}

/*--- MAIN CONTENT ----------------------------------------------------------*/

.entry-content {
    font-size: 16px;
    line-height: 26px;
}

.entry-title {
    font-weight: 100;
}

.main-header-image {
    img {
        @media #{$medium} {
            margin-left: 20px;
		margin-right: 20px;
		}

		@media #{$large} {
			max-width: $column-width;
		}
    }
    
    img:hover {
        opacity: 0.8;
    }
}

.post-date {
    font-size: 12px;
	text-transform: uppercase;
    color: lighten($base-color,50);

	a {
		color: lighten($base-color,50);
	}
    
    a:hover{
        color: lighten($base-color,20);
    }
}

header .entry-meta {
	display: none; // hide header meta on small screens

	@media #{$medium} {
		display: block;
	}
}

/*--- POST INDEX ------------------------------------------------------------*/

#post-index {
	#main {
		margin: 40px 2px 20px 2px;

		@media #{$medium} {
			margin-left: 20px;
			margin-right: 20px;
		}

		@media #{$large} {
			max-width: $column-width;
			margin-top: 50px;
			margin-left: 250px;
			margin-right: 250px;
		}
	}

	article {
		background-color: #fff;
		box-shadow: 0 0 0 0, 0 6px 12px rgba($base-color,0.1);
		border-radius: 3px;
		margin-bottom: 20px;
		padding: 25px 15px;

		@media #{$medium} {
			padding: 30px;
		}

		@media #{$large} {
			margin-bottom: 30px;
			padding: 50px 80px;
		}
        
        a { 
            img:hover {
                opacity: 0.9;
            }
        }
        
	}
}

/*--- FOOTER ----------------------------------------------------------------*/

.footer-wrapper {
	margin: 2em auto;
	text-align: center;
	color: lighten($text-color,20);
    font-size: 14px;

    a:link{
        color: darken($text-color,1);
        text-decoration: underline;

    }
    
	a:hover {
		color: darken($text-color,40);
	}
}

/*--- BROWSER UPGRADE -------------------------------------------------------*/

.upgrade {
	padding: 10px;
	text-align: center;
}

/*--- BODY ------------------------------------------------------------------*/

body {
    font-family: $base-font;
    color: $text-color;
	margin: 0;
	padding: 0;
	width: 100%;
	background-color: $body-color;
    margin-top: 0px + $doc-line-height;
    font-size: 0px + $doc-font-size;
}

/*--- HEADINGS --------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
	font-family: $heading-font;
}

h1 {
	@media #{$medium} {
        font-size: 32px;
	}
}