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

	@font-face{
		font-family: "DialogText";
		src: url("/fonts/sonic_comics.woff") format("woff"); /* Sonic Comic font made by Daniel Wernëck [Empire of Dust] https://www.dafont.com/fr/profile.php?user=76985 */
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	@font-face{
		font-family: "MainText";
		src: url("/fonts/Judges.otf") format("opentype"); /*https://www.dafont.com/fr/judges.font*/
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}

	@media only screen and (max-width: 600px) 
	{
		body { font-size:0.85em; }
		.menu .langs .label { display:none; }
	}
	@media only screen and (max-width: 740px)
	{
		.menu .langs .label { display:none; }
	}
	@media only screen and (min-width: 600px) 
	{
		body { font-size:1em; }
	}
	@media only screen and (min-width: 1800px) 
	{
		body { font-size:1.1em; }
		/*h1.header .SHARE_HELP { display:inline;*/
	}

	* { box-sizing: border-box; }

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

	u { border-bottom: double 0.4em red; text-decoration:none; }

	div.comics { 
		background:transparent;
		display:inline-block;
		font-family: "DialogText", "OpenMoji";
		margin-bottom:1em;
		padding:0em;
		position:relative;
		transform:scale(1.0);
		-webkit-user-select: none; /* Safari/Chrome */
		-moz-user-select: none;    /* Firefox */
		-ms-user-select: none;     /* IE/Edge */
		user-select: none;         /* standard */
		width:auto; 
	}

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


	div.comics > a .click {
		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;
		padding-right:0.7em;
		position:absolute;
		right:1em;
		transform:rotate(-15deg);
		z-index:1000;
	}

	div.comics > a:hover .click {
		background:cadetblue;
	}

	div.comics > h1 { line-height:1.5; margin-left:0.5em; margin-right:0.5em; }

	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:0.5em;
		margin-bottom:1.5em;
		position:relative;
		width:27em;
	}

	div.case .label {
		background:#ffa;
		border:0.2em solid brown;
		bottom:0;
		box-shadow:0 0.5em 1em grey;
		color:brown;
		display:inline-block;
		font-family:"DialogText", "OpenMoji";
		font-size:1em;
		left:2em;
		padding:0.5em;
		padding-left:1em;
		padding-right:1em;
		position:absolute;
		text-align:center;
		transform:translateY(50%);
		z-index:1000;
	}

	div.case .case_counter {
		bottom:0.2em;
		color:#ddd;
		display:inline-block;
		font-family:"DialogText";
		font-size:0.75em;
		left:0.2em;
		position:absolute;
/*		right:0.1em;*/
	}

	div.case .next {
		background:#ffa;
		border:0.25em solid black;
		bottom:0em;
		box-shadow:0 0.5em 1em grey;
		display:inline-block;
		font-family:"DialogText", "OpenMoji";
		padding:0.5em;
		padding-left:1em;
		padding-right:1em;
		position:absolute;
		right:0.5em;
		transform:translateY(50%);
		z-index:1000;
	}

	div.case .note {
		background:#eee;
		border:0.3em dotted black;
		bottom:0em;
		box-shadow:0 0 1em white;
		color:black;
		display:inline-block;
		font-family:"DialogText", "OpenMoji";
		font-size:0.9em;
		left:2.5em;
		padding:0.5em;
		padding-left:1em;
		padding-right:1em;
		position:absolute;
		transform:translateY(50%);
		z-index:1000;
	}
	div.case .note:before { content:'* '; }

	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;
		position:relative; 
		width:auto;
		word-wrap: break-word;
		/*z-index:10;*/
	}

	div.dialog.left    { align-self: flex-start; border-radius: 2em 2em 1em 1em; text-align:justify; }
	div.dialog.right   { align-self: flex-end;   border-radius: 2em 2em 1em 1em; text-align:justify; }
	div.dialog.comment { align-self: flex-start; background:#ffa; max-width:120%; 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.left:before ,
	div.dialog.right:after,
	div.dialog.right:before {
		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, div.dialog.right:before { left:auto; right:1em; }

	div.dialog.left:before, div.dialog.right:before { border-color:transparent; z-index:1000; opacity:0.85; }

/*	div.dialog.left:before, div.dialog.right:before { display:none; }*/

	div.dialog:empty { display:none; }

	@keyframes laugh {
		0%   { transform: translateY(0) rotate(0deg) scale(1); }
		10%  { transform: translateY(-6px) rotate(-8deg) scale(0.98); }
		20%  { transform: translateY(0) rotate(6deg)  scale(1.02); }
		30%  { transform: translateY(-8px) rotate(-6deg) scale(0.97); }
		40%  { transform: translateY(0) rotate(5deg)  scale(1.03); }
		55%  { transform: translateY(-4px) rotate(-3deg) scale(0.99); }
		70%  { transform: translateY(0) rotate(2deg)  scale(1); }
		100% { transform: translateY(0) rotate(0deg)  scale(1); }
	}

	span.laugh { display:inline-block; transform-origin:100%; animation: laugh 1s ease-in-out infinite; }

	@keyframes sad {
		0%   { transform: translateY(0) rotate(0deg) scale(1); }
		15%  { transform: translateY(2px) rotate(-2deg) scale(0.995); }
		30%  { transform: translateY(0) rotate(1.5deg) scale(1.003); }
		60%  { transform: translateY(3px) rotate(-3deg) scale(0.99); }
		100% { transform: translateY(0) rotate(0deg) scale(1); }
	}

	span.sad { display:inline-block; transform-origin:50%; animation: sad 2s ease-in-out infinite; }

	@keyframes fire {
		0%   { transform: translateY(0) rotate(0deg) scaleY(1); }
		20%  { transform: translateY(-4px) rotate(-3deg) scaleY(1.05); }
		40%  { transform: translateY(0) rotate(2deg)  scaleY(0.98); }
		60%  { transform: translateY(-6px) rotate(-4deg) scaleY(1.07); }
		80%  { transform: translateY(0) rotate(3deg)  scaleY(0.99); }
		100% { transform: translateY(0) rotate(0deg)  scaleY(1); }
	}

	span.fire { display:inline-block; transform-origin:100% 80%; animation: fire 400ms ease-in-out infinite; }
	span.fire2 { display:inline-block; transform-origin:100% 80%; animation: fire 400ms ease-in-out infinite; animation-direction:alternate; }

	@keyframes rotate360 {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
		
	}

	span.rotate360 { display:inline-block; transform-origin:50% 50%; animation: rotate360 3s linear infinite; }

	@keyframes trump {
		0%   { transform: rotate(0deg); }
		10%   { transform: rotate(5deg); }
		40%   { transform: rotate(5deg); }
		50%   { transform: rotate(0deg); }
		60%   { transform: rotate(-10deg); }
		80%   { transform: rotate(-10deg); }
		100%   { transform: rotate(0deg); }
	}

	span.trump { display:inline-block; transform-origin:50% 100%; animation: trump 5s ease-in-out infinite; position:relative; }

	@keyframes hiccup {
		0%   { transform: translateY(0)  scaleY(1); }
		19%   { transform: translateY(0)  scaleY(1); }
		20%  { transform: translateY(-0.1em) scaleY(0.95); }
		21%   { transform: translateY(0)  scaleY(1); }
		49%   { transform: translateY(0)  scaleY(1); }
		50%  { transform: translateY(-0.1em) scaleY(0.95); }
		51%   { transform: translateY(0)  scaleY(1); }
		100% { transform: translateY(0)  scaleY(1); }
	}

	span.hic { display:inline-block; transform-origin:50% 100%; animation: hiccup 10s linear infinite; }
	span.hic2 { display:inline-block; transform-origin:50% 100%; animation: hiccup 10s linear infinite; animation-direction:reverse; }
	span.hic3 { display:inline-block; transform-origin:50% 100%; animation: hiccup 8s linear infinite; animation-direction:alternate; }
	span.hic4 { display:inline-block; transform-origin:50% 100%; animation: hiccup 5s linear infinite; animation-direction:alternate; }
	span.hic5 { display:inline-block; transform-origin:50% 100%; animation: hiccup 7s linear infinite; animation-direction:reverse; }
	span.hic6 { display:inline-block; transform-origin:50% 100%; animation: hiccup 13s linear infinite; }

	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;
		z-index:15;
	}

	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:14em;
	}

	nav { background:DarkSlateGrey; 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; }
	.menu .langs { display:inline-block; }

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

	.pagination .btn.top { background:none; 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:inline-block; color:grey; cursor:copy; font-size:0.7em; vertical-align:center; }
	h1.header:hover .SHARE_HELP { display:inline-block; }
	h1.header:hover .SHARE_HELP:active { color:white; }

	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:#355; color:black; font-size:1.5em; padding:1em; }
	div.top .title a { color:grey; text-decoration:none; }
	div.top .title .codename { color:peru; display:inline-block; }