_Front_____

<div class=tango>{{tango}}</div>

{{#shisa}}<div class=shisa>{{shisa}}</div>{{/shisa}}

_CSS_______

.card {
	text-align: left;
	color: var(--nord00);
	background-color: var(--nord06);
	font-size: 22px;
	font-family: yugoth;
}
.card img {
	border-color: var(--nord04);
	border-style: solid;
	border-width: 2px;
	border-radius: 5px;
	max-width: 50%;
	max-height: 50%;
	display:block;
	margin:auto;
}
.tango {
	text-align: center;
	color: var(--nord03);
	font-size: 3em;
	font-family: kyouka;
	margin:5px;
}
.yomikata {
	text-align: center;
	font-size: 2em;
	font-family: yumin;
	text-align: left;
}
.hinshi {
	font-size: 0.8em;
	text-align:right;
}
.imi {
	border-color: var(--nord04);
	border-style: solid;
	border-width: 2px;
	border-radius: 5px;
	padding: 2%;
	margin:11px;
}
.reibun {
	background-color:  var(--nord04);
	box-shadow: var(--nord04) 0px 0px 10px;
	border-color: var(--nord05);
	border-style: solid;
	border-width: 2px;
	border-radius: 5px;
	font-family: yumin;
	padding: 2%;
	margin:11px;
}
.shisa {
	color: var(--nord14);
	text-align: center;
	font-family: yugoth;
}

#answer {
	height: 1px;
	background-color: var(--nord04);
	border: 2px;
	border-style: solid;
	border-color: var(--nord05);
}

.mobile .replaybutton { display:none; }

.card.nightMode	{ color:var(--nord04);background-color:var(--nord00); }
.card.nightMode img { border-color:var(--nord03); }
.card.nightMode .reibun { border-color:var(--nord02);background-color:var(--nord01);box-shadow:var(--nord03) 0px 0px 5px; }
.nightMode .tango	{ color:var(--nord08); }
.nightMode .yomikata	{ color:var(--nord09); }
.nightMode .hinshi	{ color:var(--nord09); }
.nightMode .imi	{ border-color:var(--nord03); }
.nightMode .answer	{ background-color:var(--nord03);border-color:var(--nord01); }

.mobile .card.night_mode	{ color:var(--nord06); background-color:#000000; }
.mobile .card.night_mode img	{ border-color:var(--nord03); }
.mobile .card.night_mode .reibun  { border-color:var(--nord02);background-color:var(--nord01);box-shadow:var(--nord03) 0px 0px 5px; }
.mobile .night_mode .tango	{ color:var(--nord08); }
.mobile .night_mode .yomikata	{ color:var(--nord09); }
.mobile .night_mode .hinshi	{ color:var(--nord09); }
.mobile .night_mode .imi	{ border-color:var(--nord03); }
.mobile .night_mode #answer	{ background-color:var(--nord03);border-color:var(--nord01); }

<!--
ruby rt { opacity:0.5; }
ruby rt:hover { opacity:1; }
-->

@font-face { font-family: kyouka; src: url('_UDDigiKyokashoN-R.ttc'); }
@font-face { font-family: yugoth; src: url('_yugothr.ttc'); }
@font-face { font-family: yumin; src: url('_yumin.ttf'); }
@font-face { font-family: strokeorder; src: url('_KanjiStrokeOrders_v4.001_3.ttf'); }
@font-face { font-family: arial; src: url('_arial.ttf'); }

:root {
--nord00:#2e3440;
--nord01:#3b4252;
--nord02:#434c5e;
--nord03:#4c566a;
--nord04:#d8dee9;
--nord05:#e5e9f0;
--nord06:#eceff4;
--nord07:#8fbcbb;
--nord08:#88c0d0;
--nord09:#81a1c1;
--nord10:#5e81ac;
--nord11:#bf616a;
--nord12:#d08770;
--nord13:#ebcb8b;
--nord14:#a3be8c;
--nord15:#b48ead;
}

_Back______

{{FrontSide}}

<!--<hr id=answer>-->

<div class=yomikata>{{yomikata}}</div>
<div class=hinshi>{{hinshi}}</div>

<div class=imi>{{imi}}</div>
<div class=reibun>{{reibun}}</div>

{{#gazou}}{{gazou}}{{/gazou}}
{{#onkyou}}{{onkyou}}{{/onkyou}}