/* Portrait */

@media screen and (orientation:portrait){
	:root{
		--appFw-menu-size: min(calc(100vw / 3), var(--appFw-menu-min-size));
		--contentHeight: calc(100vh - var(--appFw-menu-size));
	}
	
	.appFw_main_container{
		flex-direction: column;
	}
	
	.appFw_main_container > div:nth-child(2){
		height: var(--appFw-menu-size);
	}
	
	#appFw_main_menu{
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	}
	
	#appFw_main_menu > div{
		flex-direction: row;
	}

	#appFw_main_menu > div > div{
		height: 100%;
	}
	
	.appFw_tongue{
		top: var(--dist);
		right: 0%;
		transition-property: top;
	}
}

/* Landscape */

@media screen and (orientation:landscape){
	:root{
		--appFw-menu-size: min(calc(100vh / 3), var(--appFw-menu-min-size));
		--contentHeight: calc(100vw - var(--appFw-menu-size));
	}
	
	.appFw_main_container{
		flex-direction: row-reverse;
	}
	
	.appFw_main_container > div:nth-child(2){
		width: var(--appFw-menu-size);	
	}
	
	#appFw_main_menu{
		grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
	}

	#appFw_main_menu > div{
		flex-direction: column;
	}

	#appFw_main_menu > div > div{
		width: 100%;
	}
	
	.appFw_tongue{
		top: 0%;
		right: var(--dist);
		transition-property: right;
	}		
}

:root{
	user-select: none;
	-webkit-user-select: none; /*safari*/
	text-size-adjust: none !important;
	-webkit-text-size-adjust: none !important;		
	touch-action: none;	
	--appFw-menu-min-size: 60px;
	--transitionDuration: 0.25s;
	font-family: 'Helvetica';
	/*
	--popupSize: 250px;
	--popupDist: -250px;
	--image-max-ratio: 2.15;
	*/
}

/* App Framework */

body{
	background: #8585bb;
}

.appFw_main_container{
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
}

.appFw_main_container > div{
	flex-grow: 0;
	border: 0;
	box-sizing: border-box;
}

.appFw_main_container > div:nth-child(1){
	flex-grow: 1;
	position: relative;
	overflow: hidden;
}

#appFw_main_menu{
	display: grid;
	cursor: pointer;
}

#appFw_main_menu > div{
	display: flex;
	justify-content: center;
	background: #555588;
	border: 1px solid #333355;
	box-sizing: border-box;
}

#appFw_main_menu > div > div{
	aspect-ratio: 1/1;
	position: relative;
}

.appFw_main_menu_icon{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;	
	text-align: center;
	font-size: calc(var(--appFw-menu-size) * 0.41);
	padding-top: calc(var(--appFw-menu-size) * 0.12);
	color: #ffffff;
}

.appFw_main_menu_text{
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;	
	text-align: center;
	font-size: calc(var(--appFw-menu-size) * 0.25);
	padding-bottom: calc(var(--appFw-menu-size) * 0.08);
	color: #ffffff;
}

.appFw_tongue{
	position: absolute;
	--dist: 100%;
	width: 100%;
	height: 100%;
	z-index: 1;
	transition-timing-function: linear;	
	box-sizing: border-box;
	overflow: hidden;
}

.appFw_subTongue{
	position: absolute;
	top: 0px;
	left: 100%;
	width: 100%;
	height: 100%;
	transition: left var(--transitionDuration) linear;
	overflow: hidden;
}

.blockImages img{
	display: block;
}

/*
div[data-tonguecontent]{
	width: 100%;
	height: 100%;
}
*/