* {
	box-sizing: border-box;
	font-family: NotoSerifJP-Light;
}
.banner {
	border: 3px double black;
	border-radius: 5px;
	cursor: -webkit-grab; 
	cursor: grab;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0em;
	margin-right: 0em;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0em;
	padding-right: 0em;
	width: 330px;
}
.banner-subtitle {
	background: #FFF;
	display: block;
	font-weight: bold;
	line-height: 100%;
	margin-top: 0px;
	margin-bottom: 1px;
	margin-left: 0em;
	margin-right: 0em;
	text-align: justify;
	max-width: 330px;
	width: 100%;
	text-align-last: justify;
	text-justify: inter-character;
}
/* Chromium-based (Chrome, Edge, Brave, Opera) — NOT Safari */
/*
@supports (-webkit-appearance:none) and (not (-webkit-touch-callout:none)) {
.banner-subtitle {
	letter-spacing: 18px;
	text-align: center;
}*/
.title {
	display: block;
	font-size: 2em;
	font-weight: bold;
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: 0;
	margin-right: 0;
	text-align: center;
	text-align-last: justify;
	text-justify: inter-character;
}
.title-link {
	color: #000;
	text-decoration: none;
}
.subtitle {
	display: block;
	font-family: NotoSerifTC-Light;	
	font-size: 1.35em;
	font-weight: bold;
	line-height: 100%;
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: 0;
	margin-right: 0;
	letter-spacing: 17px;
	text-align: center;
}
.subtitle-jp {
	font-family: NotoSerifJP-Light;	
}
.subtitle-zh {
	font-family: NotoSerifTC-Light;	
}
.subtitle-vi {
	display: block;
	font-size: 1.35em;
	font-weight: bold;
	line-height: 100%;
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: 0;
	margin-right: 0;
	padding-left: 3%;
	padding-right: 3%;
	text-align: center;
	text-align-last: justify;
	text-justify: inter-character;
}
.start-link {
	display: block;
	font-size: 2.5em;
	font-weight: bold;
	letter-spacing: 3px;
	line-height: 75%;
	margin-top: 20px;
	margin-left: 10%;
	margin-right: 10%;
	padding-bottom: 8px;
	text-align: center;
}
.start-link:hover {
	border: 4px solid purple;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.start-link:active {
	background: #FCD900;
	border-color: #FCD900;
	color: #008F6C;
	text-shadow: -2px 2px 2px #003326;
}
.jump-link {
	display: block;
	font-size: 2em;
	font-weight: bold;
	letter-spacing: 3px;
	line-height: 100%;
	margin-top: 10px;
	margin-left: 10%;
	margin-right: 10%;
	padding-bottom: 8px;
	text-align: center;
}
.jump-link:hover {
	border: 4px solid purple;
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.jump-link:active {
	background: #FCD900;
	border-color: #FCD900;
	color: #008F6C;
	text-shadow: -2px 2px 2px #003326;
}
.page-no-odd {
	font-family: NotoSerifJP-Light;
	font-size: 1.2em;
	text-align: right;
}
.page-no-even {
	font-family: NotoSerifJP-Light;
	font-size: 1.2em;
	text-align: left;
}
/* the rule to be linked with the section heading (usually at the top of
 * each page. */
.section {
	text-align: center;
}
.hr hr {
	color: #000;
	height: 1px;
	margin-bottom: 14px;
	margin-top: 20px;
	text-align: center;
	width: 20%;
}
.bold {
	font-weight: bold;
}
.italic {
	font-style: italic;
}
.it-reg {
	font-style: italic;
	font-weight: normal;
}
.handwritten {
	font-family: TW-Kai;
	font-size: 1.3em;
	vertical-align: 2px;
}
#ancient-forms {
	font-family: TW-Kai;
	font-size: 80px;
	vertical-align: 2px;
	max-width: 910px;
    text-align: center;
}
.invert-h {
	display: inline-block;
	transform: scaleX(-1);
}
.p-regular {
	font-family: NotoSerifJP-Light;
	font-size: 1.5em;
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: 0;
	margin-right: 0;
	text-align: justify;
	/*max-width: ;*/
}


/*OL-STROKES*/
#strokes-list {

}
.strokes-chars {
	font-family: TW-Kai;
	font-size: 100px;
	line-height: 100%;
}
.zh {
	font-family: TW-Kai;
}
.TC {
	font-family: NotoSerifTC-Light;
}
.SC {
	font-family: BabelStone;	
}
.missing-glyph {
	font-family: GenWanMin;	
}
.notes {
	font-size: 3em;
}
.又_old {
	padding-right: 4px;
	vertical-align: -4px;
}
.old-char-ex {
	float: left;
}
#fountain-pen-of-old {
	float: left;
}
.justify {
 	/*display: block;*/
 	/*line-height: 200%; previously set at 200% because of ruby 
 	 * annotations above and below kanji.*/
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: 0;
	margin-right: 0;
	/*border: 1px solid black;*/
	/*margin: 0 auto;*/
	max-width: 910px;
    text-align: justify;
	text-justify: inter-character;
}
.float-par {
	float: right;
}

/*18" WQXGA (2560 x 1600)*/
.layout {
	display: grid;
	grid-template-columns: 60% 40%;
	gap: 20px;
	/*align-items: start;*/
	max-width: 2560px;
}
.page-content {
	/*background: lightblue;*/
	/*min-width: 0;*/
}
/*@media (max-width: 900px) {
  .layout { 
	grid-template-columns: 2fr;
}
.notice-box { 
	position: static;
	order:-1; 
	}
}*/
/* BUSINESS SECTION */
.notice-box {
	background: yellow;
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,.08);
	box-shadow: 0 8px 24px rgba(0,0,0,.18);
	padding: 12px 14px;
	margin-right: 25px;
}
.smiley-p {
	font-family: NotoSerifJP-Light;
	font-size: 1em;
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: 0;
	margin-right: 0;
}
.links-container {
	position: sticky;
	top: 12px;
}
.links-container a {
	display: inline-block;
}
.kh-merc-link-a {
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,.08);
	box-shadow: 0 8px 24px rgba(0,0,0,.18);
	color: black;
	margin-bottom: 2px;
	overflow: hidden;
	text-decoration: none;
	width: 100%;
}
.kh-merc-link-a:hover {
	color: #FFF;
	background: #008F6C;
}
.kh-merc-svg {
	display: block; 
	height: 15vh;
	width: 100%;
}
.merchandise-p {
	display: block;
	font-weight: bold;
	font-size: 1.3em;
	line-height: 100%;
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: 0;
	margin-right: 0;
	padding-left: 3%;
	padding-right: 3%;
	text-align: justify;
	text-align-last: justify;
	text-justify: inter-character;
	width: 100%;
}

/*PAYPAL*/
.paypal-buttons {
	margin-bottom: 20px;
	width: 50%;
}
.paypal-single-button {
	/*margin-left: 10px;*/
	margin-top: 10px;
	float: left;
}
.kh-QR-container {
	
}
.kh-QR {
	display: inline-block;
	border-radius: 42px;
	border: 1px solid rgba(0,0,0,.08);
	box-shadow: 7px 7px 0px rgba(0,0,0,.18);
	margin-left: 2%;
	/*height: 244px;*/
	width: 178px;
}

/* TRY TO MODIFY USING CSS GRID IN FUTURE */
.ruby-p {
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: 0;
	margin-right: 0;	
}
ruby {
	font-size: 1.5em;
	ruby-align: space-around;
	ruby-position: under;
}
rt {
	ruby-align: space-around;
	font-size: 0.65em;
}
.ruby-regular {
	font-family: BabelStone;
	font-size: 1.35em; 
	max-width: 910px;
}
.ruby-honjih {
	display: inline-block;
	font-family: TW-Kai;
	font-size: 1.3em;
	position: relative;
	vertical-align: 2px;
}
.rt-zh {
	/*#FECD21 #00386A*/
	/*background: blue;*/
	display: inline-block;
	font-size: 0.6em;
	font-weight: bold;
	/*height: 8px;*/
	margin: 0px 0px 0px 0px;
	padding: 0;
	text-align: center;
	transform: translateX(-30px);
	vertical-align: -16px;
	width: 2px;
}
.rt-en {
	height: 8px;
	margin-top: 5px;
	position: absolute;
	ruby-align: space-between;
}
/*TESTING STYLES*/
/*
ruby > span.ruby-honjih:nth-of-type(odd) {
	background: #000;
	color: #fff;
}
ruby > rt.rt-zh {
	background-color: #FECD21;
}
ruby > rt.rt-zh:nth-of-type(odd) {
	background-color: #00386A;
}
.rt-en {
	background: red;
	color: white;
}*/
/* RETURN TO THIS FOR INDIVIDUALLY ANNOTATED KANJI
.ruby-honjih {
	font-family: TW-Kai-98_1-CUSTOM;
	font-size: 1.3em;
	vertical-align: 2px;
}
.rt-zh {
	/*#FECD21 #00386A
	/*background: blue;
	display: inline-block;
	font-size: 0.6em;
	font-weight: bold;
	/*height: 8px;
	margin: 0px 0px 0px 0px;
	padding: 0;
	text-align: center;
	transform: translateX(-35px);
	vertical-align: -16px;
	width: 35px;
}
.rt-en {
	ruby-align: space-between;
}*/

/* KANJI EXAMPLES */
.kanji-example {
	display: grid;
	grid-template-columns: 20px 180px;
	align-items: center;
	margin-top: 10px;
	margin-right: 10px;
	width: 200px;
	float: left;
}
.example-designation-letter {
}
.kanji-example-modern {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border: 1px solid black;
	height: 180px;
	font-family: TW-Kai;
	font-size: 180px;
	text-align: center;
	width: 180px;
}
.kanji-example-link {
	color: black;
	font-family: TW-Kai;
	text-decoration: none;
}

/*KANGXI EXTRACTS*/
.kangxi-extract {
	font-family: TW-Kai;
	line-height: 105%;
	margin-top: 10px;
	font-size: 2em;
}
.kang-header {
	font-size: 2em;
	font-weight: bold;
}
.kang-border {
	border: 1px solid black;
	border-radius: 5px;
	font-family: inherit;
}

/*WRITING PRACTICE*/
.writing {
	display: flex;
	flex: 1 0 25%; /* 4 per row */
	flex-wrap: wrap;
	text-align: center;
    //flex-direction: column;
    justify-content: center;
    align-items: center;
	margin: auto;
    max-width: 1600px;    
	font-size: 4em;
	font-weight: bold;
}
.writing div {
	display: flex;
	line-height: 100%;
}
.writing a {
	border: 1px solid black;
	color: black;
	font-family: BabelStone;
	text-decoration: none;	
}


.pp-Z6MXB8NEKG32S{text-align:center;border:none;border-radius:0.25rem;min-width:11.625rem;padding:0 2rem;height:2.625rem;font-weight:bold;background-color:#FFD140;color:#000000;font-family:"Helvetica Neue",Arial,sans-serif;font-size:1rem;line-height:1.25rem;cursor:pointer;}

/* CLEARFIX */
.clearfix::after {
	content: "";
	display: table;
	clear: both;
}