* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

html, body {
	display: block;
	position: relative;
	margin: 1px;
	padding: 1px;
	/*width: 100vw;  avoid changing page width if magnific-popup makes v-scrollbar disappear */
	/*height: 100%;*/
	height: auto;
	
	line-height: 1.0em;
	font-size: 1.0em;
	font-family: monospace;
}

div {
	display: block;
	position: relative;
}

.bg1 {
	display: block;
	position: relative;
	width: auto;
	padding: 4px;
}

.content_all {
	
}

.content_center {
	margin: auto;
	display: block;
	max-width: 900px;
}

.content_top {
	position: relative;
	z-index: 999;
}

/* COLORS / BORDER */

/*
html, body, bg1 {
	color: #444941;
	background: #7FC8A9;
}
.content_top, .content_bottom {
	background: #5F7A61;
}
.content_main {
	background: #D5EEBB;
}
*/

/*
html, body, bg1 {
	color: #6F4C5B;
	background: #F5E8C7;
}
.content_top, .content_bottom {
	background: #9E7777;
}
.content_main {
	background: #DEBA9D;
}
*/

html, body, .bg1 {
	color: #C3BA85;
	color: #665e32;
	background: #FEFFE2;
}
.bg1 {
	padding-bottom: 500px;
}
.content_top, .content_bottom {
	background: #DAD5AB;
}
.content_main {
/*	background: #F0F0CB;*/
}
.content_item {
	background: #F0F0CB;
}
.content_item_header > h4 {
	background-color: #cebc81;
}

/* BORDER */

html, body {
	/*border: 1px solid orange;*/
}

div {
	/*border: 1px solid gray;*/
}

.content_top,
.content_bottom {
	border: 1px solid gray;
	border-radius: 2px;
}

.content_main {
	/*border: 1px solid gray;*/
	/*border-radius: 2px;*/
}

.content_item {
	border: 1px solid gray;
	border-radius: 3px;
}

/* --- */

.content_top,
.content_bottom,
.content_main,
.content_item,
.content_item_header,
.content_item_body {
	transition: all 0.2s;
}

.content_top,
.content_bottom {
	/*margin: 4px;*/
	padding: 20px;
}

.content_main {
	/*margin: 4px;*/
	/*padding: 4px;*/
}

.content_item_header > h4 {
	padding: 20px;
}

.content_item_body {
	/*margin: 4px;*/
	padding: 20px;
}

.content_item {
/*	padding: 10px;*/
	/*border: 1px solid red;*/
	margin-top: 30px;
	margin-bottom: 50px;
}

.content_item_header > h4 {
	display: block;
	width: auto;
	/*margin-left: -8px;*/
	/*margin-right: -8px;*/
	margin: 0px;
	/*margin-top: 0px;*/
	/*margin-bottom: 12px;*/
	/*padding-left: 8px;*/
	/*border: 1px solid gray;*/
	/*border-radius: 2px;*/
	border: 1px solid darkgray;
	border-width: 0px 0px 1px 0px;
/*	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border-bottom-left-radius: 1px;
	border-bottom-right-radius: 1px;*/
}

.content_item_body > p {
	margin: 6px 0px 6px 0px;
}

.content_item_body > img {
	width: 100%;
	border: 1px solid #424949;
	border-radius: 2px;
	margin: 6px 0px 6px 0px;
}

.video_container {
	position: relative;
	width: 100%;
	height: 0px;
	padding: 0px;
	padding-top: 85.75%;
	/*border: 1px solid red;*/
	margin: 6px 0px 6px 0px;
}

.video_container > video {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

/*
	video resolution / aspect ratio to and padding percent:
	800x600 (4:3) = 600/800 ( = 3/4) = 0.75 = 75%
*/

.video_container.gtkPerlinNoise {
	padding-top: 75%;
}

.video_container.a01 {
	padding-top: 100%;
}

.video_container.sgx {
	padding-top: 50.38%;
}
/*
.video_container.sgx1 {
	padding-top: 50.38%;
}

.video_container.sgx2 {
	padding-top: 50.41%;
}
*/

.video_container.pong {
	padding-top: 75%;
}

/* LARGE / DESKTOP SIZE */

@media only screen and (min-width : 900px) {
	.content_top_debug::after {
		content: " (large/dsk ..900)";
	}
	
	body {
		line-height: 1.5em;
		font-size: 1.5em;
	}
}

/* MEDIUM / TABLET SIZE (general) */

@media only screen and (min-width : 600px) and (max-width : 899px) {
	.content_top_debug::after {
		content: " (med/tab 600..899)";
	}
	
	body {
	    line-height: 1.4em;
		font-size: 1.4em;
	}
}

/* MEDIUM / TABLET SIZE (lower bound) */

@media only screen and (min-width : 600px) and (max-width : 699px) {
	.content_top_debug::after {
		content: " (med/tab 600..699 lower)";
	}
	
	body {
	    line-height: 1.4em;
		font-size: 1.3em;
	}
}

/* SMALL / MOBILE SIZE (general) */

@media only screen and (min-width : 0px) and (max-width : 599px) {
	.content_top_debug::after {
		content: " (sml/mob 0..599)";
	}
	
	body {
	    line-height: 1.3em;
		font-size: 1.2em;
	}
}

/* SMALL / MOBILE SIZE (lower bound) */

@media only screen and (min-width : 0px) and (max-width : 499px) {
	.content_top_debug::after {
		content: " (sml/mob 0..599) (sml/mob 0..499)";
	}

	body {
	    line-height: 1.4em;
		font-size: 1.1em;
	}
}