@font-face {
		font-family: "OpenMoji";
		src: url("/fonts/OpenMoji-color-glyf_colr_0.woff2") format("woff2");
	}

	@font-face{
		font-family: "DialogText";
		src: url("/fonts/sonic_comics.woff") format("woff"); 
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	@font-face{
		font-family: "MainText";
		src: url("/fonts/edosz.ttf") format("truetype"); 
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	@media only screen and (max-width: 600px) 
	{
		body { font-size:0.85em; }
	}
	@media only screen and (min-width: 600px) 
	{
		body { font-size:1em; }
	}
	@media only screen and (min-width: 1800px) 
	{
		body { font-size:1.1em; }
	}

	* { box-sizing: border-box; }

	body { background:#333; font-family: "MainText", "OpenMoji"; margin:0; padding:0; text-align:center; }

	div.comics { background:transparent; display:inline-block; font-family: "DialogText", "OpenMoji"; margin-bottom:1em; padding:0em; position:relative; transform:scale(1.0); width:40em; }

	div.comics > a { display:inline-block; position:relative; }
	div.comics > a:hover { display:inline-block; position:relative; top:-0.5em; }

	@keyframes oscillate
	{
		0%   { transform: scale(1.1) rotate(-15deg); }
		50%  { transform: scale(1.0)rotate(-15deg);  }
		100% { transform: scale(1.1)rotate(-15deg); }
	}

	div.comics > a .click {
		animation: oscillate 3s ease-in-out infinite;
		background:teal;
		border:0.2em dotted black;
		bottom:-1em;
		box-shadow: 0 0 1em grey;
		color:white;
		display:inline-block;
		font-size:1.5em;
		padding:0.25em;
		position:absolute;
		right:1em;
		transform:rotate(-15deg);
		z-index:1000;
	}

	div.comics > h1 { line-height:1.5; }

	div.case {
		background:#ceF;
		border:0.3em solid black;
		box-shadow:0 0.5em 1em grey;
		box-sizing: border-box;
		display:inline-block;
		font-size:1.0em;
		height:27em;
		margin:2em;
		position:relative;
		width:27em;
	}

	div.dialogs {
		box-sizing: border-box;
		display:flex;
		flex-direction:column;
		font-family: "DialogText", "OpenMoji";
		font-size:100%;
		font-weight:bold;
		height:auto;
		line-height:1.5; 
		width:100%;
	}

	div.dialog {
		background:white; 
		border:0.2em solid black;
		box-shadow:0 0.3em 1em grey;
		box-sizing: border-box;
		display:inline-block;
		max-width:84%;
		margin:0.1em;
		padding:0.5em 1.5em;
		width:auto;
		word-wrap: break-word;
	}

	div.dialog.left    { align-self: flex-start; border-radius: 2em 2em 1em 1em; position:relative; text-align:justify; }
	div.dialog.right   { align-self: flex-end;   border-radius: 2em 2em 1em 1em; position:relative; text-align:justify; }
	div.dialog.comment { align-self: flex-start; background:#ffa; max-width:120%; position:relative; text-align:justify; }
	div.dialog.empty   { background:none; border:none; box-shadow:none; }

	div.dialog.noisy { border-style:dashed; font-style:italic; }

	div.dialog.left:after  ,
	div.dialog.right:after {
		background: url(/img/pointe_bulle.png?test=3);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border:0.3em solid black;
		border-left:none;
		border-top:none; 
		bottom:-1.1em;
		content:" ";
		height:1.5em;
		left:1em;
		position:absolute;
		transform: scaleX(0.5) rotate(45deg);
		width:1.5em;
	}

	div.dialog.right:after { left:auto; right:1em;}


	div.dialog:empty { display:none; }

	div.chrs {
		background:#CCC;
		border-top:0.3em solid black;
		bottom:0em;
		box-sizing:border-box;
		display:block;
		font-family: "OpenMoji";
		height:4em ;
		position:absolute;
		width:100%;
	}

	div.chr {
		box-sizing:border-box;
		font-size:5em; 
		letter-spacing: -0.3em;
		position:absolute;
		text-shadow:0 0.1em 0.25em grey;
		top:-0.9em;
	}

	div.chr.left  { left:0.5em; }
	div.chr.right { right:0.5em; transform: scaleX(-1); }

	div.backgrounds {
		color:rgba(1,1,1,0.5);
		font-size:3.5em;
		left:0;
		position:absolute;
		right:0;
		text-align:center;
		text-shadow: 0 0 0 white;
		top:-0.9em;
		white-space: nowrap;  
	}
	div.background { left:0; overflow:hidden; position:absolute; right:0; top:0; } 
	div.background_0 { top:0.5em; }
	div.background_1 { top:0em; }
	div.background_2 { top:-0.5em; }
	div.background_3 { top:-1em; }
	div.background_4 { top:-1.5em; }
	div.background_5 { top:-2em; }

	div.foregrounds { 
		font-size:3.5em;
		left:0;
		position:absolute;
		right:0;
		text-align:center;
		text-shadow: 0 0.1em 0.30em black;
		top:-0.9em;
		white-space: nowrap;
	}
	div.foreground { left:0; overflow:hidden; position:absolute; right:0; top:0; } 
	div.foreground_0 { top:0.5em; }
	div.foreground_1 { top:0em; }
	div.foreground_2 { top:-0.5em; }
	div.foreground_3 { top:-1em; }
	div.foreground_4 { top:-1.5em; }
	div.foreground_5 { top:-2em; }

	span.space { display:inline-block; width:0.15em; }


	div.message {
		background:white;
		border:3px solid black;
		display:block;
		font-size:2em;
		margin:1em;
		margin-left:auto;
		margin-right:auto;
		padding:1em;
		text-align:left; 
		width:400px;
	}

	nav { background:transparent; color:white; display:block; min-height:2em; text-align:center; }

	nav a:link,
	nav a:visited,
	nav a:hover,
	nav a:active { color:white; font-weight:bold; text-decoration:none;  }

	nav a:hover { background:cadetblue; }

	nav .btn { background:darkcyan; border:0.2em dotted black; display:inline-block; padding:0.5em; }
	nav .btn select {  background:white; border:1px outline white; font-family:"MainText"; font-size:1em; margin:-0.5em; padding:0.5em;  text-align:center; }

	

	.menu { font-size:1.5em; }
	.pagination { font-size:1.5em; padding-right:3em; position:relative; }

	.pagination .btn.top { background:transparent; border:none; bottom:0.0em; font-size:2.5em; padding:0; position:absolute; right:0.0em; text-shadow: 0 0 0.2em white;}
	

	h1.header { background:DarkSlateGrey; color:white; margin-bottom:0; padding:0.2em; }
	h1.header a { text-decoration:none; }
	h1.header .SHARE_HELP { display:none; color:white; font-size:0.7em; vertical-align:middle; }
	h1.header:hover .SHARE_HELP { display:inline; }

	big { display:inline; font-size:2em; }
	medium { display:inline; font-size:1.5em; }

	swap { display:inline-block; transform: scaleX(-1); }

	footer { color:#888; padding:1em; }
	footer a { color:#88A; }

	footer .credit { display:inline-block; }
	footer .credit:before { content:'- '; }
	footer .credit:after { content:' -'; }

	div.top .title { background:transparent; color:white; display:inline-block; font-size:4em; padding-top:1em; }
	div.top .title a { color:white; text-decoration:none; }

	div.top .navigation.menu { display:inline-block; margin-left:1em; }