body {
	padding: 0.5em 0 0.5em 1em;
	font-family: -apple-system, BlinkMacSystemFont, helvetica, sans-serif;
	max-width: 1024px;
}

#header {
	padding: 0.5em 0;
}

	#logo_image {
		float: inline-start;
		margin: 18px 1.5em 18px 0;
		width: 96px;
		height: 96px;
		border-radius: 18px; 
	}

	#qr_code {
		float: inline-start;
		margin: 18px 1.5em 18px 0;
		width: 96px;
		height: 96px;
	}

	#app_icon {
	    margin: 18px 0 18px 1.5em;
		width: 96px;
		height: 96px;
	}

	#headertext {
		clear: none;
		float: inline-start;
		padding-top: 16px;
	}

	#headertext>h1 {
		margin: 0;
		padding: 0;
		font-size: 1.6em;
	}

	#headertext>h2 {
		margin: 0.5em 0;
		font-size: 1.2em;
	}
	
	#headertext>a {
		text-decoration-color: white;;
	}

	#free {
		layout: inline-block;
		padding: 0.2em 1em;
		font-size: 1.2em;
		width: 4em;
		min-width: 4em;
		text-align: center;
		text-decoration: none;
		border-radius: 1em; 
	}

#about {
	clear: both;
	padding: 1em 0; 
	display: flex;
	justify-content: start; /* space-evenly; */
}

	.aboutbox {
		width: 30%;
		max-width: 30%;
		text-align: center;
	}
	
	.aboutbox a {
		text-decoration: none;
	}
	
	.aboutbox > h3, .aboutbox > a > h3 {
		font-size: 1em;
		margin-block-start: 0;
		margin-block-end: 4px;
	}
	
	.aboutbox > h2, .aboutbox > a > h2 {
		font-size: 2em;
		margin-block-start: 5px;
		margin-block-end: 5px;
	}
	
	.aboutbox > p, .aboutbox > a > p {
		font-size: 0.8em;
		margin-block-start: 4px;
		margin-block-end: 0px;
	}
	
	.aboutbox > img, .aboutbox > a > img {
		width: 48px;
		height: 36px;
	}
	
section.topic {

	clear: both;
}

aside.guide {
	clear: both;
	overflow-wrap: break-word;
	margin: 0.5em 0;
}

@media only screen and (max-width: 480px) {

	
	#app_icon_link {
		display: none;  
	}
	
	aside.guide {
		width: inherit;
		float: inline-start;
	}
	
	aside.snippet {
		float: left;
	}
}

@media only screen and (min-width: 481px) {
	aside.guide {
		/* width: 50%; */
		margin-right: 1em;
		float: left;
	}
	
	aside.snippet {
		float: right;
	}
}

aside.snippet {
	width: 350px;
	max-width: 350px;
	margin: 0.5em 0;
}

aside.guide p {
	margin-block-start: 0.2em;
}

.screenshot_image {
	width: 100%;
	object-fit: cover;
}

.ipad_image {
	max-width: 350px;
	object-fit: cover;
}

.toclink {
	clear: both;
	text-align: right;
}

@media (any-hover: none) {
	.non-touchy {display: none}
}
@media (any-hover: hover) {
	.touchy {display: none}
}

@media (prefers-color-scheme: light) {

	body {
		background-color: #ffffff;
		color: #030303;
	}
	
	a {
		color: #303030;
	}

	#logo_image {
		filter: brightness(1) contrast(1);
	}

	#headertext > h1 {
		color: #505050;
	}
	
	#description > p, #userguide_link > p, #faq_link > p {
		color: #787878;
	}
		
	#userguide_link > p > a, #faq_link > p > a {
		color: #787878;
		text-decoration: none;
		border-bottom: 1px dotted #787878;
	}

	#headertext > h2, #description > h2 {
		color: #787878;
	}

	#free {
		color: white;
		background-color: #32ADE6;
	}

	#about {
		border-top: 0.5px solid #787878;
	}
	
	.aboutbox > h3, .aboutbox > a > h3 {
		color: #787878;
	}

	.aboutbox > h2, .aboutbox a > h2 {
		color: #787878;
	}

	.aboutbox > p, .aboutbox > a > p {
		color: #787878;
	}
	
	.method {
		color: #007398;
	}
	
	.question {
		color: #007398;
	}
	
	.answer {
		color: #007398;
	}
	
	.method, li.toc1 a, li.toc2 a {
		text-decoration-color: #007398;
	}
	
	.screenshot_image {
		border-top: 0.5px solid #e8e8e8;
		border-right: 1px solid #e8e8e8;
		border-bottom: 1px solid #e8e8e8;
		border-left: 0.5px solid #e8e8e8;
	}
}	

@media (prefers-color-scheme: dark) {

	body {
		background-color: #000000;
		color: #FEFEFE;
	}
	
	a {
		color: #FEFEFE;
	}

	#logo_image {
		filter: brightness(1.5) contrast(1.2);
	}

	#headertext > h1 {
		color: #EBEBEB;
	}

	#description > p, #userguide_link > p, #faq_link > p {
		color: #B9B9B9; 
	}
	
	#userguide_link > p > a, #faq_link > p > a {
		color: #B9B9B9;
		text-decoration: none;
		border-bottom: 1px dotted #B9B9B9;
	}

	#headertext > h2, #description > h2 {
		color: #EBEBEB;
	}

	#free {
		color: white;
		background-color: #006894;
	}

	#about {
		border-top: 0.5px solid #8B8B8B;
	}

	.aboutbox > h3, .aboutbox > a > h3 {
		color: #8B8B8B;
	}

	.aboutbox > h2, .aboutbox a > h2 {
		color: #8B8B8B;
	}

	.aboutbox > p, .aboutbox > a > p {
		color: #8B8B8B;
	}
		
	.screenshot_image {
		border-top: 0.5px solid #202020;
		border-right: 1px solid #202020;
		border-bottom: 1px solid #202020;
		border-left: 0.5px solid #202020;
	}
	
	.method {
		color: #44C6F4;
	}
	
	.question {
		color: #44C6F4;
	}
	
	.answer {
		color: #44C6F4;
	}
		
	.method, li.toc1 a, li.toc2 a {
		text-decoration-color: #44C6F4;
	}
}