@charset "UTF-8";
@font-face {
		font-family: "wapuro-mincho";
		src: url('fonts/wapuro-mincho.woff2')  format('woff2');
		font-display: swap;
}
@font-face {
		font-family: "wapuro-mincho-t";
		src: url('fonts/wapuro-mincho-tate2x.woff2')  format('woff2');
		font-display: swap;
}
@font-face {
		font-family: "wapuro-mincho-y";
		src: url('fonts/wapuro-mincho-yoko2x.woff2')  format('woff2');
		font-display: swap;
}
*{
		margin: 0.5%;
		padding: 0%;
		box-sizing: border-box;
}
h1 {
		font-family: "wapuro-mincho-y";
		font-size: 125%;
}
h2, h3, h4, p, ul, li {
		list-style: none;
		margin-bottom: 1em;
		font-family: "wapuro-mincho";
}
a:link {
		color: black;
}
a:visited {
		color: gray;
}
img {
		width: 95%;
}
body {
		position: fixed;
        background: silver;
}
header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		transform: scaleX(1.2);
		width: 100vw;
		height: 15vh;
		text-align: center;
}
.title {
		color: black;
}
.subtitle {
		color: gray;
}
main {
		display: flex;
		flex-direction: row;
		width: 98vw;
		height: 75vh;
}
nav {
		flex: 5;
		overflow-x: hidden;
		overflow-y: scroll;
		font-weight: bold;
		text-align: center;
}
nav > h2 {
        background: silver;
        color: black;
}    
nav > img {
        width: 120px;
        margin-bottom: 1em;
		border: 4px inset;
}		
details > summary {
		margin-bottom: 1em;
		border: 3px outset;
		background: gray;
		color: white;
		font-family: "wapuro-mincho";
		font-style: italic;
		font-size: 1.5em;
		text-align: center;
}
details > h3 {
		background: white;
		color: black;
		font-size: 1.1em;
}
.diary { 
		flex: 8;
		overflow-x: hidden;
		overflow-y: scroll;
		border: 3px inset;
		background: black;
		color: white;
}
div.diary h3 {
		background: white;
		color: black;
		font-size: 100%;
		text-align: center
}		
div.diary ul {
		text-align: center;
}						
div.diary a:link {
		color: aqua;
}
div.diary a:visited {
		color: teal;
}
.ok {
		color: lime;
		font-style: italic;
}
div.ok a:link {
		color: aqua;
}
div.ok a:visited {
		color: teal;
}
footer {
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 100vw;
		height: 5vh;
		margin-top: 1em;
		text-align: center;
}