* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Inconsolata', monospace;
    visibility: visible;
	line-height: 140%;
	font-weight:100;
}

.nowrap {
  white-space: nowrap;
  word-break: keep-all;
}

body {
	padding: 0;
    margin: 0;
    overflow-x: hidden;
	font-size:1.4rem;
	background-color:#1A1A1A;
	
}

#title-image {
	width:100vw;
	display:block;
}

.column {
	max-width:60rem;
	width:auto;
	margin-left: auto;
	margin-right: auto;
}

.section {
/*
	margin-top:1.5rem;
	margin-bottom:1.5rem;
*/
}


em {
	font-family: 'Roboto', monospace !important;
}

p {
	padding-top:1em;
	padding-bottom:1em;
	word-break:keep-all;
}


.padding-std {
	padding-left:7rem;
	padding-right:7rem;	
}

@media screen and (max-width:50em) {
	.padding-std {
		padding-left:2rem;
		padding-right:2rem;	
	}
	
	body {
		font-size:1.2rem;
	}
	
	#title h1 span {
		font-size:1.2rem;
	}	
}


/*--------------------------- title bar ---------------------------*/

#title {
	background-color: #8f0000;
}

#title h1 {
	background-color: #8f0000;
	font-size:2.5rem;
	font-weight: normal;
	color:white;
	padding-top:1.2rem;
	padding-bottom:1.2rem;

}

#title h1 span {
	font-size:1.4rem;
	white-space: nowrap;
	word-break: keep-all;
}


#title h1 span::before {
	content:" :: "
}

@media screen and (max-width:60em) {
	html {
		font-size:80%;
	}
	#title h1 span {
		
		white-space:normal;
		display:block;
		text-indent: -1em;
		padding-left: 1em;
	}
	
	#title h1 span::before {
		content:"::"
	}
}


/*--------------------------- intro ---------------------------*/

#intro {
	background-color:#1A1A1A;
	color:#DDDDDD;
	overflow:auto;
	background-image: url(media/hstripe.png);
	background-position: 0% 14%; 
	background-size: 100%  50% ;
/*	background-repeat: repeat-x;*/
	background-color:#1A1A1A;
	
}

#intro div {
	background-color:#1A1A1A;
	padding-top:3rem;
}

#intro img{
	width:50%;
	padding:2rem;
	margin-left: auto;
	margin-right:auto;
	display:block;
	padding-bottom:5rem;
}

code {
	white-space: pre-wrap;
}

#intro span {
	color:#2CBD8D;
	font-family: 'Roboto', monospace;
}

#intro pre {
	line-height: 75%;
}

#intro code {
	color:inherit;
	color:#BFBFBF;
	font-family: 'Roboto', monospace;
	line-height: 0%;
	font-style: italic;
}


#fibnumbers {
	display:block;
	text-align: center;
	padding:1em;
	font-weight:100;
}


hr.fibstrip {
	display:block;
	border:0;
	height:1.5rem;	
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto 100%;
	background-image: url("media/fibstrip.png");
	margin-top:3rem;
	margin-bottom:1rem;
}


/*--------------------------- sample page ---------------------------*/
#tree-page {
	display:block;
	padding-top:3rem;
	background-color: #C1B096;
	color:333333;
}

#tree-page img {
	width:100%;
	display:block;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------- example forms ---------------------------*/
#form-examples {
	display:flex;
	justify-content: center;
	padding-top:3rem;
	background-color: #C1B096;
	color:333333;
	padding-bottom: 5rem;
	width:100%;
}

#form-examples img {
	display:block;
	width:100%;
	margin-left: auto;
	margin-right: auto;	
}

figure {
	display:block;
	width:30%;
	margin:0;
	text-align: center;
}

figcaption {
	font-weight:bold;
	font-size:1rem;
}

@media screen and (max-width:50em) {
	figure {
		display:block;
		width:80%;
		padding:10%;
		margin-left: auto;
		margin-right: auto;			
	}

	#form-examples {
		display:block;
	}
}

/*--------------------------- demos ---------------------------*/
#demos {
	background-color:#1A1A1A;
	color:#DDDDDD;
	padding-top: 4rem;
	padding-bottom: 8rem;	
}

@media screen and (max-width:50em) {
	#demos {
		padding-top: 0rem;
		padding-bottom: 8rem;
	}
}


#demos img {
	width:100%;
}

#demos p {
	margin-left: auto;
	margin-right: auto;
}

#unfold-demo {
	display:block;
	margin-left: auto;
	margin-right: auto;
}

#demos #fold3d {
	display:block;
	width:50%;
	padding:3rem;
	padding-bottom:6rem;
	max-width: 30rem;
	margin-left: auto;
	margin-right: auto;
	box-sizing: content-box;
}