@font-face {
	font-family:comicSans;
	src:local('Comic Sans'),local('Comic Sans MS'),url('asset/font/comic.ttf');
}

/*\

style

\*/

html {
	font-size:62.5%;
}
body {
	font-family:sans-serif;
	font-size:1.6em;
	margin:auto;
}
h1,h2,h3,h4,h5,h6 {
	margin:0.25em 0;
	padding:0.5em 0;
}
p {
	margin:0.25em 0;
	padding:0.5em 0;
}

/*\

size

\*/

.A3 {
	width:297mm;
	height:420mm;
}
.A4 {
	width:210mm;
	height:297mm;
}
.A5 {
	width:148mm;
	height:210mm;
}
.A6 {
	width:105mm;
	height:148mm;
}

/*\

page

\*/

@media all {
	.page {
		display:grid;
		grid-gap:1rem;
		grid-auto-flow:dense;
		box-sizing:border-box;
		padding:1rem;
	}
}
@media screen {
	.page {
		margin:calc(1em + 1rem);
		background-color:rgb(230,230,230);
	}
}
@media print {
	.page {
		page-break-before:always;
	}
}

/*\

panel

\*/

@media all {
	.panel {
		position:relative;
	}
}
@media screen {
	.panel {
		background-color:rgb(240,240,240);
	}
}
@media print {
	.panel {
		border-style:solid;
		border-width:1px;
		border-color:rgb(0,0,0);
	}
}

/*\

text

\*/

@media all {
	.speech,
	.narration {
		display:inline-block;
		box-sizing:border-box;
		padding:1em;
	}
	.speech {
		border-radius:0.75em;
		overflow:hidden;
		font-family:comicSans;
	}
}
@media screen {
	.speech,
	.narration {
		background-color:rgb(250,250,250);
	}
}
@media print {
	.speech,
	.narration {
		border-style:solid;
		border-width:1px;
		border-color:rgb(0,0,0);
	}
}