/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/*                      LARGEUR > 1080 px                                    */
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/

@font-face {
	font-family: "pixou";
	src: url("font/VCRosdNEUE.ttf");
}

@font-face {
	font-family: "OuterWlike";
	src: url("font/LouisGeorgeCafe.ttf");
}

@keyframes clignotement_alerte {
	from {
		color: red;
	}
	to {
		color: white;
	}
}

@keyframes clignotement_felicitation {
	from {
		color: green;
	}
	to {
		color: white;
	}
}

@keyframes clignotement_lien_survole {
	from {
		color: red;
	}
	to {
		color: yellow;
	}
}

@keyframes clignotement_retroquizz_start_button {
	from {
		color: blue;
	}
	to {
		color: red;
	}
}

a {
	color: black;
	text-decoration: none;
}

a:hover {
	animation-name: clignotement_lien_survole;
	animation-duration: 0.1s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}

body {
	display: flex;
	flex-direction: column;
	height: 98%;
}

html {
	background-color: #101111;
	background-image: url("images/textures/ringardos.jpg");
	background-repeat: repeat;
	color: black;
	font-family: "OuterWlike";
	height: 100%;
}

p{
	margin-left: 5%;
	margin-right: 5%;
}

table {
	margin: auto;
}

td, th {
	padding: 1em;
	background-color: white;
	border-collapse: collapse;
	border-style: solid;
	border-width: 1px;
	border-radius: 0.5em;
}

ul, li {
	list-style: none;
}

[type="submit"] {
	font-family: "OuterWlike";
	font-size: 2.1em;
}

.alerte, .felicitation{
	color: black;
	font-size: 2em;
	animation-duration: 0.5s;
	animation-direction: alternate;
	animation-iteration-count: 10;
}

.alerte {
	animation-name: clignotement_alerte;
}

.bloc_question_reponse {
	background-color: #9cc2ff;
	border-style: solid;
	border-color: black;
	border-radius: 0.5em;
	border-width: 1px;
	margin-bottom: 0.5em;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
}

[type=radio] {
	color: #81038c;
	height: 1.5em;
	width: 1.5em;
}

.backgroundcolor_rouge {
	background-color: red;
}

.backgroundcolor_vert {
	background-color: green;
}

.bold {
	font-weight: bold;
}

.felicitation {
	animation-name: clignotement_felicitation;
}

.lien_sujet {
	background-color: white;
	font-size: 1,5em;
	text-align: center;
	margin: auto;
	width: 80%;
}

.numero_bloc_question_reponses{
	background-color: white;
	border-color: black;
	border-radius: 1em;
	border-style: solid;
	border-width: 1px;
	font-size: 1,5em;
	font-weight: bold;
	text-align: center;
	margin: auto;
	width: 10%;
}

.orange {
	color: #a31e00;
}

.rouge {
	color: red;
}

.vert {
	color: green;
}

#image_sujet {
	width: 50%;
}

#retroQuizz_start_button{
	animation-name: clignotement_retroquizz_start_button;
	animation-duration: 0.8s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}

#tableau_des_membres {
	display: flex;
  	align-items: center;
  	justify-content: center;
  	height: 100%
}

#lien_nouvelle_partie, #score {
	animation-name: clignotement_retroquizz_start_button;
	animation-duration: 2s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}

/* ------ */
/* ------ */
/* LAYOUT */
/* ------ */
/* ------ */

/* TITRE */

h1{
	font-size: 2.4em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

h2{
	font-size: 1.8em;
}

#titre {
	display: flex;
	height: 20%;
	text-align: center;
	background-color: rgba(255,255,255,0.8);
	border-style: solid;
	border-color: black;
	border-width: 1px;
	border-radius: 0.5em;
}

	#inner_titre {
		background-color: white;
		width: 50%;
		margin: auto;
		margin-bottom: 0.5em;
		margin-top: 0.5em;
		text-align: center;
		border-style: solid;
		border-color: black;
		border-width: 1px;
		border-radius: 0.5em;
	}

/* SOUS LE TITRE */

#sous_le_titre {
	display: flex;
	height: 70%;
	width: 100%;
	justify-content: space-between;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

	#menu_invariable {
		background-color: rgba(255,255,255,0.8);
		width: 20%;
		overflow-y: scroll;
		border-style: solid;
		border-color: black;
		border-width: 1px;
		border-radius: 0.5em;
	}

		#inner_menu_invariable {
			height: 90%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

	#page_particuliere {
		background-color: rgba(255,255,255,0.8);
		min-width: 40%;
		width: 60%;
		margin-left: 0.5em;
		margin-right: 0.5em;
		overflow: auto;
		border-style: solid;
		border-color: black;
		border-width: 1px;
		border-radius: 0.5em;
	}

		#inner_page_particuliere {
			background-color: white;
			padding: 0.5em;
			margin-top: 0.5em;
			margin-left: 0.5em;
			margin-right: 0.5em;
			margin-bottom: 0.5em;
			text-align: center;
			border-style: solid;
			border-color: black;
			border-width: 1px;
			border-radius: 0.5em;
		}

	#menu_page_particuliere {
		background-color: rgba(255,255,255,0.8);
		min-width: 20%;
		max-width: 40%;
		border-style: solid;
		border-color: black;
		border-width: 1px;
		border-radius: 0.5em;
		overflow: auto;
	}

		#inner_menu_page_particuliere {
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			border-style: solid;
			border-width: 1px;
			border-radius: 0.5em;
			margin: 0.5em;
			padding: 0.5em;
			background-color: white;
		}

/* PIED DE PAGE */

#pied_de_page {
	display: flex;
	height: 10%;
	text-align: center;
	font-size: 1em;
	background-color: rgba(255,255,255,0.8);
	border-style: solid;
	border-color: black;
	border-width: 1px;
	border-radius: 0.5em;
}

	#inner_pied_de_page {
		background-color: white;
		width: 70%;
		margin: auto;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
		text-align: center;
		border-style: solid;
		border-color: black;
		border-width: 1px;
		border-radius: 0.5em;
	}

	#inner_pied_de_page h3 {
		margin: 0.5em;
	}

/* ------- */
/* ------- */
/* ACCUEIL */
/* ------- */
/* ------- */

.article p {
	text-align: start;
	font-size: 1.2em;
}

.article h3 {
	font-size: 1.3em;
}

/* ------- */
/* ------- */
/*  JEUX   */
/* ------- */
/* ------- */

#choix_du_jeu a li{
	margin-bottom: 0.5em; 
	margin-top: 0.5em;
}

#choix_du_jeu {
	padding: 0;
}

/******************************************************************************/
/******************************************************************************/
/******************************************************************************/
/*                      LARGEUR <= 1080 px PORTRAIT                           */
/******************************************************************************/
/******************************************************************************/
/******************************************************************************/

@media screen and (max-width: 1080px) and (min-height: 1080px){

	#titre {
		display: flex;
		height: 10%;
		text-align: center;
		background-color: rgba(255,255,255,0.8);
		border-style: solid;
		border-color: black;
		border-width: 1px;
		border-radius: 0.5em;
	}

	#sous_le_titre {
		display: flex;
		flex-direction: column;
		height: 85%;
		width: auto;
		justify-content: space-between;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}

		#menu_invariable {
			background-color: rgba(255,255,255,0.8);
			width: 100%;
			border-style: solid;
			border-color: black;
			border-width: 1px;
			border-radius: 0.5em;
			overflow-y: hidden;
		}

			#inner_menu_invariable {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				margin-top: 0.5em;
				margin-bottom: 0.5em;
			}

		#page_particuliere {
			background-color: rgba(255,255,255,0.8);
			width: auto;
			height: 100%;
			margin-left: 0;
			margin-right: 0;
			margin-top: 0.5em;
			margin-bottom: 0.5em;
			overflow: auto;
			border-style: solid;
			border-color: black;
			border-width: 1px;
			border-radius: 0.5em;
		}

			#inner_page_particuliere {
				background-color: white;
				padding: 0.5em;
				margin-top: 0.5em;
				margin-left: 0.5em;
				margin-right: 0.5em;
				margin-bottom: 0.5em;
				text-align: center;
				border-style: solid;
				border-color: black;
				border-width: 1px;
				border-radius: 0.5em;
			}

		#menu_page_particuliere {
			background-color: rgba(255,255,255,0.8);
			min-width: 20%;
			max-width: none;
			width: 100%;
			border-style: solid;
			border-color: black;
			border-width: 1px;
			border-radius: 0.5em;
			overflow: auto;
		}

			#inner_menu_page_particuliere {
				text-align: center;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				border-style: solid;
				border-width: 1px;
				border-radius: 0.5em;
				margin: 0.5em;
				padding: 0.5em;
				background-color: white;
			}

	#pied_de_page {
		display: flex;
		height: 5%;
		text-align: center;
		font-size: 1em;
		background-color: rgba(255,255,255,0.8);
		border-style: solid;
		border-color: black;
		border-width: 1px;
		border-radius: 0.5em;
	}

		#inner_pied_de_page {
			background-color: white;
			margin: auto;
			margin-top: 0.5em;
			margin-bottom: 0.5em;
			text-align: center;
			border-style: solid;
			border-color: black;
			border-width: 1px;
			border-radius: 0.5em;
		}

		#inner_pied_de_page h3 {
			margin: 0.5em;
		}


}