main {

	max-width: 90vw;
	margin: 0 auto;
	margin-top:1rem;
}

/* Tags */

article {
	margin-top: 2rem !important;
}

blockquote {
	background-color:#ededed;
	margin:0px;
	padding:.5rem;
	padding-left:1.5rem;		
	padding-right:1.5rem;
	margin-bottom: 2rem;
	font-weight:500 !important;
}

code {
	color: #222;
	font-weight: 700;
}

h3, h4, h5 {
	margin-top:1.5rem;
	margin-bottom:1.5rem;
}


article img {
	max-width: 640px !important;
	max-height: 480px !important;
	border: 1px dotted #ccc;
	padding: .5em;
	margin: 0 auto;
	margin-bottom:2em;
	margin-top: 2em;
	display:block;
	// min-width: 320px;
}

main li {
	list-style-type: circle;
	margin-bottom: .5em;
}


p {
	line-height: 1.5em !important;
	margin-top:2rem;
	margin-bottom:2rem;
}

pre {
	border: 1px solid #ccc;
	padding:1rem;
	padding-left:2.5rem;
	font-size:small;
	font-family:monospace;
	line-height:1.1rem;
	background-color:#ededed;
	font-weight:700;
	margin-top: 2rem;
	margin-bottom: 2rem;	
}

/*
ul {
	line-height:1.5em;
	margin-top:2em !important;
	margin-bottom:2em !important;
}
 */

video {
	max-width: 640px !important;
	max-height: 480px !important;
	border: 1px dotted #ccc;
	padding: .5em;
	margin: 0 auto;
	margin-bottom:2em;
	margin-top: 2em;
	display:block;
	// min-width: 320px;
}

/* IDs */

#pagination {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	width: fit-content;
	margin: 0 auto;
}

.pagination-control {
	text-align: center;
	padding: .5rem;
}

.pagination-previous {
	text-align: right !important;
}

.pagination-next {
	text-align: left !important;
}

/* Classes */

.aside {
	font-size:small;
	font-style: italic;
}

.big-link {
	text-align:center;
	display:block;
	margin-top:2rem;	
	margin-bottom:2rem;
}

.blog-index h2 {
	font-weight: 700;
	color:#999;
	text-align:right;
	margin-bottom:2rem;
}


.blog-index h3 {
	padding-top:2rem;
	margin-bottom:1.rem;
}

.caption {
	max-width: 600px;
	font-size:small;
	font-style:italic;
	margin: 0 auto;
	margin-bottom:1.6rem;
	line-height:1.4rem;
}

.feeds {
	font-size:small;
	font-style:italic;
	text-align:right;
	margin-top:5rem;
	display: flex;
	justify-content: center;
}

.hey-look {
	font-weight: 700;
}

.highlight {
	color: blue;
}

.highlight-item {
	color: red;
}

.link-to {
	display:flex;
	justify-content:center;
}

.rollup {
	display:inline-block;
}

.rollup li {
	display:inline-block;
}

.rollup li:before {
	content: " and ";
	font-size: small;
}

.rollup li:first-child:before {
	content: "" !important;
}

.table-wrapper {
	display:grid;
	justify-content:center;
	padding:.5rem;
	overflow:scroll;
}

.this-is {
	display: block;
	margin-top:.50rem;
	margin-bottom:2rem;
	font-weight: 300!important;
	font-size: .933em;
	line-height: 1.3em;
	color: #666;
}

@media (max-width: 1000px) {
	main {
		max-width: initial !important;
	}
}

@media (min-width: 650px) and (max-width: 800px) {

	.link-to {
		max-width:600px !important;
		word-break: break-all !important;
	}
	
	.table-wrapper {
		max-width:600px !important;
		display:block !important;
		border:1px solid #ccc;
		padding:1rem;		
	}		
}

@media (min-width: 401px) and (max-width: 500px) {

	.table-wrapper {
		max-width:400px !important;
		display:block !important;
		border:1px solid #ccc;
		padding:1rem;		
	}		
}

@media (min-width: 375px) and (max-width: 400px) {

	article img {
		max-width: 350px !important;
		max-height: 350px !important;
		min-width: 75px;
	}

	article video {
		max-width: 350px !important;
		max-height: 350px !important;
		min-width: 75px;
	}

	.image-details {
		max-width: 350px !important;
		line-height: 1.7rem !important;
	}
	
	.table-wrapper {
		max-width:350px !important;
		display:block !important;
		border:1px solid #ccc;
		padding:1rem;		
	}	
	
}

@media (min-width: 350px) and (max-width: 374px) {

	article img {
		max-width: 300px !important;
		max-height: 300px !important;
		min-width: 75px;
	}

	article video {
		max-width: 300px !important;
		max-height: 300px !important;
		min-width: 75px;
	}

	.image-details {
		max-width: 300px !important;
		line-height: 1.7rem !important;
	}
	
	.table-wrapper {
		max-width:300px !important;
		display:block !important;
		border:1px solid #ccc;
		padding:1rem;
	}
	
}

@media (min-width: 320px) and (max-width: 350px) {
	h2 {
		font-size: initial !important;
	}
}

@media (min-width: 320px) and (max-width: 349px) {

	article img {
		max-width: 300px !important;
		max-height: 250px !important;
		min-width: 75px;
	}

	article video {
		max-width: 300px !important;
		max-height: 250px !important;
		min-width: 75px;
	}
	
	.blog-index h2 {
		text-align:left !important;
		margin-bottom: .5rem !important;
		border-bottom: solid thin;
		font-size:1.5rem !important;
		padding-bottom:.5rem;
		line-height: 1.9rem !important;
	}
	
	.image-details {
		max-width: 300px !important;
		line-height: 1.7rem !important;
	}

	.table-wrapper {
		max-width:300px !important;
		display:block !important;
		border:1px solid #ccc;
		padding:1rem;
	}
	
	.this-is {
		line-height: 1.4rem !important;
	}

	pre {
		max-width: 300px !important;
	}
}