/*
 * Main
 */
html, body {
	/* colors */
	color: #031523;

	/* font */
	font-family: 'Roboto', sans-serif;
	line-height: 1.6;

	/* sizing */
	height: 100%;
	width: 100%;
}

p {
	/* spacing */
	margin: 0.8em 0;
}

h1 {
	/* border */
	border-bottom: 1px solid #95B3BD;

	/* font */
	font-size: 1.75em;

	/* spacing */
	line-height: 1;
	margin-bottom: 1rem;
	margin-top: 1.6rem;
	padding-bottom: .3em;
}

h3 {
	/* border */
	border-bottom: 1px solid #95B3BD;

	/* spacing */
	margin: 0.8em 0;
}

h4 {
	/* spacing */
	margin: 0.8em 0;
}

code {
	/* border */
	border: 1px solid #95B3BD;
	border-radius: 3px;

	/* colors */
	background-color: #F1F2F5;

	/* font */
	font-family: 'Roboto Mono', monospace;

	/* spacing */
	padding: 0 0.2em 0 0.2em;
}

pre {
	/* border */
	border: 1px solid #95B3BD;
	border-radius: 1em;

	/* colors */
	background-color: #F1F2F5;

	/* font */
	font-family: 'Roboto Mono', monospace;
	
	/* properties */
	display: inline-block;
	overflow: auto;

	/* sizing */
	width: calc(100% - 42px);

	/* spacing */
	line-height: 1.225;
	margin-bottom: 0;
	margin-top: 0;
	padding: 1em;
}

/* 
 * Sidebar
 */
.material-icons.menu {
	/* properties */
	display: inline-block;
	vertical-align: bottom;

	/* spacing */
	padding-right: .3em;
}

@media (max-width: 720px) {
.sidebar {
	/* colors */	
	background-color: #031523;
	
	/* properties */
	float: left;
	overflow: auto;
	text-align: center;

	/* sizing */
	width: 100%;

	/* spacing */
	margin: 0;
	padding: 0;
}

.sidebar img {
	/* sizing */
	width: 240px;
}

.sidebar ul {
	/* properties */
	list-style-type: none;

	/* spacing */
	margin: 0;
	padding: 0 0 .5em 0;
}

.sidebar li {
	/* properties */
	display: inline-block;

	/* spacing */
	padding: .7em;
}

.sidebar a {
	/* border */
	border-radius: .5em;

	/* colors */
	color: white;

	/* properties */
	text-decoration: none;

	/* spacing */	
	padding: .7em;
}

.sidebar li a.active {
	/* colors */
	background-color: #12B6DB;
}
}

@media (min-width: 720px) {
.sidebar {
	/* colors */	
	background-color: #031523;
	
	/* properties */
	float: left;
	overflow: auto;

	/* sizing */
	height: 100%;
	width: 260px;

	/* spacing */
	margin: 0;
	padding: 0;

}

.sidebar img {
	/* sizing */
	width: 240px;

	/* spacing */
	padding-left: .5em;
}

.sidebar ul {
	/* properties */
	list-style-type: none;

	/* sizing */
	width: calc(100% - 1.6em);

	/* spacing */
	margin: 15px 0;
	padding: 0;
}

.sidebar li a {
	/* colors */
	color: white;
	
	/* border */	
	border-bottom-right-radius: 1.6em;
	border-top-right-radius: 1.6em;

	/* properties */
	display: block;
	text-decoration: none;

	/* spacing */
	padding: .8em 0 .8em 1em;
}

.sidebar li a:hover {
	/* colors */
	background-color: #31425C;
}

.sidebar li a.active {
	/* colors */
	background-color: #12B6DB;
}
}

/*
 * Content
 */
@media (max-width: 720px) {
.content {
	/* properties */
	float: left;
	overflow: hidden;

	/* sizing */
	width: calc(100% - 40px);

	/* spacing */
	margin: 0;
	padding: 20px;
}}

@media (min-width: 720px) {
.content {
	/* properties */
	float: left;
	overflow: auto;
	
	/* sizing */
	height: calc(100% - 40px);
	width: calc(100% - 260px - 40px);

	/* spacing */
	margin: 0;
	padding: 1em 20px 0 20px;
}}

.content-width {
	/* properties */
	overflow: hidden;

	/* sizing */
	max-width: 860px;
}


.content-width img {
	/* properties */
	object-fit: contain;

	/* sizing */
	max-width: 100%;
}

/*
 * Utilities
 */
.vertical-align-middle {
	vertical-align: middle;
}