.screenshot {
	width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	background-color: rgba(0, 0, 0, 0.05);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 10px;
}

.hidden {
	display: none;
 }

 /* code box ``` code ``` will have a larger height */
.md-typeset pre > code {
    max-height: 15rem;
}

/* center figure; add {class=pp-figure} in markdown */
figure.pp-figure {
	margin: 0; 
}

/* align figure at the left of the page with text wrapping to the right; change default size (30%) in markdown*/
figure.align-left {
	float: left;
	margin-top: 0;
	margin-right: 10px;
	width: 30%;
 }

/* align figure at the right with text wrapping at the left*/ 
figure.align-right {
	float: right;
	margin-top: 0;
	margin-left: 10px;
	width: 30%;
 }

 /* set small fontsize and width of the default figure caption; so that wrapping will less occur*/
.md-typeset figcaption{
	text-align: left;
	margin: 0;
	max-width: 40rem;
    font-size: small;
}

/*colour for icons */
.active {
	color: orange;
}
.green {
	color: #0c6280;
}

.center {
    display: block;
    margin: 0 auto;
}