/*
Copyright 2019, Peter Rowntree (PR~). All rights reserved.
http://www.hdyn.com/mail/contact.php?addr=pr
Created Oct 12, 2019 12:18:55 PM.
*/
/* 
    Created on : Oct 12, 2019, 12:18:55 PM
    Author     : Peter Rowntree (PR~)
*/
@font-face {
	font-family: 'Roboto';
	font-display: swap;
	src:  url('/css/KFOmCnqEu92Fr1Mu4mxK.woff2') format('woff2');
}
@font-face {
	font-family: 'Mongolian';
	font-display: swap;
	src:  url('NotoSansMongolian-Regular.ttf');
}
html, body, div, img {
	margin: 0 auto 0 auto;
	padding: 0;
}
html, body, div {
	text-align: center;
}
html, body { 
	height: 100%;
	background-color: black;
	background-repeat: no-repeat;
	background-position: left 8vh;
	margin: 0;
	font: 16px 'Roboto', arial, sans-serif;
	overflow: hidden;
}
.relCenter {
	position: relative;
	margin: 0 auto 0 auto;
}
.warn {
	color: red;
	background-color: yellow;
	border: 1px solid red;
}
img {
	display: block;
	position: relative;
	max-height: 91vh;
	max-width: 100vw;
}
#wrapper {
	display: inline-grid;
	grid-gap: 0.2vmin;
	padding: 0.2vmin;	/*so subtract 0.2 x n (cols or rows) from widths & heights; see resources/max_dim_calcs*/
	position: relative;
	box-sizing: border-box;
	text-align: center;
	background-color: transparent;
	z-index: 2;
}
.c1, .oneCard {
	grid-template-columns: 1fr;
}
.c3 {
	grid-template-columns: repeat(3, min-content);
}
.c4 {
	grid-template-columns: repeat(4, min-content);
}
.c4 img {
	max-width: 24.75vw;
}
.twoPaths {
	grid-template-rows: repeat(3, min-content);
	grid-template-columns: repeat(3, min-content);
}

.threeCards {
	grid-template-columns: repeat(3, 1fr);
}

#wrapper.threeCards img {
	width: 300px;
	height: min(520px, 56.3vw);	/*cards have slightly different heights, so max-width*(300/530)*/
	max-width: 33vw;
	max-height: 88vh;
	object-fit: scale-down;
}
.twoPaths img {
	max-width: 33vw;
	max-height: 30.33vh;
}
.r1, .coin, .threeCards {
	grid-template-rows: min-content;
}
.r4 {
	grid-template-rows: repeat(4, min-content);
}
.r4 img {
	max-height: 22.7vh;
}
#things {	/*whole width things*/
	grid-column: 1 / -1;
}
#tagline.intend {
	color: rgb(100,170,255);
}
#tagline svg {
	fill: rgba(180,180,180,0.8);
	height: calc((3vh + 3vw + 3vmin) / 3);
}
#things, #tagline, #msg {
	color: #fcb;
	text-align: center;
	font-size: calc((3vh + 3vw + 3vmin) / 3);
}
#notes {
	position: absolute;
	top: 8vh;
	left:10vw;
	width: 96vw;
	max-height: 90vh;
	text-align: center;
	background-color: white;
	color: black;
	opacity: 0.8;
	border: none;
	resize: none;
	height: 40vh;
	font-size: calc((3vh + 3vw + 3vmin) / 3.4);
	z-index:3;
}
/*#notes.intend {
	opacity: 1;
}*/
#crossing {
	transform: rotate(270deg);
	grid-column: 2 / 3;
	grid-row: 3 / 4;
	box-sizing: border-box;
	border: 0.2vmin solid black; 
	position: relative;
	z-index: 3;
}
.under-crossing {
	grid-column: 2 / 3;
	grid-row: 3 / 4;
	cursor: pointer;
}
.after-crossing {
	grid-column: 3 / 4;
	grid-row: 3 / 4;
}
img.behind {
	display: none;
}

.btn, #notes {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80vw;
}
.btn {
	margin: 2px auto 2px auto;
	cursor: pointer;
	background-color: #555;
	overflow: hidden;
}
.btn:hover {
	color:#fec;
	background-image:linear-gradient( to top,#779,transparent );
}
img.rev {
	transform: rotate(180deg);
}
/********ctrl***********/
#ctrls, .ctrl, #tagline, #things, #rev {
	display: flex;
	align-items: center;	/*for container; on cross axis*/
	justify-content: center;	/*for container; arrangement along main axis*/
	/*margin: 0;*/
}
#rev {	/*use space even if invisible*/
	visibility: hidden;
}
#things {
	flex-direction: column;
  align-items: stretch;
	height: 80vh;
}
#things div  {
	flex: 1 1 auto;
}
#ctrls {
	width: 100%;
	line-height: 0;
	max-height: 8vh;
	border-bottom:0.2vh groove rgba(255, 255, 255, .5); 
	box-sizing: border-box;
}
#tagline {
	width: 80%;
	flex: 3 3 80%;
	background-color: rgba(0,0,0,0.4);
}
.ctrl {
	display: none;
	flex: 1 1 10%;
}
.ctrl {
	color: white;
	cursor: pointer;
	font-size: 8vh;
	text-align: center;
	position: relative;
	z-index: 4;
	line-height: 0;
	min-height: 8vh;
}
.ctrl svg {
	display: inline;
	width: 100%;	/*chrome (200107) fails to render path without width*/
	height: 8vh;
}
.ctrl path, .ctrl text {
	fill: white;
	fill-opacity: 0.5;
	text-anchor: middle;
	stroke: gray;
	stroke-width: 0.2px;
	height: 100%;
}
.ctrl span {
	opacity: 0.5;
	font-size: 0.7em;
	line-height: 1em;
}
.ctrl:hover {
	background-color: yellow;
}
.ctrl:hover path, .ctrl:hover text {
	fill: blue;
	fill-opacity: 1;
}
.ctrl:hover span {
	color: blue;
	opacity: 1;
}
/*************************/
.ching {
	grid-template-rows: repeat(8, min-content);
	padding-bottom: 1vh;
}
.ching, .number {
	background-image:linear-gradient( to top,#99b,#544 );
}
.ching div, .words {
	grid-column: 1 / -1;
	border: 0;
	line-height: normal;
}
.ching img {
	display: block;
	margin: 0 auto 0 auto;
	grid-column: 1 / -1;
	max-width: 75vw; 
	max-height: 10vh; 
	min-width: inherit;
	min-height: inherit;
}
.ching div {
	max-width: 80vw; 
}
.number #wrapper div, .mongolian #wrapper div {
	font-size: 34vmin;
	border: none;
	line-height: 43vmin;
}
#wrapper div.coin {
	font-size: calc(3vh + 5vmin);
	line-height: calc(3vh + 5vmin);
	color: #aaa;
}
.coin img {
	max-height: 60vh; 
}
.mongolian {
	background-color: #888;
}
#wrapper.emoji {
	background-color: white;
	width:100vw;
}
#rightCtrl {
	display: inline;
}
.mongolian #wrapper {
	font-family: Mongolian, sans-serif;
	writing-mode: vertical-lr;
	text-orientation: mixed;
	line-height: normal;
	background-color: transparent;
}
div.words {
	font-size: calc(3vh + 4vmin);
	line-height: calc(3vh + 4vmin);
	line-height: normal;
	min-width: 99.6vw;
	color: #aaa;
}
#topRow {
	color: #99b;
	padding: 1vh 0 2vh 0;
	font-size: 5vmin;
	max-width: 75vw; 
}
#topRow div {
	font-size: 7vmin;
}
#things, #again, #msg {	/*default invisible things*/
	display:none;
}
#msg {
	position: absolute;
	width: 60vw;
	left: 20vw;
	top: 5vh;
	z-index: 5;
	background-color:white;
	color: green;
	box-sizing: border-box;
	border: 1px solid green;
	padding: 1vmax;
	hyphens: auto;
	transition: all 0.75s ease 0s;
}