@charset "UTF-8";
*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body{
	--backgroundColor: white;
	--primaryColor: black;
	--secondaryColor: rgba(232,211,185,.85);
	font-family:Verdana, Geneva, Tahoma, sans-serif;
	height: calc( 100 * var(--vh) ); width: 100vw; font-size:16px; margin:0;padding:0; background-color:var(--backgroundColor);
}

@keyframes colorStroke {
	0% {
		stroke:#fff;
	}
	100% {
		stroke:#666;
	}
}
@keyframes drawBorder {
	0% {
		background-size:
		0 var(--borderWidth),
		var(--borderWidth) 0,
		0 var(--borderWidth),
		var(--borderWidth) 0;
	}
	50% {
		background-size:
		100% var(--borderWidth),
		var(--borderWidth) 0,
		0 var(--borderWidth),
		var(--borderWidth) 100%;
	}
	100% {
		background-size:
		100% var(--borderWidth),
		var(--borderWidth) 100%,
		100% var(--borderWidth),
		var(--borderWidth) 100%;
	}
}
@keyframes drawShadow {
	0% { box-shadow: rgba(14, 30, 37, 0.12) 0px 0px 0px 0px, rgba(14, 30, 37, 0.32) 0px 0px 0px 0px; }
	70% { box-shadow: rgba(14, 30, 37, 0.12) 0px 0px 0px 0px, rgba(14, 30, 37, 0.32) 0px 0px 0px 0px; }
	100% { box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; }
}
@keyframes fadein {
	0% { opacity: 0 }
	100% { opacity: 1 }
}
picture{ display: grid; position: relative; place-content: center;height: min-content;} /* https://stackoverflow.com/questions/38361657/why-does-my-html5-picture-have-a-height-outside-of-its-img-and-why-does-it-n */
/* video { width: auto; height: var(--videoClientHeight, 100%) } */
video { width: 100%; 	height: var(--videoClientHeight, auto);}
.highlightPath{
	animation: colorStroke 1.5s cubic-bezier(0.6, -0.28, 0.735, 0.045) 4 forwards alternate 
}
::cue {
	color:#ccc;
}

input:focus {
	outline:none;
}
.clickCursor{
	position: absolute;
	z-index: 100;
	pointer-events: none;
	-webkit-transform:translate( calc(var(--x)*1px) , calc(var(--y)*1px));
	transform:translate( calc(var(--x)*1px) , calc(var(--y)*1px))
}
.templateTable{
	display: grid;
	grid-auto-flow: row;
	align-content: center;
	width: 60vw;
	grid-template-columns: repeat( var(--totalColumn), minmax(6vw, auto) );
	padding: .25rem;
}
.templateTable--header{
	border-bottom: 1px solid #999;
	background-color: #ddd9;
}
.templateTable--content:nth-last-child(2),
.templateTable--content:last-child{
	border-bottom: 1px solid #999;
}
.templateTable--content:nth-child(4n+1),
.templateTable--content:nth-child(4n+2){
	background-color: #eee;
}
.templateTable--header,
.templateTable--content{
	padding: .25rem;
}
/* Accordion styles */
.slideMenu{
	position: absolute;
	z-index:5;
	top: calc( var(--contentMarginTop) + var(--headerHeight) );
	overflow: hidden;
	width: 25vw; /* cannot use 25% coz if menu overflows y, vertical scroll-bar will appear on the right of the displaying screen and thus 25% of screen-width will be updated automatically, resulting in a sudden reduced in menu width */
	border-radius: 0 1rem 1rem 0;
	box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
	transition:opacity .35s ease,transform .25s ease;
	--slideMenu_translateX:calc( -100% + 2rem )
}
.slideMenu_translateX > .hideWithSlideMenu{
	pointer-events: none;
	opacity: 0
}
.slideMenu_translateX{
	transform:translateX(var(--slideMenu_translateX,-100%) );
	border-radius: unset;
	box-shadow: unset;
}
.maxHeight0{max-height: 0;}
/* aaa data-tooltip not visible in overflow */
/* [data-tooltip]:not([data-tooltip=""]){
	position:relative;
}
[data-tooltip]:not([data-tooltip=""]):hover::before{
	position:absolute;
	z-index:10;
	overflow:visible;
	content:attr(data-tooltip);
	font-size:.8rem;
	left: calc( 100% - .5rem );
	padding:.5rem;
	background-color:#fff9;
} */
.noWrappingSpace{
	transform:scaleY(0);
	opacity: 0;
	max-height: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.tab-label.active{
	background: #1a252f;
}
.tab-label.active::after {
	transform: rotate(90deg);
}
.menuLabelContainer{
	display: grid;
	grid-template-columns: 1fr auto auto;
	background: #2c3e50cc;
}
.rootCategoryContainer{
	background: #2c3e50cc;
}
.menuContent--taglistContainer,
.taglistContainer{
	display: grid;
	gap: 0.5rem;
	grid-auto-flow: column;
	align-items: center;
	justify-items: start;
	background: #2c3e50cc;
	place-content: flex-end;
}

.taglistContainer{border-bottom:#999 solid 2px;}
.hideWithSlideMenu,
.taglistContainer,
.menuLabelContainer{
	width: 100%;
	color: white;
	overflow: hidden;
	transition:opacity .35s ease;
}
.menuLabel,
.tagLabelContainer,
.closeLabelContainer,
.tab-label{
	position:relative;
	display: flex;
	justify-content: space-between;
	padding: .5rem;
	background: #2c3e50cc;
	font-weight: bold;
}
label.tab-label{cursor: pointer}
.tab-label:hover {
	background: #1a252f;
}
.tab-label::after {
	content: "❯";
	width: 1em;
	height: 1em;
	text-align: center;
	transition: transform .35s ease;
}
.tab-content {
	padding: 0 0 0 .5em;
	color: #2c3e50;
	background: #3339;
	transition: max-height .25s ease;
}
.closeLabelContainer{
	align-items: center;
}
.tagLabelContainer{
	display: grid;
}
.tagLabelContainer > .tagLabel{
	grid-area:1/1 ;
}
.menuContent--taglistContainer,
.menuContentContainer > .tagLabelContainer,
.menuContentLabelContainer{
	background: #666c;
	margin: .25rem 0;
	padding: .2rem 1rem .2rem .25rem;
	place-content: flex-end;
	transition: transform .35s ease, opacity .35s ease, max-height .15s .3s, padding .15s .3s, margin .15s .3s;
}
.tagLabel{
	font-size: 0.7em;
	background-color: #ccc;
	color:#000;
	cursor: pointer;
	transition: background-color .5s ease,transform .15s ease, opacity .35s ease;
	box-shadow: 4px 4px 4px 4px #222c;
	padding:0 0 0 1rem;
	border: #ccc solid 1px;
	border-radius:1rem;
}
.tagLabel--static{
	border: #ccc solid 1px;
	border-radius:1rem;
	font-size:.8em;
	background-color: #eee;
	padding: .2rem;
}
.tagLabel.crossOnActive{
	padding: .2rem .25rem .2rem .5rem;
}
.tagLabel.crossOnActive::after{
	content: "\00d7"; /*X*/
	opacity:0;
	transition:opacity .35s ease,color .25s ease;
	padding: 0 .1rem;
}
.tagLabel.active.crossOnActive::after{
	opacity:1;
}
.tagLabel.active{
	background-color: unset;
	color: #eee;
	box-shadow: unset;
}
.tagLabel.cross.active{
	border: unset;
	border-radius:unset;
}
.tagLabel.cross{
	padding: .125rem;
	font-size: 1rem;
}
.tagLabel.cross::before{
	content: "\00d7";
}
.tagLabel.cross.active::before{
	content: "\2630";
	color:#ccc;
}
.contentHintIconContainer{
	align-self: end;
}
.contentHintIcon{
	cursor: pointer;
	transition:opacity .35s ease;
}
.contentHintIcon.background--chips{
	background: #ccc;
	border-radius:1rem;
	border: #0000 solid 1px;
}
.contentHintIcon::after{
	padding: .25rem .5rem
}
.contentHintIcon.active{
	opacity:.5;
}
.menuContentContainer{
	display:grid;
	grid-template-columns: 1fr auto;
}
.menuContent{
	color: #fff;
	box-shadow: 2px 2px 6px #9ffa;
	background: firebrick;
	padding: 0.3rem;
	cursor: pointer;
}
.icon--undefined{
	display: none;
}
.icon--magnifier::after{
	content: "🔍";
}

.icon--speech::after{
	content: "🗣️";
}

.zoomIn{transform:scale(1.45)}

#view{
	--headerHeight:1.2rem; --headerFontSize: 1rem; 
	--footerHeight:5rem;
	--contentSpaceTop: 2rem; --contentMarginRight: 3rem; --contentMarginTop: 1rem;
	--foregroundColor:#f8f5ed;
	display:grid; background-image:url("media/bg.png");
	height: 100%; width: 100%;
	grid-template-rows: var(--headerHeight) auto var(--footerHeight);
}
.firstPage{
	text-align: center;
	align-self:center;
	font-family: sans-serif;
	font-size: 3rem;
	margin: 1.5rem;
	line-height: 1.5;
	place-content: center;
}
.firstPage.smallerText{
	font-size: 2rem;
}
.infoContainer{
	display: grid;
	grid-auto-flow: row;
	align-content: center;
	justify-items: end;
	font-size: .7rem;
}
.siteCounter{
	height: 0.8rem;
	vertical-align: text-top;
}
figure.videoContainer {
	max-width:100vw;
	width:100%;
	height:100%;
	/* width: 800px; */
	display: grid;
	justify-content: center;
}
/* controls */
.controls, .controls li {
	padding:0;
	margin:0;
}
.controls{
	z-index:17;
	display: flex;
	list-style-type:none;
	gap: 0.2rem;
	opacity: .5;
	padding: 0.1rem;
	/* height: 2rem; */
	align-self: flex-end;
}
.controls.start {
	align-self: flex-start;
}
.controls.end {
	align-self: flex-end;
}
.controls button {
	/* line-height: 1.5; */
	border: unset;
	background: unset;
	/* height: 1.5rem; */
	font-size: 1.2rem;
	cursor: pointer;
}
#playpause.paused::before{
	content: attr(data-before-paused);
}
#playpause:not(.paused)::before{
	content: attr(data-before-notPaused);
}
input.switch{display:none}
.switchTarget{
	-webkit-transition: opacity .15s ease-out;
	transition: opacity .15s ease-out;
}
input.switch:checked~.switchTarget{
	opacity:0;
}
input.switch:checked~.switcher::before{
	content: attr(data-before-switcherOff);
}
.switcher::before{
	content: attr(data-before-switcherOn);
}
.controls .progressBarContainer{
	--border-radius: 5px;
	position: relative;
	width: 100%;
}
.controls progress {
	position: absolute;
	z-index: 1;
	left:0;
	cursor:pointer;
	width:100%;
	height:1.6rem;
	opacity:.5;
	/* border:2px solid #aaa; */
	display:inline-block; /*CANNOT remove, since it defines element's offsetWidth, which is used in JS() determining user-click proportion on progress bar*/
	vertical-align: -webkit-baseline-middle; /* by try and error */
}
.controls .progress-bar {
	pointer-events: none;
	position: absolute;
	z-index: 2;
	left:0;
	height:100%;
	width:100%;
	transform-origin: left;
	transform: scaleX(var(--scaleX,0));
	background-color:#2a84cd;
	border-radius: var(--border-radius) 0 0  var(--border-radius);
	-webkit-transition: transform .15s ease-out;
	transition: transform .15s ease-out;
}
.controls .progressButton{
	display: flex;
	width: 100%;
}

.headerContainer{
	margin: var(--contentMarginTop) var(--contentMarginRight);
}
.header{
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
}
.breadcrumbContainer{
	display:grid;
	grid-auto-flow: column;
	justify-content: start;
	color:navy; font-size:var(--headerFontSize); font-family:Verdana, Geneva, Tahoma, sans-serif;
	/* margin: calc( var(--headerHeight)/2 - var(--headerFontSize)/2 ) auto; */
}
.breadcrumb:not(:empty):not(:first-of-type):not(.displayNone)::before {
	content: ">";
	font-size: 0.8rem;
	padding: 0 0.3rem;
	display: inline-block;
	height: 1rem;
}
.breadcrumb > button{
	padding:0 0.5rem;
	cursor: pointer;
	border-width: 1px; border-color: #0003;
}
.breadcrumb > button:not(:empty)::after {
	content: "";
	--u:.5rem;
	margin-left: 0.5rem;
	transform: rotate(90deg);
	border-top:calc(var(--u)*.5) solid #0000;
	border-bottom:calc(var(--u)*.5) solid #0000;
	border-left:calc(var(--u)*.75) solid;
	width:calc(var(--u)*.75);
	display: inline-flex;
	background-color:#0000;
}
#debug:empty{
	display:none;
}
.contentContainer{
	display: grid; background-color: var(--foregroundColor);
	position: relative;
	padding: calc( var(--contentSpaceTop) - var(--contentMarginTop) );
	margin: var(--contentMarginTop) var(--contentMarginRight);
}
.footerContainer{
	display: grid;
	grid-auto-flow: column;
	justify-content: start;
	gap: 2rem;
}
.pageControl {
	top:50%;
	width: 100%;
	font-size: 1.5rem;
	z-index: 1;
}
.logo{
	cursor: pointer;
	max-height: var(--footerHeight); place-self: center; padding:1rem
	/* https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
}
.pageControl-progress{width:66vw}
.pageControl-backward,
.pageControl-forward{
	opacity: .7;
	-webkit-transition: opacity 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition: opacity 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.pageControl-progress:hover,
.pageControl-backward:active,
.pageControl-forward:active
{
	cursor:pointer; opacity: 1;
}
.multipleChoices {
	/* display:grid;grid-template-rows: 2fr 5fr 1fr; place-items:center; padding: 0; margin: 0; */
	background-color:pink;
}
.iframe{
	width: 100%;
	height: 100%;
	position: absolute;
	padding: 3rem;
	border: 0px;
}
.content{
	display: grid;
	grid-auto-flow: column;
	gap: 2rem;
	max-height: calc( 100 * var(--vh) - var(--headerHeight) - var(--footerHeight) - var(--contentSpaceTop)*2 - var(--contentMarginTop)*2 - 4px);
	justify-content: center;
	transform-origin: center;
	position: relative;
	-webkit-transition:opacity 1.5s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform .5s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition:opacity 1.5s cubic-bezier(0.075, 0.82, 0.165, 1), transform .5s cubic-bezier(0.075, 0.82, 0.165, 1);
	align-items: center;
}
.content picture{
	transform-origin: top;
	transition: transform .35s ease;
	-webkit-user-select: none;
	-moz-user-select: -moz-none;
	/*IE10*/
	-ms-user-select: none;
	user-select: none;
	display: grid;
}
.content img,
.content svg {
	max-height: calc( 100 * var(--vh) - var(--headerHeight) - var(--footerHeight) - var(--contentSpaceTop)*2 - var(--contentMarginTop)*2 - 4px  - var(--phoneHeightCorrection, 0px));
}
.content img{/* <picture>, as the parent of <img>, is grid in order to solve the non-zero height of <picture> issue*/
	grid-area: 1 / 1;
	max-width: 100%;
	place-self: center;
}
.svgCamera{
	overflow:scroll;
}
.svgCameraFocus{
	width:40vw;
	height:100%;
}

.isButton_false{
	pointer-events: none !important; 
}

.isButton_true{
	--borderWidth: 3px;
	background-repeat: no-repeat;
	background-image:
	linear-gradient(to right, #C9C9C9 100%, #C9C9C9 100%),
	linear-gradient(to bottom, #C9C9C9 100%, #C9C9C9 100%),
	linear-gradient(to right, #C9C9C9 100%, #C9C9C9 100%),
	linear-gradient(to bottom, #C9C9C9 100%, #C9C9C9 100%);
	background-size:
	100% var(--borderWidth),
	var(--borderWidth) 100%,
	100% var(--borderWidth),
	var(--borderWidth) 100%;
	background-position:
	0 0,
	100% 0,
	0 100%,
	0 0;
	box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
	-webkit-transform: matrix(1,0,0,1,0,0);
	transform: matrix(1,0,0,1,0,0);
	-webkit-transition: -webkit-transform ease-in .25s;
	transition: transform ease-in .25s;
}
.isButton_true.transformOnClick_true:active{
	-webkit-transform: matrix(.96,0,0,.96,0,0);
	transform: matrix(.96,0,0,.96,0,0);
}
.popMenu{
	position:absolute;
	z-index: 100;
	background: #fff; font-size: .8rem; font-family:Arial, Verdana, Geneva, Tahoma, sans-serif; color:chocolate;
	padding: .5rem 2rem; border-radius: 5px; border: 3px #bbb2 solid; z-index: 2; max-width: 40vw;
	/* box-shadow: 5px 5px 5px aliceblue ; */
	display:grid; grid-template-columns: auto;
	/* display:grid; grid-template-columns: auto auto; */
	-webkit-transition:opacity .25s ease-out, -webkit-transform .15s ease-in-out;
	transition:opacity .25s ease-out, transform .15s ease-in-out;
}
.popMenu.disabled{
	-webkit-transition:unset;
	transition:unset;
}
.popMenu--header{
	border-bottom: 1px solid #ddd; 
}
.popMenu--close{
	position:absolute; right:.5em; top:.5em;
	cursor:pointer; font-size: .5rem;
	/* cursor:pointer; background-color:whitesmoke; */
	/* border-radius: 50%; border: 1px #bbb solid; */
}
.popMenu--option:hover{
	background: #fbb;
	cursor:pointer;
}
.popMenu--progressPagination{
	display:unset;
	cursor:pointer;
}
.contentLabel{
	font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.content--legend-top{
	text-align: center;
	height:2rem;
	/* display:flex; */
	/* align-items: center; */
	margin: auto;
}
.content--legend-top:not([data-before=""])::before{
	font-family: yuseiMagic, Verdana, Geneva, Tahoma, sans-serif;
	font-size: 1.5rem; color:#6b705c;
	background-color: var(--foregroundColor);
	border: black 1px solid;
	border-radius: .5rem;
	padding: .6rem 1rem !important;
}
.content--legend-extra,
.content--legend-right,
.content--legend-left{
	position: absolute;
	z-index: 10;
	bottom: 50%;
	display: flex;
	justify-content: center;
}
.paginationPrimary{
	--u:2rem;
	opacity:.2;
	cursor:pointer;
}
.content--legend-extra:not([data-before=""]) {
	right: 0;
	width: calc(100% + 2rem);
	border: 1px black solid;
	background-color: var(--secondaryColor); 
	padding: .5rem;
	pointer-events: none;
}
.content--legend-extra.end {
	bottom: 2rem;
	transform: translateX(1rem);
}
.content--legend-extra.start {
	bottom: unset;
	top: 2rem;
	transform: translateX(1rem);
}
.content--legend-extra[data-before=""] {
	border: unset;
	padding: 0;
}
.content--legend-left{
	left: 0;
	transform: translate(1rem, 50%);
}
.content--legend-right{
	right: 0;
	transform: translate(-1rem, 50%);
}
.content--legend-bottom {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
	display: grid;
	grid-auto-flow: column;
	gap: .5rem;
	--u: .75rem;
}
.content--legend-bottom.start {
	left: 0;
}
.content--legend-bottom.center {
	padding: .5rem;
}
.content--legend-bottom.end {
	left: unset;
	right: 0; 
	transform: translate(0, 150%);
	padding: .5rem;
	background: var(--backgroundColor);
}
[data-before]:not([data-before=""])::before{
	content: attr(data-before);
	line-height: 1.5;
}
[data-after]:not([data-after=""])::after{
	content: attr(data-after);
	line-height: 1.5;
}
.contentExtra::before{
	display: block;
	padding: 1rem;
}
.contentHint{
	place-self: flex-end;
	display: grid;
	place-content: center;
	z-index: 5;
	width: 3rem;
	height: 3rem;
	TRANSFORM: translate(28%,28%);
	background-color: white;
	padding: .6rem;
	border: 1px solid;
	border-radius: 50%;
	cursor:pointer;
	/* transition: background-color ease .85s, opacity ease-out 3.5s; */
}
.contentHint>img{
	width: 100%; height: 100%;
	transition: opacity cubic-bezier(0.455, 0.03, 0.515, 0.955) .45s;
}
.contentHint.hintTap>img#hintAudio{
	opacity:0;
}
.contentHint.hintAudio>img#hintAudio{
	opacity:1;
}
.contentHint.hintTap.hintAudio>img#hintTap{
	opacity:0;
}
.overlapByGrid {grid-area: 1/1}
.firstPlayButton{--u:4rem}
.flipX{transform:rotate(180deg)}
.colorWhite{color: #fff}
.-cg-439001 {display:inline-grid;align-items:center;justify-content:center;z-index:16;cursor:pointer;}
.-cg-439001::before{/*play a song*/
	grid-area: 1/1;content:"";border-width:0;border-style:solid;
	border-top:calc(var(--u,.5rem)*.5) solid rgba(0,0,0,0);
	border-bottom:calc(var(--u,.5rem)*.5) solid rgba(0,0,0,0);
	border-left:calc(var(--u,.5rem)*.75) solid;
	margin: auto;
	transform: translateX(calc(var(--u,.5rem)*.1));
}
.-cg-439001.circled::after{grid-area: 1/1;content:"";border-radius:50%;border:.2em solid #fff;width:calc(var(--u,.5rem)*2);height:calc(var(--u,.5rem)*2);}
.hamburgerMenu {
	display:grid;
	height: 1rem;
	gap: 0.1rem;
	cursor:pointer;
	margin-right:1rem;
}
.hamburgerMenu:before,
.hamburgerMenu:after,
.hamburgerMenu span {
	content: "";
	background-color:var(--primaryColor);
	width: 1.2rem;
	border-radius: 3px;
	transition: 0.35s transform;
}
.hamburgerMenu:before {
	transform-origin: top left;
}
.hamburgerMenu:after {
	transform-origin: bottom left;
}
.hamburgerMenu.opened:before {
	transform: rotate(45deg);
}
.hamburgerMenu.opened:after {
	transform: rotate(-45deg);
}
.hamburgerMenu.opened span {
	transform: scale(0);
}
.mc-container{
	display: grid;
	gap: 1rem;
	position: relative;
	/* background-color: rgba(160, 240, 220, .1); */
	max-width:80vw
}
.mc-choiceContainer,
.mc-questionLabelContainer{
	display: grid;
	align-items: start;
	position: relative;
	/*/ width: 100%; */
	counter-reset: riddleCounter 0;
}
.mc-questionLabelContainer{
	place-items: center;
}

.mc-questions,
.mc-result,
.mc-choices{
	grid-area:1/1 ;
	display: grid;
	gap: 1rem;
	width: 100%;
	-webkit-transition: opacity .25s ease-in;
	transition: opacity .25s ease-in;
}
.mc-container::after{
	content:"";
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	filter: none;
	-webkit-transform:scaleY(0);/* !:ios do NOT support scaleY(0%); */
	transform:scaleY(0);
	-webkit-transform-origin: center 0;
	transform-origin: center 0;
	-webkit-transition: .1s -webkit-transform .35s,filter .6s;
	transition: .1s transform .35s,filter .6s;
}
.mc-container.preparing .mc-starter{
	display: unset;
}
.mc-container.preparing::after{
	background-color: #9ac5;
	filter: blur(2px) brightness(.5);
	-webkit-transform:unset;
	transform:unset;
}
.mc-choices{
	grid-template-columns: repeat( var(--totalColumn,2), 1fr);
}
.mc-question-label.active,
.mc-answer.active,
.mc-result.active,
.mc-choices.active{
	opacity: unset;
}
.mc-question-label.active,
.mc-choices.active{
	pointer-events:unset
}
.mc-answerContainer{
	display: grid;
	/*/ width: 100%; */
	gap: 1rem;
	grid-auto-flow: column;
	counter-reset: riddleCounter 0;
}
.mc-answer{
	display: grid;
	place-items: center;
	position: relative;
	opacity: .2;
	-webkit-transition: opacity .5s ease-out;
	transition: opacity .5s ease-out;
}
.mc-answer.smallLabel{
	place-items: end;
}
.mc-answer.smallLabel > .mc-answer-label{
	width: 40%;
	padding: .2rem;
}
/* mc-answer moving border */
.mc-answer::after{
	content: "";
	visibility: hidden;
	width: 100%;
	border-bottom: 2px solid palevioletred;
	-webkit-transform: translate(-100%,2px);
	transform: translate(-100%,2px);
	-webkit-transition: -webkit-transform .5s ease-out;
	transition: transform .5s ease-out;
	pointer-events: none;
} 
.mc-answer.active::after {
	visibility: unset;
	-webkit-transform: translate(0,2px);
	transform: translate(0,2px);
}
.mc-answer.visited::after {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	/* opacity: 0; */
	visibility: hidden;
}
/* mc-answer-image mask */
.mc-answer::before{
	position: absolute;
	content:"";
	z-index: 1;
	width: 100%; height: 100%;
	background-color: lightyellow;
	-webkit-transition: opacity .35s;
	transition: opacity .35s;
}
.mc-answer.visited{
	opacity: .2;
}
.mc-answer.active::before,
.mc-answer.visited::before{ opacity: 0;}
.answerCheckSVG{
	transform: scale(.1);
	transform-origin: bottom right;
}
.mc-choices:not(.active)>.mc-choice, /* choices of former & latter questions */
.mc-choice.visited{ /* choices that have been clicked */
	filter: contrast(0.6) blur(0.5px) opacity(.4); 
	-webkit-transform: translateY(3px);
	transform: translateY(3px);
	pointer-events:none;
	opacity: unset;
	-webkit-transition: .35s -webkit-transform , .45s filter .45s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transition: .35s transform , .45s filter .45s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@supports (background: paint(something)) {
	@property --score {
		syntax: "<integer>";
		initial-value: 0;
		inherits: true;
	}
}

.mc-resultBar::before{
	content: "Overall";
	position: absolute;
	right: 100%;
	margin-right: 0.4rem;
}
.mc-resultBar:not(.isOverall)::before{
	counter-increment: riddleCounter;
	content: "Q" counter(riddleCounter);
}
.mc-resultBar{
	position: relative;
	color: gray;
	height: 1rem;
	width: 100%;
	/* background-image but NOT background-color: as stated officially, the latter NOT work with multiple values, reasons unknown */
	background-image:
	linear-gradient(to right, darkcyan,darkcyan),
	linear-gradient(to right, darkseagreen,darkseagreen),
	/* accumulative bar chart  */
	/* linear-gradient(to right, darksalmon calc( (40/var(--score,3)) * 1% ) ,darkseagreen calc( (40/var(--score,3)) * 1%) 100%), */
	linear-gradient(to right, darksalmon,darksalmon),
	linear-gradient(rgba(200, 240, 240, .35),rgba(200, 240, 240, .35));
	/* conditional CSS variable workaround: height negatived so unqualified background-color won't show*/
	background-size:
	calc( var(--score,0)*1% ) calc( (var(--score,0) - 99.9)*1% ),
	calc( var(--score,0)*1% ) calc( (var(--score,0) - 40)*1% ),
	max( calc( var(--score,3)*1%), 3% ) max( calc(var(--score,3)*1%), 3% ),
	100%;
	/* CSS default repeat bg, which will undesirably span 100% regardless of width; height set as repeat for qualified bg to span through regardless of the calculated height. eg 43% won't show (since calc( 43 - 99.9)*1% ) = -ve), but fully show as 100% height even though calculated height=3% (since background-repeat) */
	background-repeat: no-repeat repeat;
	/* IOS Safari not supports css houdini, so we transition on background-size & left */
	-webkit-transition: 1.5s background-size .5s, 1.5s left .5s;
	transition: 1.5s --score .25s;
	counter-reset: scale-x var(--score);
}
.mc-resultBar::after{
	content: counter(scale-x) "%";
	position: absolute;
	left: calc( max( var(--score,3)*1%, 3% ) + .2rem);
}
.mc-starter,
.mc-choice{
	cursor: pointer;
	background-color: white;
	width: 100%;
	border: 1px solid;
	padding: .4rem;
	border-radius: 2rem;
	filter: drop-shadow(2px 4px 6px black);
}
.mc-starter{
	z-index: 2;
	grid-area:1/1;
	top: 50%;
	height: 3rem;
	width: 50%;
	justify-self: center;
	display: none;
}
.mc-choice-label{
	font-size: 1.5rem;
	white-space: pre-line;
	pointer-events: none;
}
.mc-question-label,
.mc-answer-label{
	grid-area: 1/1;
	z-index: 5;
	background-color: white;
	border: 1px solid;
	border-radius: .2rem;
	text-align: center;
	width: 80%;
	padding: 0.5rem;
	transition: background-color .35s;
}
.mc-question-label{
	margin:1rem;
	white-space: pre-line;
}
.mc-question-label:nth-child(even){
	background-color: ghostwhite;
}
.mc-question-label:nth-child(odd){
	background-color: ivory;
}
/* .mc-question-label::before, */
.mc-answer-label::after{
	counter-increment: riddleCounter;
	content: "Q" counter(riddleCounter) " ";
	filter: opacity(.85);
	white-space: pre-line;
}
.mc-answer.visited>.mc-answer-label::after{
	content: attr(data-visitedLabel);
}
.mc-choice.visited>.answerCheck,
.mc-answer.visited>.answerCheck{
	opacity: 1;
}
.mc-choice>.answerCheck,
.mc-answer>.answerCheck{
	position: absolute;
	z-index: 100;
	right: -0.8rem;
	bottom: -0.8rem;
	opacity: 0;
	pointer-events: none;
}
.mc-question-image{
	height: 30vh;
}
.mc-answer-image{
	height: 12vh;
	position: relative;
	display: block;
}
.mc-question-image.enlargeInitImage_true.enlarge{
	--scale:1.6;
	-webkit-transform:scale( calc(var(--scale,1)*1) );
	transform-origin: top;
	transform:scale( calc(var(--scale,1)*1) );
	-webkit-transition: .25s -webkit-transform;
	transition: .25s transform;
}
.noSelect {
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.noSelect:focus {
	outline: none !important;
}
.opacity0{ opacity:0 }
.disabled { opacity: 0; pointer-events:none }
.eventDisabled { pointer-events:none !important; cursor: unset !important; }
.displayNone,
.display_false,
input[id*='Control-']
{ display:none }
.display_true{ display:block }
.beforeUnderlined::before{border-bottom:1px #0009 solid;padding-bottom:.15rem !important;}
.basicTransition{ 
	-webkit-transition:opacity .35s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform .35s cubic-bezier(0.075, 0.82, 0.165, 1);
	transition:opacity .35s cubic-bezier(0.075, 0.82, 0.165, 1), transform .35s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.padding2rem{padding:2rem}
.marginAuto{ margin:auto}
.gridFirst{order:10}
.gridSecond{order:20; max-width:40vw}
.cursorPointer{cursor: pointer;}
.asiaMapCountry{ background-color:lightblue; transition: filter cubic-bezier(0.455, 0.03, 0.515, 0.955) .15s }
video{ transition: filter cubic-bezier(0.455, 0.03, 0.515, 0.955) .85s }
.asiaMapCountry path.asiaMap{stroke:none; stroke-width:.5rem; }
.asiaMapCountry tspan.asiaMap{pointer-events: none; }
.asiaMapCountry.clickable .asiaMap{cursor:pointer; }
video.preparing{filter:blur(4px) opacity(.7) brightness(.7)}
.pop-Y { transform: scaleY(0) }
.pop-XY { transform: scale(0,0) }
.pop-X { transform: scaleX(0) }
.pop-from1{ transform-origin:top left}
.pop-from2{ transform-origin:top center}
.pop-from3{ transform-origin:top right}
.pop-from4{ transform-origin:center left}
.pop-from5{ transform-origin:center center}
.pop-from6{ transform-origin:center right}
.pop-from7{ transform-origin:bottom left}
.pop-from8{ transform-origin:bottom center}
.pop-from9{ transform-origin:bottom right}
#content{
	--firstAnimation:1;
}
/* REF: original https://codepen.io/paolocavanna/pen/qNKAyX */


.drawButton_true{
	/* box-shadow: rgba(14, 30, 37, 0.12) 0px 0px 0px 0px, rgba(14, 30, 37, 0.32) 0px 0px 0px 0px; */
	animation:
	drawBorder 1.75s cubic-bezier(0.19, 1, 0.22, 1) var(--firstClickableAnimation),
	drawShadow 2s ease-out var(--firstClickableAnimation) ;
}
.hintFadeIn_true{
	animation: fadein .25s ease-in var(--firstClickableAnimation) ;
}
@media only screen and (max-width:1650px){
	body { font-size:14px }
	.mc-question-image {
		height: auto;
		width: 50vw;
	}
}
@media only screen and (max-width:1024px){
	body { font-size:11px }
	/* picture{ padding-bottom: 141.07%;} https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ */
	.firstPage{
		font-size: 1.4rem;
		margin: .8rem;
		line-height: 1.2;
	}
	.slideMenu{
		width:45vw;
	}
	#clickCursor,
	#progressPagination,
	.contentHintIcon,
	.popMenu.displayPopMenuFromCursor,
	.paginationPrimary{
		display:none;
	}
	#view{
		--headerHeight:1.2rem; --headerFontSize: .8rem; 
		--footerHeight: 3rem;
		--contentSpaceTop: .5rem;
		--contentMarginTop: .5rem;
		--contentMarginRight: 2px;
		--phoneHeightCorrection: 30px;
		--firstAnimation:-1;
		background-size: contain;
		background-repeat: no-repeat;
	}			
	.content--legend-top:not([data-before=""])::before{
		font-family:Arial;
		font-size: .6rem; color:#6b705c;
		border: black 0px solid;
		padding: 0 .5rem;
		background-color: transparent;
	}
	
	.content--legend-bottom.end{
		transform: translate(-50%, -20%);
		left: 50%;
		padding: 0;
		right: unset;
		font-size: 1rem
	}
	.content{
		/* grid-template-rows: calc(20 * var(--vh)) calc(50 * var(--vh)); */
		/* grid-template-rows: repeat(var(--col,1),min-content); */
		grid-template-rows: min-content;
		gap: .5rem;
	}
	.svgCameraFocus{
		width: 100%;
		height: calc(20 * var(--vh));
	}
	.gridSecond{
		grid-area: 2/1;
		max-width: 80vw;
		place-self: start;
		/* max-width:66.66vw; */
		/* justify-self: center; */
	}
	.content--legend-extra.end{
		transform: unset;
		width: unset;
		right: unset;
	}
	.breadcrumb > button{
		padding:0 0.1rem;
	}
	.mc-answerContainer{
		gap: 3px;
	}
	.mc-answer{
		place-items: flex-end;
		justify-items: center;
	}
	.mc-answer-label::after{
		counter-increment: riddleCounter;
		content: counter(riddleCounter) " ";
	}
	.mc-answer>.answerCheck,
	.mc-answer-image{
		display: none;
	}
	.mc-choice{
		padding: 2px;
		border-radius: 4px;
	}
	.mc-choice-label {
		font-size: 9px;
	}
	.mc-answer-label{
		font-size: 8px;
		padding: 2px;
	}	
	.mc-resultBar{
		font-size: .8rem;
	}
	.mc-question-image {
		height: auto;
		width: 70vw;
	}
	.mc-result {
		gap: 0.5rem;
	}
}