.site-header {
	padding-bottom: 6px;
}

.blog-entry-date {
	font-size: 0.8em;
	color: gray;
}

.blog-topics li {
	margin-bottom: 12px;
}

.blog-post {
	width: 80%;
	margin: 0 auto;
	margin-bottom: 12px;
	margin-top: 12px;
	border: 2px solid black;
	border-radius: 12px;
	padding: 36px;
	box-shadow: 10px 10px gray;
}

.blog-post header {
	border-bottom: 2px solid black;
	margin-bottom: 16px;
	padding-bottom: 6px;
}

.blog-post p {
	/*text-indent: 48px;*/
}

.blog-post p::first-letter {
	font-size: 1.04em;
}

.post-content h1 {
	color: black;
	font-size: 1.5em;
	border-bottom: 2px solid black;
}

.post-content img {
	display: block;
	margin-bottom: 12px;
	margin-left: auto;
	margin-right: auto;
	max-width: 100%; /* So that images fit properly in small screens */
}

/* For any kind of source code */
.post-content pre {
	width: 90%;
	border: 1px dashed black;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 12px;
	padding: 12px;
	
	/* So you can scroll through overflowed text in small screens */
	/* auto adds scrolling bar only if overflow occurs */
	overflow: auto; 

	/* These are probably the default */
	font-family: "Courier New", Courier, monospace;
	font-size: 1em;
}

.post-content blockquote {
	border-left: 6px solid LightGray;
	padding-left: 12px;
	padding-top: 12px;
	padding-bottom: 12px;
	font-style: italic;
}

pre .cmd {
	font-weight: 600; /* 400 is normal; 700 is bold */
	font-size: 1.1em;
}
pre .out {
	color: SeaGreen;
}

.my-table {
	border: 1px solid black;
	text-align: center;
	padding: 0;
	margin: 0 auto 12px;
}
.my-table,
.my-table th {
	border-collapse: collapse;
}
.my-table th {
	border-bottom: 1px solid black;
}
.my-table th,
.my-table td {
	padding: 6px;
	border-right: 1px solid black;
}

.footer-menu {
	text-align: center;
	margin-top: 3px;
	margin-bottom: 3px;
}
.footer-menu a {
	color: lightgray;
}
.footer-menu a:link,
.footer-menu a:visited,
.footer-menu a:active {
	text-decoration: none;
}
.footer-menu a:hover {
	color: gold;
	text-decoration: underline;
}

/* Smartphones */
@media (max-width: 767px) {
	.site-main {
		padding-left: 0;
    padding-right: 0;
	}
	.site-main h1 {
		font-size: 1.3em;
		border-bottom: none;
		margin-bottom: 6px;
	}
	.site-main h2 {
		font-size: 1em;
	}
	.site-main h4 {
		font-size: 0.8em;
	}
	.site-main h2, .site-main h4 {
		text-align: center;
	}
	.blog-post {
		width: 95%;
    border: none;
    margin: 0;
    box-shadow: none;
    padding: 0;
    border-radius: initial;
    padding-left: 2.5%;
    padding-right: 2.5%;
	}
	.blog-post p {
		text-indent: 0;
	}
	.blog-topics {
		padding: 0 2.5%;
		list-style-type: none;
	}
	.blog-topics li {
		margin-bottom: 18px;
	}
}