$max-width: 40rem !default;

@mixin max-width {
	max-width:$max-width;
	margin-left:auto;
	margin-right:auto;
}	

@mixin quotes {
		&:before,  &:after {
			font-family: 'Line Awesome Free';
			font-weight: 900;
			font-style:normal;
		}
		
		&:before {
			content:"\f10d ";
		}
				
		&:after {
			content:" \f10e";
		}
}

h1, h2, h3, h4, h5, h6 {
	//line-height:1.4;
	//font-weight:600;
	//color: var(--bs-body-color);
	word-break: break-word;
}


.post-title, .post-title a {
		text-decoration:none;
		color:var(--bs-body-color);

		h1, h2, h3  {
			font-weight:600;
			//display:block;
		}
		/*	
		h3 {
			font-size:1.2rem;	
			line-height:1.4rem;	
		}
		*/
		&:hover {
			text-decoration:underline;
		}
}

a.post-title  {
	display:block;
}

.post-content {
	font-size: 1.2rem;
	line-height: 1.6;	
	
	font-family: var(--bs-font-sans-serif);
	//font-family: 'Noto Serif', serif;
	//font-family: 'Roboto Slab', serif;
	
	/*
	> * {
		margin-bottom:1rem;
	}
	*/
	
	> p, > h1, > h2, > h3,  > h4, > h5, > h6, > blockquote, > span, > ul, pre, > ol, > details  {
		@include max-width();
	}
	
	h1, h2  {
		font-weight:600;
	}
		
	blockquote {

		font-style: italic;
		padding-bottom: 3px;
		padding-right: 20px;
		padding-left: 20px;
		letter-spacing: .01rem;
		border-left: 4px solid var(--bs-border-color);
		margin-top:2rem;
		margin-bottom:2rem;
		//border-left: 4px solid var(--bs-light-gray);
		
		
		> p { 
		@include quotes();
		}
		
		i {
			font-size:2rem;
			color:var(--bs-gray);;
		}
	}	
	
	q {
		@include quotes();
	}
	

	img, svg, video {
		vertical-align: middle;
		max-width: 100%;
		margin: 0 auto;
		height: auto;
	}	

	iframe {
		vertical-align: middle;
		max-width: 100%;
		margin: 0 auto;
		display:block;
	}	
	
	div.iframe {
		display:flex;
		justify-content: center;
		position:relative;
	}
	
	.align-left {
		margin-right:1rem;
	}
	
	.align-right {
		margin-left:1rem;
	}
	
	pre {
		padding:0 1rem 1rem;
		background:var(--bs-secondary-bg);
		
		code {
			background:transparent;
		}

	}

	table {
		//@extend .table;
	}
}

.align-left {
	float:left;
	margin-bottom: 25px;
    max-width: 50%;
	margin:.5em 1em .5em 0;
}

.align-right {
	float:right;
	margin-bottom: 25px;
    max-width: 50%;
	margin:.5em 0 .5em 1em;
}

.align-center {
    margin-left: auto;
    margin-right: auto;
}

img.align-center {
	display: block;
}

figure.align-center{
	display:table;
}

.tags, .comments-form, .post-comments {
	@include max-width();
}