html {
	font-size: 24px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
	width: 100vw;
	height: 100vh; /* calc(100vmin / 16 * 9); */
	/* overflow: hidden; */
	display: flex;
	flex-flow: column nowrap;
	/* outline: solid thin orange; */
	margin: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
}
body > header {
	flex: 0 0 auto;
	display: flex;
	justify-content: space-between;
}
body > footer {
	flex: 0 0 auto;
	display: flex;
	justify-content: space-between;
}
body > main {
	flex: 1 0 0px;
	container-name: main;
	container-type: size;
}
body > input[type="radio"],
body > main > div {
	display: none;
	height: 100%;
}
/*
body > input[type="radio"]#home:not(:checked) ~ header > label:first-child + i {
	display: none;
}
body > input[type="radio"]#home:checked ~ header > label:first-child {
	display: none;
}
*/
body > input[type="radio"]#home:checked ~ header > label[for="home"],
body > input[type="radio"]#home:checked ~ footer > label[for="home"]  {
	opacity: 0.5;
}
body > header > label, body > footer > label {
	display: inline-block;
	background: yellow;
	vertical-align: middle;
	padding: 0.5rem;
	font-weight: bold;
}
/*
body > input[type="radio"]#home:not(:checked) ~ header > label[for="home"],
body > input[type="radio"]#home:not(:checked) ~ footer > label[for="home"]  {

}
*/
body > input[type="radio"]#home:checked ~ main > div#main  { display: grid; }
body > input[type="radio"]#app0:checked ~ main > div#app-0 { display: flex; }
body > input[type="radio"]#app1:checked ~ main > div#app-1 { display: block; }
body > input[type="radio"]#app2:checked ~ main > div#app-2 { display: block; }
body > input[type="radio"]#app3:checked ~ main > div#app-3 { display: block; }
body > input[type="radio"]#app4:checked ~ main > div#app-4 { display: block; }
body > input[type="radio"]#app5:checked ~ main > div#app-5 { display: block; }
body > input[type="radio"]#app6:checked ~ main > div#app-6 { display: block; }
body > input[type="radio"]#app7:checked ~ main > div#app-7 { display: block; }
body > input[type="radio"]#app8:checked ~ main > div#app-8 { display: block; }
body > input[type="radio"]#app9:checked ~ main > div#app-9 { display: block; }
body > input[type="radio"]#appA:checked ~ main > div#app-A { display: block; }
body > input[type="radio"]#appB:checked ~ main > div#app-B { display: block; }
body > input[type="radio"]#appC:checked ~ main > div#app-C { display: block; }
body > input[type="radio"]#appZ:checked ~ main > div#app-Z { display: block; }

#main label img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
#main label[for="appB"], #main label[for="appC"] {
	font-size: 1.25rem;
	text-align: center;
}
#main label[for="appC"] {
	font-size: 3rem;
}
#main label {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	padding: 1rem;
}
#main {
	/* grid-template: "app1 app2 app3" 33%, "app3 app4 app5" 33%, "app7"; */
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	align-items: center;
	justify-content: space-around;
	height: 100%;
}

/*
#main swiper-container {
	width: 100%;
}
swiper-slide > img {
	width: auto;
	height: auto;
	max-width: 100cqw;
	max-height: 100cqh;
	object-fit: contain;
}
*/
swiper-slide img {
	display: block;
	width:  auto;
	width: 100%;
	height: auto;
	height: 100%;
	object-fit: contain;
	/* max-width:  100%; */
	/* max-height: 100%; */
}

swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

swiper-container {
	width: 100%;
	height: 100%;
	--swiper-navigation-size: 3rem;
}
/*
swiper-container.book-double > swiper-slide:first-of-type img {
	padding-left: 50%;
}

swiper-container.book-double > swiper-slide:last-of-type img {
	padding-right: 50%;
}
*/

.float-right {
	float: right;
}
video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}