body {
	display: grid;
	grid-template-areas:
		'header header'
		'discovery main'
		'footer footer';
	grid-template-columns: 250px 1fr;
	min-height: 100%;
	grid-gap: 1em;
	margin: 0 1em;
	background-color: aliceblue;
	color: black;
	background-image: url('https://cdn.prettyboytellem.com/patterns/spacemap.gif');
	/* font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "MPlus Regular", sans-serif; */
	font-family: "MPlus Regular", "Meiryo", "MS PGothic", "sans-serif";
}
.badge img {
	border: 1px solid; }
main, header, footer, aside {
	background: white;
	padding: 10px 20px;
	border: 1px double;
}
aside {
	word-break: break-word;
}
.discovery ul {
	list-style-type: upper-roman;
}

@media only screen and (max-width: 900px) {
	.timeline { column-count: unset }
	body { display: block; margin: 0 }
	.toc { display: block !important; float: none !important }
	h1 { font-size: 1.5rem }
	main p { font-size: 1.1rem !important }
	figure img, figure video { max-width: 90% !important }
}

.discovery {
	grid-area: discovery;
}
.banner, .avatar {
	border: 1px solid;
}
h1, h2, h3, h4 {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	text-justify: none;
	color: DarkBlue;
	font-weight: lighter;
}
header h1 { color: black }
main {
	grid-area: main;
}
.article-title {
	display: inline;
}
.article-title > a { text-decoration: none }
article h1, article h2 { text-align: left }
article, main {
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
}
main a { color: DarkBlue }
a.hoverbox, .flat-nav a { color: inherit } 
main p {
	line-height: 1.9rem;
	font-size: 1.2rem;
}
h1, h2, h3, h4 {
	text-align: left;
}
aside {
	hyphens: auto;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
}
.explorer ol, .explorer ul, ol.explorer, ul.explorer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
	list-style-type: none;
	padding: 0;
	white-space: nowrap;
}
.explorer li {
	margin: 15px;
}
.explorer li a {
	padding-left: 5px;
	padding-right: 5px;
	transition: box-shadow 0.5s, color 1s;
	border: 1px solid;
	text-decoration: none;
	cursor: pointer;
}
.hoverbox { transition: box-shadow 0.5s, color 1s; }
.hoverbox:hover { box-shadow: -3px 3px 10px; }
a.hoverbox { text-decoration: none }
header {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	background-image: url('/yys-banner.gif');
	background-size: cover;
	background-position: center;
	grid-area: header;
}
header > * {
	padding: 5px 0;
}
.subtext {
	color: #6c6c6c;
	font-size: 0.8rem;
}
.ecoin-addresses {
	font-size: 1rem;
	word-break: break-all;
	-moz-hyphens: none;
	hyphens: none;
	font-size: 0.6rem;
}
.ecoin-addresses dd {
	font-family: Monospace;
	margin: 0;
}
.ecoin-addresses dt {
	font-weight: bold;
}
.subsubtext {
	color: #6c6c6c;
	font-size: 0.7rem;
}
.article-end-entice {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
.article-end-entice dd {
	margin-left: 10px;
}
ul.article-end-entice {
	list-style: none;
	padding: 0;
}
.article-end-entice li {
	padding: 5px;
	margin: 10px 0;
	border-left: 1px solid;
}
ul.right-hand-title {
	list-style: none;
}
.toc {
	display: inline-block;
	float: right;
	position: relative;
	z-index: 2;
	padding: 0 20px 10px;
	margin: 0 1em 1em;
	border: 1px solid #aaa;
	background-color: #f9f9f9;
}
.toc > h3 {
	text-align: center;
}
.toc > ul {
	list-style-type: square;
	padding-left: 10px;
	margin: 0;
}
.toc > ul > ul {
}
.explorer li a:hover {
	box-shadow: -3px 3px 10px;
}
.footer {
	grid-area: footer;
}
footer {
	border-bottom: 0;
	padding-bottom: 5px;
	margin-bottom: 20px;
}
footer .link-dir {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-evenly;
}
footer .link-dir > * {
	padding: 0 20px;
}
footer .disclaimer {
	text-align: center;
}
.recent-articles .article-title {
	margin: 0;
}
.right-hand-title {
	display: block;
	float: right;
	text-align: right;
}
table.articles {
	width: 100%;
}
table.articles, table.articles th, table.articles td {
	margin: auto;
	border: 1px solid;
}
ul.recent-articles li {
	border: 1px solid;
	padding: 5px;
	margin: 5px 0;
	text-align: center;
}
.recent-articles .category {
	display: block;
	text-align: right;
}
ul.recent-articles {
	margin: 0;
	padding: 0;
	list-style: none;
}

a.keep-reading {
	border: 1px solid;
	padding: 0 5px;
}
a.all-articles {
	display: block;
	text-align: center;
	border: 1px solid;
	padding: 10px 0;
}

/* Navigation bar */
	.flat-nav { display: flex; flex-wrap: wrap; border-width: 0 1px }
	.flat-nav a { border: 1px solid rgba(0,0,0,0.3);
		margin: 2px 0;
		padding: 0 8px;
		background-color: white;
		text-decoration: none; }
a,
a:visited {
	outline: none;
	color: inherit;
}
a:hover {
	text-decoration: none;
}
figure {
	display: block;
	text-align: center;
	margin: auto;
}
img, video {
	max-width: 100%;
}
.yumi {
	position: relative;
	z-index: 2;
	float: right;
	max-width: 50%;
}
.yumi img {
	height: auto;
	border-radius: 5px;
	border: 3px double;
	margin: 10px 0 10px 10px;
}
ul.timeline li {
	list-style-type: none;
	position: relative;
	padding: 0 15px 20px 20px;
	border-left: 5px solid;
	break-inside: avoid-column;
	break-inside: avoid;
	page-break-inside: avoid;
}
.timeline-box {
	content: '';
	position: absolute;
	left: -13px;
	width: 20px;
	height: 20px;
	border: 1px solid;
	border-radius: 15%;
	background-color: white;
}
.timeline li:last-child::after {
	content: '';
	position: absolute;
	left: -13px;
	width: 20px;
	bottom: 0;
	height: 10px;
	background-color: black;
}

.timeline { padding-left: 0 }

.timeline dt {
	font-weight: bold;
}

.timeline dd::after {
	display: block;
	content: '';
}

.timeline dt, .timeline dd {
	margin: 0;
	display: inline;
}
.timeline hr {
	margin-top: 0;
}

a img.banner {
	float: left;
}
figure img, figure video {
	border: 1px solid;
	max-height: 500px;
	max-width: 70%;
}

code {
	background: black;
	color: white;
	border-radius: 5px;
	border: 2px solid lightgreen;
	padding: 0 5px;
}
code:not(only-child) {
	font-size: 1rem;
}

code:only-child {
	display: block;
	padding: 15px 10px;
	max-width: 100%;
	color: white;
	overflow-x: auto;
	white-space: pre-wrap;
	font-size: 1rem;
}
.drop-cap:first-letter {
	font-size: 4.5em;
	float:left;
	margin-top:.15em;
}
@font-face {
	font-family: "MPlus Regular";
	src: url("mplus-1c-regular-sub.woff");
}