body {
	margin: 0;
	background-color: #eee;
	height: 100%;
	font-family: "Open Sans", sans-serif;
	line-height: 1.5;
}
.showabout {
	position: fixed;
	transition: all 0.3s ease;
}
.about {
	float: left;
	width: 28rem;
	box-sizing: border-box;
	padding: 6rem 4rem;
	background-color: #444;
	color: white;
	height: 100%;
	position: fixed;
	overflow: auto;
	left: 0;
}
.about img[src="images/x.svg"] {
	width: 3rem;
	position: absolute;
	top: 0;
	right: 0;
	cursor: hand;
	cursor: pointer;
	background-color: #222;
	display: none;
}
.about a {
	color: white;
}
.about hr {
	background-color: white;
	color: white;
}
.share {
	display: flex;
	flex-direction: column;
	width: 3rem;
	margin-left: 25rem;
	height: 100%;
	position: fixed;
	float: left;
	background: none;
	padding: 0;
	justify-content: flex-end;
	transition: all 0.3 ease;
}
.share img {
	display: block;
	height: 100%;
	width: 3rem;
}
.share img[src="images/facebook.png"] {
	background-color: #3d509f;
}
.share img[src="images/twitter.png"] {
	background-color: #55acee;
}
.main {
	background-color: white;
	float: right;
	width: 40rem;
	margin: 0 6rem 0 0;
	box-sizing: border-box;
	padding: 6rem;
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}
.main + .main {
	margin-top: 3rem;
}
.main pre,
.main code,
.main a {
	-ms-hyphens: none;
	-moz-hyphens: none;
	-webkit-hyphens: none;
	hyphens: none;
}
.main pre,
.main pre code {
	overflow-wrap: normal;
	word-wrap: normal;
	-ms-word-break: normal;
	word-break: normal;
}
.main pre code {
	display: block;
}
.main code {
	background-color: #eee;
	border-radius: 1rem;
	padding: 0.33rem 0.5rem;
	font-size: 0.95rem;
}
.main pre code {
	background-color: #eee;
	border-radius: 0;
	border-left: 0.33rem solid #444;
	display: block;
	overflow-x: auto;
	padding: 1rem 1rem 1rem 1.33rem;
}
.main img {
	margin: 1rem 0;
}
.main a {
	color: #0071cf;
	text-decoration: none;
	transition: color 0.3s;
}
.main a:hover {
	color: #00a6ff;
}
.main .date,
.main .caption {
	font-style: italic;
	font-size: smaller;
	color: #444;
}
.main .caption-container {
	background-color: #eee;
	padding: 1rem;
	margin: 1rem 0;
}
.main .caption-container > img {
	margin: 0;
}
.main blockquote {
	color: #888;
	border-left: 0.33rem solid #888;
	margin-left: 1rem;
	margin-right: 0;
	padding-left: 1rem;
}
.main h1,
.main h2,
.main h3 {
	border-bottom: 1px solid #eee;
	padding-bottom: 0.5rem;
}
.main h6 {
	color: #888;
}
.main hr {
	background-color: #eee;
	color: #eee;
}

/* Styles applied in all sections */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 1.25rem 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong {
	font-weight: 600;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.13rem; }
h5,
h6 { font-size: 1rem; }
hr {
	height: 4px;
	border: none;
}
img {
	max-width: 100%;
}
@media screen and (max-width: 80rem) {
	.showabout {
		display: block;
		height: 100%;
		width: 3rem;
		background: #444;
		background-image: url(../images/v2.svg);
		background-repeat: no-repeat;
		background-size: 75%;
		background-position: center;
		cursor: pointer;
		cursor: hand;
	}
	.showabout-active:active + .about {
		left: 0;
	}
	.showabout-active:active {
		background-image: none;
	}
	.about {
		margin-left: 3rem;
		-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.33);
		-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.33);
		box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.33);
		width: 25rem;
		padding-left: 1rem;
		left: -30rem;
		transition: all 0.3s ease;
	}
	.share {
		height: 6em;
		margin-left: 0;
		bottom: 0;
	}
	.main {
		margin: auto;
		float: none;
	}
}
@media screen and (max-width: 40rem) {
	.showabout {
		width: 100%;
		height: 3rem;
		background-image: url(../images/v1.svg);
		background-size: 2.5rem;
	}
	.showabout-active:active + .about {
		top: 0;
	}
	.about {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		margin-left: 0;
		width: 100%;
		padding: 6rem;
		top: -100%;
		left: 0;
	}
	.share {
		flex-direction: row;
		justify-content: flex-start;
		width: 6rem;
		height: 3rem;
		margin: 0;
		top: 0;
		float: left;
	}
	.main {
		width: 100%;
	}
}