@import url('https://fonts.googleapis.com/css?family=Inconsolata|Indie+Flower');

/*html {
	height: 100%;
	overflow: hidden;
	perspective-origin: calc(50vw - 3em) calc(50vh - 3em);
	-webkit-perspective-origin: calc(50vw - 3em) calc(50vh - 3em);
}

html, body {
	-webkit-perspective: 50vmax;
	-webkit-transform-style: preserve-3d;
	
	perspective: 600px;
	transform-style: preserve-3d;
}*/

body {
	height: 100vh;
	overflow: auto;
	
	background-color: #E0E0E0;
	font-family: Open Sans, sans;
	margin: 3em;
	/*filter: invert(100%) hue-rotate(180deg);
	background-color: #101010;*/
	
	/*overflow: auto;*/
}

.imanuel-logo-container {
	position: absolute;
	right: 0;
	font-weight: 300;
}

.visual span, table {
	display: inline-block;
	
	/*text-align: center;*/
	vertical-align: inherit;
	
	border: .15rem solid rgba(0,0,0,0);
	padding: .256rem .516rem;
	margin: 0;
	
	/*font-family: Inconsolata;*/
	/*text-shadow: 0 0 .1rem black;*/
}

.visual span input[type="text"], .visual span textarea, .visual span button {
	border: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	border-bottom: 2px solid #606060;
	border-radius: 2px;
	text-align: center;
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	min-width: 2.25em;
	/*animation: input-appear .75s ease-out .5s forwards;
	-webkit-animation: input-appear .75s ease .5s forwards;*/
}

body:not(.threeD) .visual span:not(.parentheses) {
	border-top: none !important;
	border-bottom: none !important;
}

/*.visual .parentheses:nth-of-type(even) {
	background: rgba(255,255,255,.5) !important;
}

.visual .parentheses:nth-of-type(odd) {
	background: #FFD0D0 !important;
}

.visual .parentheses .parentheses:nth-of-type(odd) {
	background: #DCF5F5 !important;
}

.visual .parentheses .parentheses .parentheses:nth-of-type(odd) {
	background: #F5E9DC !important;
}

.visual .parentheses .parentheses .parentheses .parentheses:nth-of-type(odd) {
	background: #DCDCF5 !important;
}

.visual .parentheses .parentheses .parentheses .parentheses .parentheses:nth-of-type(odd) {
	background: #F5F5DC !important;
}

.visual .parentheses .parentheses .parentheses .parentheses .parentheses .parentheses:nth-of-type(odd) {
	background: #F5DCF5 !important;
}

.visual .parentheses .parentheses .parentheses .parentheses .parentheses .parentheses .parentheses:nth-of-type(odd) {
	background: #F5F5DC !important;
}*/

.threeD .visual span, #dynamic, #c {
	background-image: repeating-linear-gradient(
	  45deg,
	  transparent,
	  transparent 0.8rem,
	  rgba(0,0,0,.05) 0.8rem,
	  rgba(0,0,0,.05) 1.6rem
	);
	background-attachment: fixed;
}

/*.threeD .examples,
.threeD #dynamic,
.threeD h2 + div {
	-webkit-perspective: inherit;
	-webkit-transform-style: preserve-3d;
	-webkit-perspective-origin: inherit;
	perspective: inherit;
	transform-style: preserve-3d;
	transform: translateZ(0);
	perspective-origin: inherit;
}

.threeD .examples,
.threeD #dynamic {
	-webkit-perspective: inherit;
	-webkit-transform-style: preserve-3d;
	perspective: inherit;
	transform-style: preserve-3d;
	transform: translateZ(-5vmax) scale(1.11);
}

.threeD .visual {
	-webkit-perspective: inherit;
	-webkit-transform-style: preserve-3d;
	perspective: inherit;
	transform-style: preserve-3d;
	transform: translateZ(0);
}

.ios.threeD .examples,
.android.threeD .examples {
	margin: 20rem 0;
}*/

#dynamic:empty {
	cursor: pointer;
}

.threeD .visual > span > span > span > span > span > span > span > span > span > span > span > span > span > span > span,
.threeD .visual > span > span > span > span > span > span > span > span > span > span > span > span > span,
.threeD .visual > span > span > span > span > span > span > span > span > span > span > span,
.threeD .visual > span > span > span > span > span > span > span > span > span,
.threeD .visual > span > span > span > span > span > span > span,
.threeD .visual > span > span > span > span > span,
.threeD .visual > span > span > span,
.threeD .visual > span {
	background-position: -1.13rem 0;
	background-image: none;
}

/*.flip .visual, .flip .visual span {
	transform: scaleY(-1);
}*/

.threeD .visual span, .threeD .visual table {
	display: inline-block;
	/*word-spacing: 1em;*/
	
	border: .15rem solid /*#d9d9d9*/ rgba(0,0,0,.15);
	/*padding: .156em .416em;*/
	padding: .256rem .516rem;
	box-shadow: -4px 0px rgba(0,0,0,.15), 0px 0px 0px 0px rgba(0,0,0,.02);
	background-color: white;
	border-radius: .4rem;
	margin: 0;
	
	transition: background .1s ease 0s, border .1s ease 0s, box-shadow 2s ease 0s, transform 2s ease 0s, margin 2s ease 0s;
	text-align: center;
	vertical-align: inherit;
	
	-webkit-transform-origin: 0px 0px;
	-webkit-transform: rotateY(-0.5deg) translateZ(1px);
	-webkit-transform-style: preserve-3d;
	transform-origin: 0px 0px;
	transform: rotateY(-0.5deg) translateZ(1px);
	transform-style: preserve-3d;
	-moz-perspective: inherit;
	-webkit-perspective: inherit;
	perspective: inherit;
}

.visual .parentheses,
.threeD .visual .parentheses {
	box-shadow: none !important;
	-webkit-transform: rotateY(0deg) translateZ(0px);
	transform: rotateY(0deg) translateZ(0px);
	/*transform-style: initial;*/
}

.threeD .visual .parentheses {
	-webkit-mix-blend-mode: darken;
	border: .15rem solid /*#d9d9d9*/ transparent !important;
	border-radius: .4rem !important;
}

.visual > span .parentheses,
.threeD .visual > span .parentheses {
	border: none !important;
	border-top: .15rem solid rgba(0,0,0,.15) !important;
	border-bottom: .15rem solid rgba(0,0,0,.15) !important;
	margin: -.256rem -.516rem;
	/*margin-right: .256rem;*/
}

.visual > span .parentheses + .parentheses {
	margin-left: .256rem;
}

.visual > span .parentheses > span > span > span {
	display: inline-block;
	vertical-align: bottom;
	/*margin: -1.280rem -2.380rem;*/
}

.visual > span .parentheses .parentheses,
.visual > span .parentheses .parentheses + .parentheses {
	display: block;
	border: none !important;
	border-left: .15rem solid rgba(0,0,0,.15) !important;
	border-right: .15rem solid rgba(0,0,0,.15) !important;
	/*margin: -.256rem -.516rem;*/
	/*margin: -1.280rem -2.380rem;*/
	/*margin: .256rem .516rem;*/
	/*background: inherit !important;*/
	/*margin: .256rem .516rem;*/
	box-shadow: 0 .5rem rgba(0,0,0,.15) !important;
}

.visual > span .parentheses .parentheses + .parentheses {
	margin-left: -.516rem;
	margin-top: .256rem;
}

.threeD .visual > span .parentheses .parentheses .parentheses .parentheses,
.threeD .visual > span .parentheses .parentheses .parentheses .parentheses + .parentheses {
	display: inline-block;
	transform: rotateY(-.5deg) translateZ(0) !important;
	margin-top: 0;
	background: white !important;
}

.threeD .visual > span .parentheses .parentheses .parentheses .parentheses + .parentheses {
	margin-left: -2.24rem;
}

.threeD .visual > span .parentheses .parentheses .parentheses,
.threeD .visual > span .parentheses .parentheses .parentheses + .parentheses {
	background: rgba(255,255,255,.5) !important;
	transform: translateZ(25px);
	/*position: absolute;
	top: 0;*/
}

.threeD .visual > span .parentheses .parentheses .parentheses + .parentheses {
	margin-top: -4.48rem;
}

/* 
 * threeD effects!
 * /
.threeD .visual > span .parentheses .parentheses .parentheses:nth-child(1) {
	transform: translateZ(1px);
}

.threeD .visual > span .parentheses .parentheses .parentheses:nth-child(2) {
	transform: translateZ(5px);
}

.threeD .visual > span .parentheses .parentheses .parentheses:nth-child(3) {
	transform: translateZ(9px);
}

.threeD .visual > span .parentheses .parentheses .parentheses:nth-child(4) {
	transform: translateZ(13px);
}

.threeD .visual > span .parentheses .parentheses .parentheses:nth-child(5) {
	transform: translateZ(17px);
}

.threeD .visual > span .parentheses .parentheses .parentheses:nth-child(6) {
	transform: translateZ(21px);
}

.threeD .visual:focus > span .parentheses .parentheses .parentheses,
.threeD .visual:focus > span .parentheses .parentheses .parentheses + .parentheses {
	transform: translateZ(0) !important;
	margin-top: 0;
}
/*/

.visual span.operator {
	/*border-radius: 1.5rem;*/
	width: 1.5rem;
	height: 1.5rem;
	line-height: 1.25rem;
	padding: .125rem;
}

.visual span.operator,
.threeD .visual span.operator {
	/*background-color: transparent;
	box-shadow: none;
	border: none;
	vertical-align: middle;*/
}

.visual > span .parentheses span.operator,
.threeD .visual > span .parentheses span.operator {
	background-color: transparent;
	box-shadow: none;
	border: none;
	vertical-align: middle;
	
	transform: rotate(90deg);
	transform-origin: 50% 50%;
	width: 4em;
	text-align: center;
	padding: 0;
}

/*.visual > span .parentheses + .parentheses,
.threeD .visual > span .parentheses + .parentheses {
	margin-left: .256rem;
}*/

.threeD .visual > span .parentheses {
	border-radius: 0 !important;
}

.visual .parentheses,
.visual > span .parentheses {
	border-radius: 1rem !important;
	border: .15rem solid rgba(0,0,0,.15) !important;
}

/*.visual > span .parentheses + br + br + .parentheses {
	margin-left: 1em;
}*/

.visual > span .parentheses + br,
.visual > span .parentheses + br + br {
	display: initial !important;
}

.visual span.function {
	/*border-top-right-radius: 2rem;
	border-bottom-right-radius: 2rem;*/
	border-radius: 10rem;
	background-color: #CCFFA0;
}

.visual span.function > span,
.visual span.function > span span,
.threeD .visual > span > span.function,
.threeD .visual > span .parentheses > span.function {
	border-top-right-radius: 2rem !important;
	border-bottom-right-radius: 2rem !important;
	border-color: transparent !important;
	background: transparent !important;
	color: inherit !important;
	box-shadow: none;
	transform: rotateY(0deg) translateZ(.1px);
	-webkit-transform: rotateY(0deg) translateZ(.1px);
}

.visual > span > span.function,
.visual > span .parentheses > span.function {
	/*border-left: none;*/
	border-radius: .75rem;
	border-top-left-radius: .1rem;
	border-bottom-left-radius: .1rem;
}

.threeD .visual > span > span.function,
.threeD .visual > span .parentheses > span.function {
	transform-origin: 50% 50%;
	transform: rotateZ(90deg);
	margin: 0 -8em;
	width: 16em;
}

.visual span br + span,
.threeD .visual span br + span {
	/*border: 2px solid rgba(0,0,0,.25);*/
	/*filter: invert(100%);*/
	/*margin-left: -1rem;
	margin-top: 1rem;*/
	border-top-left-radius: 1rem;
	border-bottom-left-radius: 1rem;
	border-left: .4rem solid rgba(0,0,0,.5);
	margin-right: .4rem;
	break-before: always;
}

.parentheses > span + span {
	border-left: .2rem solid rgba(0,0,0,.5);
	padding-left: .796rem;
}

.parentheses > span + br + span + span:not(.function),
.parentheses > span + br + br + span + span:not(.function) {
	border-left: .2rem solid transparent;
}

.threeD .parentheses > span + br + span + span:not(.function),
.threeD .parentheses > span + br + br + span + span:not(.function) {
	border-left: .2rem solid rgba(0,0,0,.15);
}

/*.visual span br + span:before {
	content: "\a";
	white-space: pre;
}*/

.threeD .visual span br + span {
	border-left-width: 1rem;
	border-color: rgba(0,0,0,.5);
}

.visual span br + span + br + span,
.visual span br + span + br + br + span {
	border-top-left-radius: 0rem;
	border-bottom-left-radius: 0rem;
	border-left-width: .2rem;
	margin-right: .2rem;
	padding-left: .656rem;
}

.threeD .visual span br + span + br + span,
.threeD .visual span br + span + br + br + span {
	border-top-left-radius: .4rem;
	border-bottom-left-radius: .4rem;
	border-left-width: .4rem;
	margin-right: .4rem;
	padding-left: .256rem;
}

.visual span br + span + br,
.visual span br + span + br + br {
	display: none;
}

/*.visual span br {
	display: none;
}*/

/*.visual > span > span  > span > span > span > span > span > span { transform: translateZ(80px); }
.visual > span > span  > span > span > span > span > span { transform: translateZ(70px); }
.visual > span > span  > span > span > span > span { transform: translateZ(60px); }
.visual > span > span  > span > span > span { transform: translateZ(50px); }
.visual > span > span  > span > span { transform: translateZ(40px); }
.visual > span > span  > span { transform: translateZ(30px); }
.visual > span > span { transform: translateZ(20px); }
.visual > span { transform: translateZ(10px); }*/

/*.visual:focus > span {
	font-size: .82em;
}*/

/*.visual:focus > span span,
#dynamic .visual > span span {
	background: rgba(255,255,255,.25);
	background: linear-gradient(to bottom,rgba(255,255,255,.25),rgba(255,255,255,1));
}*/

.visual:focus > span > span span:first-child:last-child,
#dynamic .visual > span > span span:first-child:last-child {
	box-shadow: none;
	border: .15rem dashed rgba(0,0,0,.1);
	border-radius: 0;
	/*border-width: .1rem;*/
	background: transparent;
	color: inherit !important;
	transform-origin: 0px 0px;
	-webkit-transform: rotateY(0deg) translateZ(.1px);
	transform: rotateY(0deg) translateZ(.1px);
}

.visual:focus > span .parentheses span:first-child:last-child,
#dynamic .visual > span .parentheses span:first-child:last-child {
	box-shadow: none;
	border: .15rem solid transparent;
	border-radius: 0;
	/*border-width: .1rem;*/
	background: transparent;
	transform-origin: 0px 0px;
	-webkit-transform: rotateY(0deg) translateZ(.1px);
	transform: rotateY(0deg) translateZ(.1px);
}

/*.visual:focus span:first-child:last-child > span {
	font-size: 1.5em;
}*/

/*.visual:focus span:first-child:last-child > span > span > span > span {
	font-size: .82em;
}*/

.visual span:hover {
	/*background: #AD0;
	border-color: #BE0;*/
	/*background: #F00;
	border-color: #F11;
	filter: hue-rotate(20deg) saturate(110%);
	-webkit-filter: hue-rotate(20deg) saturate(110%);*/
	box-shadow: -4px 0px rgba(0,0,0,.3), 0px 0px 0px 0px rgba(0,0,0,.02);
}

/*.visual span:empty:before {
	content: '?';
}*/

.visual:focus span:hover/*,
.visual:focus span br + span,
.visual:focus span br + span + br + span,
.visual:focus span br + span + br + br + span*/ {
	-webkit-transform: rotateY(0deg) translateZ(.1px);
	transform: rotateY(0deg) translateZ(.1px);
	box-shadow: none;
	/*background: transparent !important;
	border-color: transparent;
	border-width: .15rem;*/
	transition: background .5s ease 0s, border .5s ease 0s, box-shadow .5s ease 0s, transform .5s ease 0s, margin .5s ease 0s;
}

/*.visual span:hover > span {
	border-color: green;
}

.visual span:hover > span:hover {
	border-color: red;
}*/

/*.visual:focus span, .visual:focus span:hover {
	filter: none;
	-webkit-filter: none;
	box-shadow: 1px 2px 8px rgba(0,0,0,.1), 0px 0px 0px 1000px rgba(0,0,0,.02);
	background: #AD0;
	border-color: #BE0;
}*/

.visual {
	position: relative;
	
	margin: 0 -3rem;
	padding: .2rem 3rem;
	white-space: nowrap;
	/*transition: font-size .5s linear 0s;*/
	
	/*min-width: 500%;*/
	
	-webkit-perspective: inherit;
	-webkit-transform-style: preserve-3d;
	-moz-perspective: inherit;
	perspective: inherit;
	transform-style: preserve-3d;
	
	/*overflow-x: auto;
	-webkit-overflow-scrolling: touch;*/
	
	transition: padding .5em ease 0s;
}

.visual .visual {
	margin: 0;
	padding: 0;
}

.visual .visual + br[type="_moz"] {
	display: none;
}

.visual .visual > span:first-child:last-child,
.visual .visual > span:first-child:last-child > span:first-child:last-child,
.visual .visual > span:first-child:last-child > span:first-child:last-child > span:first-child:last-child,
.visual .visual > span:first-child:last-child > span:first-child:last-child > span:first-child:last-child > span:first-child:last-child {
	box-shadow: none !important;
	border: none !important;
	border-radius: 0;
	/*border-width: .1rem;*/
	background: transparent !important;
	color: inherit !important;
	transform-origin: 0px 0px;
	-webkit-transform: rotateY(0deg) translateZ(.1px);
	transform: rotateY(0deg) translateZ(.1px);
	
	padding: 0;
}

.visual:focus {
	position: relative;
	z-index: 2;
	background: rgba(255,255,255,.65);
	outline: none;
	/*vertical-align: middle;*/
	/*filter: invert(100%) hue-rotate(180deg);*/
	/*padding: 3rem;*/
}

.try-it-yourself, #plot:not(:empty), #canvas:not([height="1"]) {
	margin-bottom: 1em;
	padding: .256em .516em;
	/*box-shadow: 1px 2px 8px rgba(0,0,0,.05);*/
	box-shadow: 0px 2px rgba(0,0,0,.1);
	background-color: white;
	border: .15rem solid rgba(0,0,0,.15);
	line-height: 2em;
	font-size: .85em;
	border-radius: .5em;
	z-index: 1000;
}

#canvas:not([height="1"]) {
	display: block;
	margin: 1em 0;
	
	/*image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -o-crisp-edges;
	image-rendering: pixelated;
	-ms-interpolation-mode: nearest-neighbor;*/
}

.try-it-yourself {
	/*position: -webkit-sticky;
	position: sticky;
	top: .3em;*/
	
	/*transform: scale(.5) translateZ(25vmin);
	transform-origin: 50% 0%;*/
	/*perspective: none;
	-webkit-perspective: none;*/
}

/*.webkit .try-it-yourself {
	position: relative;
	top: 0;
}*/

.android .try-it-yourself,
.ios .try-it-yourself {
	/*width: 100%;*/
	margin: 1rem -3rem;
	/*color: #FFF;
	background: #B53F51;*/
	background: #87CEEB;
	box-shadow: 0 4px rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 4px 2px -2px rgba(0, 0, 0, 0.2);
	padding: .256rem 3rem;
	padding-top: 150vh;
	padding-top: calc(150vh + .3rem);
	top: -150vh;
	margin-top: -150vh;
	will-change: transform;
	border-radius: 0;
	border: none;
	-webkit-transition: -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
	transition: -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
	transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
	transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s, -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
	z-index: 1000;
}

.android > h2,
.ios > h2 {
	margin: 1rem -3rem;
	/*color: #FFF;
	background: #B53F51;*/
	background: #87CEEB;
	box-shadow: 0 4px rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 4px 2px -2px rgba(0, 0, 0, 0.2);
	padding: .256rem 3rem;
	padding-top: .281rem;
	will-change: transform;
	border-radius: 0;
	border: none;
	-webkit-transition: -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
	transition: -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
	transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
	transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s, -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
	
	position: relative;
	position: -webkit-sticky;
	position: sticky;
	top: -.25rem;
	z-index: 2000;
}

/*.android .try-it-yourself {
	top: -9em;
}*/

.try-it-yourself > input,
.try-it-yourself > textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

#postfix, #flying-postfix {
	word-spacing: 3px;
}

#flying-postfix {
	position: absolute;
	padding: 1em;
	border-radius: 5em;
	border: .15rem solid rgba(0,0,0,.15);
	-moz-appearance: none;
	-webkit-appearance: none;
	box-shadow: 0 .5em rgba(0,0,0,.25);
	
	pointer-events: none;
	transform: translate(-50%,-100%) translate(-0em,-3em) scale(.5) translateZ(10px);
	opacity: 0;
	transition: transform .5s ease-in 0s, opacity .5s ease 0s;
	z-index: 1000;
	
	font-family: Open Sans, sans;
}

#flying-postfix:focus {
	pointer-events: initial;
	transform: translate(-50%,-100%) translate(-0em,-3em) scale(1) translateZ(10px);
	opacity: 1;
	transition: transform .5s ease-in 0s, opacity .5s ease 0s;
}

.centered {
	margin: 0 auto;
	text-align: center;
}

table.lines {
	display: table;
	margin: 1em 0;
	border-spacing: 0;
	text-align: center;
	/*background: #FFD0D0;*/
	border-radius: .5em;
}

table.lines thead td {
	font-weight: bold;
	border-bottom: .2em solid black;
}

/*table th + td, table.has-corner thead td:first-child + td {
	border-left: .2rem solid black;
}*/

table.lines th, table.lines.has-corner thead td:first-child {
	border-right: .2em solid black;
}

/*table th:first-child, table td:first-child {
	border-left: .075rem solid black;
}

table tr:first-child, table thead {
	border-top: .075rem solid black;
}*/

/*table tr + tr > td,
table tr + tr > th {
	border-top: .075rem solid black;
}*/

table.lines tr > td,
table.lines tr > th {
	border-bottom: .075em solid black;
}

table.lines td {
	border-right: .075em solid black;
}

/*table.lines td[rowspan] {
	border-bottom: none;
}*/

table.lines td, table.lines th {
	min-width: 2em;
}

table td, table th {
	padding: .25em .5em;
}

.visual table .visual,
.threeD .visual table .visual {
	margin: -.25em -.5em;
	padding: .25em .5em;
}

.visual .visual > .parentheses,
.threeD .visual .visual > .parentheses {
	margin: 0 0;
}

#dynamic {
	min-height: 40vh;
	min-height: calc(100vh - 33.75em);
	margin: -3rem;
	padding: 3rem;
	margin-bottom: 0;
}

.android #dynamic,
.ios #dynamic {
	/*min-height: 40vh;*/
	background-image: none;
	padding-bottom: 3rem;
	/*box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 4px 2px -2px rgba(0, 0, 0, 0.2);
	border-bottom: .75rem solid #B53F51;*/
}

#dynamic > .visual > h3 {
	/*float: right;*/
	position: absolute;
	right: 3rem;
	width: 30vw;
	text-align: right;
	margin: 0;
	line-height: 1;
	opacity: 0;
	
	-webkit-transform-origin: 0px 0px;
	-webkit-transform: rotateY(-0.5deg) translateZ(10px);
	-webkit-transform-style: preserve-3d;
	transform-origin: 100% 0px;
	transform: rotateY(0.5deg) translateY(1.5em) translateZ(10px);
	transform-style: preserve-3d;
	-moz-perspective: inherit;
	-webkit-perspective: inherit;
	perspective: inherit;
	
	transition: opacity .5s ease 0s;
}

#dynamic > .visual > h3:hover {
	opacity: 1;
}

input[type="text"], #c {
	border: none;
	border-bottom: .15rem solid #C0C0C0;
	border-radius: .2rem;
	-moz-appearance: none;
	-webkit-appearance: none;
	padding: .25rem;
	margin: .125rem 0;
	transition: background-color .2s ease 0s, border-color .2s ease 0s, color .2s ease 0s;
}

input[type="text"]:focus {
	border-color: highlight;
}

.android .try-it-yourself input[type="text"],
.ios .try-it-yourself input[type="text"] {
	background-color: rgba(255,255,255,.25);
	border-bottom: none;
}

.android .try-it-yourself input[type="text"]:focus,
.ios .try-it-yourself input[type="text"]:focus {
	background-color: rgba(255,255,255,.65);
}

#c {
	display: none;
}

/*.android #c, .ios #c {
	display: block;
}*/

a {
	color: #3355AA;
	text-decoration: none;
	/*font-weight: 600;*/
}
a:visited {
	color: #003388;
	text-decoration: none;
}
a:active {
	color: #0088AA;
	text-decoration: none;
}
a:hover, a:focus {
	text-decoration: underline;
}

a[href^='#'], .visual span button {
	color: black;
	text-decoration: none;
	/*font-weight: 600;*/
	border-radius: 5em;
	border: 1px solid rgba(0,0,0,.2);
	border-bottom: .2em solid rgba(0,0,0,.2);
	padding: .2em 1em;
	min-width: 4em;
	min-height: 2em;
	position: relative;
	/*background: linear-gradient(to bottom,rgba(255,255,255,.25),rgba(255,255,255,1));*/
	background-color: white;
	/*background-size: cover;*/
	background-size: 100%;
	background-position: center center;
	-webkit-box-decoration-break: clone;
	-o-box-decoration-break: clone;
	box-decoration-break: clone;
	cursor: pointer;
	/*box-shadow: 0rem 0rem 0rem rgba(0,0,0,.75) inset;*/
	/*transition: box-shadow .3s ease 0s, background-size .3s ease 0s, background-position .3s ease 0s, opacity .3s ease 0s;*/
}
a[href^='#']:active,
.visual span button:active {
	color: #0088AA;
	text-decoration: none;
}
a[href^='#']:hover,
a[href^='#']:focus,
.visual span button:active,
.visual span button:focus,
.visual span button.active {
	color: black;
	text-decoration: none;
	background-color: #D0D0D0;
    outline: none;
	/*background-position: center 40%;*/
	/*border-bottom: 1px solid rgba(0,0,0,.2);
	border-top: .2em solid rgba(0,0,0,.2);*/
}
a[href^='#']:focus,
.visual span button:active,
.visual span button:focus,
.visual span button.active {
	box-shadow: 0rem .3rem rgba(0,0,0,.5) inset;
	background-position: center calc(50% + .3rem);
	background-size: 130%;
	border-bottom-color: transparent;
	/*border-bottom: .2em solid transparent;*/
}
a[href^='#']:first-child {
	/*left: -.5em;*/
}

.visual span button[data-keycode] {
	opacity: .5;
}

.visual span button.black-key {
	color: #D0D0D0;
	background-color: #303030;
}

.visual span button.black-key:active,
.visual span button.black-key:focus {
	color: white;
	background-color: #606060;
}

.visual span button.white-key.active {
	color: white;
	background-color: #3080F0;
}

.visual span button.black-key.active {
	color: white;
	background-color: #80F030;
}	

.visual span table button {
	box-sizing: border-box;
	min-width: 5em;
	min-height: 4em;
	margin: -.25em -.5em;
	padding: .25em .5em;
	border-radius: .5em;
}

.visual span button {
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	-ms-user-select: none;
	user-select: none;
}

.visual span table.hexagonal {
	font-size: .5em;
}

.visual span table.hexagonal button {
	position: relative;
	width: 10em; 
	height: 5.77em;
	margin: .8em -.8em;
	background-size: auto 11.0851em;
	background-position: center;
	border-left: solid 0.2em #808080;
	border-right: solid 0.2em #808080;
	box-sizing: border-box;
}
/*.visual span button:focus,
.visual span table.hexagonal button:focus,
.visual span table.hexagonal button:focus > .hexTop,
.visual span table.hexagonal button:focus > .hexBottom {
	position: relative;
	z-index: 5;
	border-color: #3080F0 !important;
}*/

.visual span table.hexagonal button > .hexTop,
.visual span table.hexagonal button > .hexBottom {
	position: absolute;
	z-index: 1;
	width: 7.07em;
	height: 7.07em;
	overflow: hidden;
	-webkit-transform: scaleY(0.5774) rotate(-45deg);
	-ms-transform: scaleY(0.5774) rotate(-45deg);
	transform: scaleY(0.5774) rotate(-45deg);
	background: inherit;
	left: 1.26em;
	box-sizing: border-box;
}

/*counter transform the bg image on the caps*/
.visual span table.hexagonal button > .hexTop:after,
.visual span table.hexagonal button > .hexBottom:after {
	content: "";
	position: absolute;
	width: 9.6000em;
	height: 5.542562584220408em;
	-webkit-transform:  rotate(45deg) scaleY(1.7321) translateY(-2.7713em);
	-ms-transform:      rotate(45deg) scaleY(1.7321) translateY(-2.7713em);
	transform:          rotate(45deg) scaleY(1.7321) translateY(-2.7713em);
	-webkit-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
	background: inherit;
	left: 0;
	right: 0;
}

.visual span table.hexagonal button > .hexTop {
	top: -3.5355em;
	border-top: solid 0.2828em #808080;
	border-right: solid 0.2828em #808080;
}

.visual span table.hexagonal button > .hexTop:after {
	background-position: center top;
}

.visual span table.hexagonal button > .hexBottom {
	bottom: -3.5355em;
	border-bottom: solid 0.2828em #808080;
	border-left: solid 0.2828em #808080;
}

.visual span table.hexagonal button > .hexBottom:after {
	background-position: center bottom;
}

.visual span table.hexagonal button:after {
	content: "";
	position: absolute;
	top: 0.1155em;
	left: 0;
	width: 9.6000em;
	height: 5.5426em;
	z-index: 2;
	background: inherit;
}

/*cover up extra shadows*/
.visual span table.hexagonal button i {
	display: block;
	position: absolute;
	top:0.11547005383792515em;
	left: 0;
	width:9.6em;
	height:5.5426em;
	line-height:5.5426em;
	z-index: 10;
	/*background: inherit;*/
	box-sizing: border-box;
}

/*.ios span button,
.android span button {
	-webkit-transform-origin: 0px 0px;
	-webkit-transform: rotateY(-0.5deg) translateZ(10px);
	-webkit-transform-style: preserve-3d;
	transform-origin: 100% 0px;
	transform: rotateY(0.5deg) translateZ(10px);
	transform-style: preserve-3d;
	-moz-perspective: inherit;
	-webkit-perspective: inherit;
	perspective: inherit;
}*/

h3 {
	line-height: 1.8;
}

section {
	max-width: calc(60vmax);
	white-space: initial;
	background-color: cornsilk;
	margin: -.25em -.5em;
	padding: 1.5em .5em;
}

.android #main-header,
.ios #main-header {
	position: relative;
	z-index: 2000;
	/*color: white;*/
}

.android #main-header a,
.ios #main-header a {
	color: inherit;
	/*text-decoration: underline;*/
	font-weight: bold;
}

/*@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) {
	
}*/

@media (max-width: 80em) {
	body {
		/*font-size: 1em;
		font-size: 2.4vw;*/
		font-size: calc(0.5em + .5 * (100vmax - 10em) / (80 - 10));
	}
}

@media (max-width: 10em) {
	body {
		font-size: .5em;
	}
}


@media (orientation: portrait) {
	h1 {
		margin-top: 11rem;
	}
	
	.imanuel-logo-container {
		/*display: none;*/
		top: -6rem;
		left: 0;
		font-size: 1.5em;
	}
}