html {
	background-color:#111111;
	background-image: url('img/stars-1.png'), url('img/stars-2.png'), url('img/nebulae_pattern.jpg');	
	background-position:top center;
	background-repeat:repeat;
	max-width:100vw;
	max-height: 100vh;
	background-attachment: fixed;
}

body.main {
	max-width:1100px;
	margin:auto;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

body nav {
	top:0px;
	position: sticky;
	border-bottom:2px solid black;
	z-index:1;
}
main {
	display: flex;
	width: 100%;
	margin-top:0.5em;
	flex: 2 1 auto;
}
		.error {
			width: 100%;
			height: 100%;
			display: flex;
			background: rgba(0,0,0,0.5);
			color: white;
			text-align: center;
			justify-content: center;
			flex: 1 1 auto;
			flex-direction: column;
			height: 50vh;
		}
		
		.menu {
			font-family: 'menu';
			font-weight: normal;
			color: white;
			text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000;
			}

div.ban{
	height:auto;
	background-color:black;
	width:auto;
	/*margin-bottom:2px;*/

}

	.ban h1{
		/*! float:left;*/
		font-size:16px;
		color:white;
	}
	
	.ban a{
		text-decoration:none;
	}

	.ban img {
		border:none;
		object-fit: cover;
		max-width:1100px;
		width:100%;
		height:130px;
	}
	
	
	img.left{
		float:left;
	}
	
	img.right{
		float:right;
	}

	
.column_left{
	/*! float:left; */
	/*! width:100%; */
	height:auto;
	/*! background-color: rgba(29,29,29,0.7); */
	/*! border-radius: 0.5em; */
	padding: 0 0.1em 0 0;
	min-width: 200px;
	flex: 0 1;
}
		.column_left>div {
		  background-color: rgba(29,29,29,0.7);
		  border-radius: 0.5em;
		  margin-bottom: 0.5em;
		  /*! border-bottom: 1px solid; */
		  box-shadow: 0 12px 8px -9px rgba(0,0,0,0.8);
		}

.column_right{
	width:100%;
	height:auto;


	padding: 0 0.25em;
	flex: 2 1;
}


.center{
	text-align:center;
}

	.column_right iframe {
		width: 95%;
		height: 100vw;
		max-height: 100vh;
		display: block;
		margin: auto;
		border:none;
		padding: 0.5em 0;
	}
		#viewer {
			display: none;
		}
			#viewer:target {
			  display: initial !important;
			}
			.viewer{
				background-image: linear-gradient(rgba(76, 117, 122, 0.9), rgba(58, 88, 92, 0.7));
				display: block;
				width: calc(100% - 10px );
				font-family: verdana;
				border-radius: 0.5em;
				margin: 5px auto;
				transition: all 0.3s ease;
				box-shadow: 0 12px 8px -9px rgba(0,0,0,0.8);
				text-align: center;
				padding: 0.5em 0;
			}
			.viewer a {
			  font-family: menu, arial;
			  color: #d7b500;
			  text-shadow: 1px 1px 2px black,1px 1px 2px black,1px 1px 2px black,1px 1px 2px black,1px 1px 2px black;
			  padding: 0.5em 1em;
			  text-align: center;
			  margin: auto;
			  letter-spacing: 0.1em;
			}
	
		.center.calameo > iframe {
		  height: 200px;
		  width: 350px;
		  border:none;
		  border-top:2px solid rgba(76, 117, 122, 0.9);
		  border-radius: 0.5em;
		}


		.center.calameo a{
		 color: white;
		  
		}
		.center.calameo {
		  display: block;
		  background:rgba(0,0,0,0.5);
		  border-radius: 0.5em;
		  padding:1em 0;
		  margin: 0.5em auto;
		  border-bottom:2px solid rgba(76, 117, 122, 0.9);
		  
		}


	.column_right div{
	}
	
		.column_right div.link{
			float:left;
			display: block;
			width:100%;
		}
.eracontent {
    display: none; /* Masquer par defaut */
    /* opacity: 0; /* Assure une transition fluide */
    transition: opacity 0.5s ease-in-out; 
}

.eraban {
	float:left;
	border:none;
	width:100%;
	margin-bottom:8px;
	border-radius:2px;
	background-color:black;
	opacity:0.9;
	box-shadow: 0 12px 8px -9px rgba(0,0,0,0.8);
	}
	.eraban .erabancontent{
		height: 100px;
		background-size: cover;
		background-position: left;
		display: flex;
		align-items: center;
		height:95px;
		box-shadow: inset 0 0 0 4px black; /* bordure noire interne */
	}
	.eraban .eratitle{
		color: white;
		width: 100%;
		width: 100%;
		font-family: menu, Arial;
		text-align: right;
		padding: 0 0.8em;
		font-size: 1.8em;
		background-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0.4),rgba(0,0,0,0.5));
		text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000;
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}

	.eraban:hover{
			cursor:pointer;
			opacity:1.0;
			box-shadow: 0 12px 8px -9px rgba(255, 120, 196, 0.22);
	}
		
	.eraban img{
		float:left;	
		width:100%;	
	}

div.serie {
	 /*1100-2*padding-2*bordure-largeur du menu-marginleft*/
	background-image:linear-gradient( to bottom , RGBA(221, 188, 186, 0.75), RGBA(221, 188, 186, 0.5));
	border-bottom:5px solid rgba(0, 0, 0, 0.9);
	/*! height:auto; */
	/*! float:left; */
	font-size:0.8em;
	text-align:justify;
	font-family:Verdana;

	border-radius: 0.8em;
	/*! width: 100%; */
	margin-bottom: 0.5em;
	display:flex;
}


		.serie>div {
			padding: 0.5em;
			width: 100%;
		}
		.serie>div>p {
			padding: 0.5em 2em;
		}

	.serie img{
		max-width:100%;
		margin: 15px auto;
		height:auto;
	}

	.serie h1 {
		margin:5px;
		padding:0px;
		color:#4C1C19;
		font-family:Georgia;
		font-variant:small-caps;
		font-size:27px;
		text-align:center;	
	}
	
	.serie h2{
		margin-bottom:10px;
		margin-top:10px;
		color:#983731;
		font-family:Georgia;
		font-variant:small-caps;
		font-size:20px;
	}
	.eracontent{
		display:none;
	}
	
div.entry{
	/*couleur du bas de bgdark.gif*/
	width:100%; /*1100-2*padding-2*bordure-largeur du menu-marginleft*/
	width: calc(100% - 10px );
	font-family:verdana;
	background-image: linear-gradient(rgba(76, 117, 122, 0.9), rgba(58, 88, 92, 0.7));
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	flex: 1 1 auto;
	border-radius: 0.5em;
	margin: 5px auto;
	transition: all 0.3s ease;
	box-shadow: 0 12px 8px -9px rgba(0,0,0,0.8);
}

	div.entry > div {
		margin: auto;
	}
	
	.entry > h2.result{
		text-align: center;
		margin: auto;
		font-family: menu;
		letter-spacing: 0.02em;
		color: white;
		font-weight: initial;
		text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000;
	}

	div.entry:hover{

		/*! background:url('img/bglight2.gif') repeat-x; */
		/*! background-color:#6b979c; */
		background-image: linear-gradient(rgba(132, 171, 176, 0.9), rgba(54, 100, 107, 0.5));
		transition: all 0.3s ease;
		
	}
	
	div.entry hr {
		margin: 0.5em 0;
	}
	
	div.era{
		/*! float:left; */
		width:80px;
		margin-right:10px;
		margin-top:auto;
		margin-bottom:auto;
		font-size:14px;
		font-weight:bold;
		color:#EFFBFF;
		padding: 10px;
		flex: 0 0 auto;
	}
	
		.era img {
			border:none;
		}
		.era img:hover {
			filter:invert(100%);
		}
	
	div.avatar{
		/*! float:left; */
		width:150px; /*taille de l'image*/
		flex: 0 0;
		padding: 0.5em;
	}
	
	div.avatar img{
		width:150px; /*forcer l'image à 150px*/
	}

	
	div.synopsis{
		margin-left:10px;
		padding: 10px;
		flex: 1px 1;
		min-width: 50%;
	}
	
		.synopsis h1{		
			margin:0px;
			padding:0px;
			font-size:22px;
			color:#EFFBFF;
			font-family:'menu';
			font-variant:small-caps;
			letter-spacing: 0.05em;
			font-weight: initial;
			text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000;
		}
		
			.synopsis h1 a {
				text-decoration:none;
				color:inherit;
			}
			
			.synopsis h1 a:hover{
				text-decoration:underline;
			}
		
		.synopsis h2{		
			margin:0px;
			padding:0px;
			font-size:14px;
			font-weight:bold;
		}
		
			.synopsis h2 a,.synopsis h3 a  {
				text-decoration:none;
				color:inherit;
			}
			
			.synopsis h2 a:hover,.synopsis h3 a:hover{
				color:white;
			}
		
		.synopsis h3{
			margin-top:0px;
			margin-bottom:10px;
			padding:0px;
			font-size:12px;
			font-style:italic;
		}
		
		.synopsis span.collection_title{
			color:#84CECC;
		
		
		}
		
			.collection_title a{
				text-decoration:none;
				color:inherit;
			}
			
			.collection_title a:hover{
				color:#ADDEDD;
			}
		
		.synopsis p{
			margin:0px;
			padding:0px;
			font-size:12px;
			font-style:italic;
			text-align:justify;
		}
	
		.link{		
		float:right;		
		}
		
		.link img{
			width: 20px;
			margin: -3px 5px;		
		}
		
		.link a{
			color:#E8CC06;
			/*float:right;*/
			font-family:georgia;
		}
		
		.link a:hover{
			color:#F4FF3A;
		}
		
		
.update {
	/*! float:left; */
	width:100%;
	height:auto;
	/*! background-color:#1d1d1d; */
	/*! border-top:5px solid black; */
}

.search input{
	margin: auto;
	display:block;
}
.search input[type=submit]{
	background:none;
	border:none;
	cursor:pointer;
}
.search form input:first-child {
  text-align: center;
  padding: 0.2em;
  font-weight: bold;
  font-style: italic;
  border-radius: 0.5em;
  border: none;
  box-shadow: 0px 0px 6px 0px black inset;
}
.search form input:first-child:focus {
  box-shadow: 0px 0px 6px 2px #ca35e7 inset;
}

.titlemenu {

	line-height: 32px;
	background-color: #ad3897;
	background-image:  url('../img/menu/titlemenu.jpg') !important;
	color:white;
	font-size:22px;
	color:#EFFBFF;
	font-family:'menu';

	text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000;
	letter-spacing: 0.1em;
	object-fit: cover;
	background-size: cover;
	font-variant: small-caps;
	margin-bottom: 10px;
}

		.subupdate{
			padding:5px;
			color:#EFFBFF;
			font-size:15px;
			margin-top:0px;
			margin-bottom:10px;
		}
		
		.subupdate p{
		}
		
		.subupdate span.translator{
			font-style:italic;	
		}
		
		.subupdate a{
			color:#E8CC06;
			font-size:17px;
			text-decoration:none;
			font-weight:bold;
		}
		
		.subupdate hr{
			clear:both;
		}
		.subupdate a.title {
			color: #E8CC06;
			font-family: menu, Arial;
			font-size: 1em;
			text-shadow: 2px 2px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000, 0px 0px 2px #000;
			/*text-transform: uppercase;*/
			letter-spacing: 0.05em;
			font-weight: normal;
		}

		.subupdate a.author{
			color: #C4FCCA;
			text-decoration:none;
			font-size:17px;
			font-weight: normal ;
			font-style: italic;
		}
		
		.subupdate a:hover{
			color:#F4FF3A;
		}
		
		.right{
			margin-top:5px;
			float:right;
			font-size:10px;
			margin-bottom:10px;
			color:#4C767A;
			
			}

	.legende{
		/*! float:left; */
		/*! border-top:5px solid black; */
		/*! background-color:#1d1d1d; */	
		width:100%;
	}
	
	.legende ul {
		display: flex;
		flex-flow: column;
	}
	
	.legende li img{
		width:35px;
		filter:invert(1);
	
	}
	

	.legende li{
		width:100%;
		margin-bottom:15px;
		list-style: none;
		display: flex;
	}
	
	.eratitle.legends::before {
		content: "─ Legends ─";
		display: block;
		font-size: 0.5em;
		font-family: "trajan pro", serif, sérif;
		color: #ffef00;
		font-style: oblique;
	}
	.eratitle.officiel::before {
		content: "─ Officiel ─";
		display: block;
		font-size: 0.5em;
		font-family: "trajan pro", serif, sérif;
		color: #afbcff;
		font-style: oblique;
	}
	
	.legende p.eratitle{
		color:#6B979C;
		font-weight:bold;
		font-size:14px;
		margin:0px;
	}
	
		.eratitle a{
		text-decoration:none;
		color:inherit;
		
		}
		.eratitle a:hover{
		text-decoration:underline;
		}
	.legende p.desc{
		margin:0px;
		color:white;
		font-size:11px;
		font-style:italic;
	}
	
.return {
    width: 100%;
    background-color: rgba(0,0,0,0.3);
    color: white;
    text-align: center;
}
.return a{
	text-decoration:none;
	color:#E8CC06;
	}
	
a.back:hover{
	text-decoration:underline;
	letter-spacing: 0.06em;
}
.back {
	font-family: menu;
	letter-spacing: 0.04em;
	font-variant: small-caps;
	line-height: 2em;
}
	.external_link{
	/*! float:left; */
	/*! border-top:5px solid black; */
	/*! border-bottom:5px solid black; */
	/*! background-color:#1d1d1d; */	
	width:100%;
	}
	
	.external_link img {
	border:none;
	margin-bottom:10px;
	}
	
	.external_link p{
	color:#6B979C;
	font-weight:bold;
	}
	
#contact {
	  color: #cb84d4 !important;
	  text-shadow: 0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black,0 0 3px black;
	  margin-bottom:1em;
	  
	}
	#contact fieldset{
		display: flex;
		flex: 1 1 auto;
		color: white;
		justify-content: center;
		text-align: center;
		justify-items: center;
		flex-flow: column;
		font-size: 1em;
		font-family: menu;
		border-radius: 1em;
		border-bottom: 1px solid #31c089;
		background-image: linear-gradient(to top, rgba(103, 216, 140, 0.2),rgba(216, 103, 211, 0.13));
		/*! text-shadow: 1px 1px black, 0 1px black, 1px 0 black, -1px -1px black , 2px 2px black , -2px 2px black, -2px -2px black, 2px -2px black;*/
		letter-spacing: 0.1em;
		font-weight: normal;
		margin-top:0.5em;
	}

	#contact .input {
	  padding: 0.25em;
	  border-bottom: 1px #cb84d4 dashed;
	  display: flex;
	  flex-wrap: wrap;
	  flex-direction: row;
	}
	#contact input, #contact textarea {
	  display: inline-flex;
	  flex: 2 1 auto;
	}

@media screen and (max-width: 1100px) {
main {
	flex-wrap: wrap;
	flex-direction: column-reverse;
	width: 95%;
	margin: auto;

}
	.eraban {
		width:100%;
	}
}