@font-face {
	font-family: 'Muli';
	src: url('Muli-Regular.ttf') format('truetype');
}

html{
	height: 100%;
	background-color: #fdeca6;
	display: flex;
	justify-content: center;
	align-items: center;
}

body {
	display: flex;
	flex-direction: raw;
	justify-content: center;
	align-items: center;
	height: 90%;
	width: 90%;
	border: 10px solid black;
	border-radius: 30px;
	background-color: white;
	font-family:  "Muli";
}

.image{
	height: 100%;
	width: 40%;
	background-image: url("manoir.png");
	background-repeat:no-repeat;
	background-position:center;
}

.info{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 60%;
}

h1 {
	font-size: 70px;
}

.titre{
	display: flex;
	justify-content: center;
	text-align: center;
}

.connect {
	border: 5px solid black;
	background-color: #fdeca6;
	border-radius: 10px;
	font-size: 40px;
	margin: 20px;
	font-family: "Muli";
	
}

.bouton{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin:5px;
}

.champ{
	font-family:  "Muli";
	border: 5px solid black;
	background-color: #fdeca6;
	border-radius: 10px;
	font-size: 20px;
}

.text_champ{
	font-family: "Muli";
	font-size: 20px;
	
}

.deconnexion{
	text-align: right;
}

.en-tete{
	font-size:12px;
	height: 5%;
}

.choix{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content:center;
}

.options{
	display: flex;
	flex-direction: raw;
	height: 20%;
}

.illustration{
	height: 40%;
	display: flex;
	flex-direction: raw;
}

.biblio{
	border: 1px solid black;
	width: 30%;
	margin: 5%;
	/*background-image: url("bibli.png");
	background-size: contain;*/
}

.instru_biblio{
	height: 100%;
	width: 40%;
	background-image: url("bibli.png");
	background-repeat:no-repeat;
	background-position:center;
	background-size: contain;
}



	  
#jspsych-experiment { 
	/*border: 10px solid #999;*/
	width: 55%;
	height: 95%;
	background-color: #FFFFFF;
}

#jspsych-tot { 
	/*border: 10px solid #999;*/
	width: 95%;
	height: 95%;
	background-color: #FFFFFF;
}



.consigne{
	font-size: 25px;
}

.pret{
	font-size: 40px;
	line-height: 150%;
}

#dictionnaire{
	margin-right:2.5%;
	text-align: center;
	width: 20%;
	background-image: url('dictionnaire.jpg');
	background-repeat:no-repeat;
	background-position:center;
	background-size: contain;

	/*border: 10px solid #999;*/

}

#cheminee{
	margin-left:2.5%;
	text-align: center;
	width: 20%;
	background-image: url('cheminee.jpg');
	background-repeat:no-repeat;
	background-position:center;
	background-size: contain;

	/*border: 10px solid #999;*/


}

.blanc{
	width:100%;
	height:100%;
}

#exp{
	display: flex;
	justify-content:center;
	align-items: center;
}

#image_dictionnaire, #image_cheminee{
	width: 100%;
	height: auto;
}

#canvas_exp{
	/*border: 10px solid black;*/
}

#graphe1, #graphe2{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#chapitre1, #chapitre4{
	border: 10px solid black;
	border-radius: 30px;
	background-color: white;
	margin:20px;
	padding:20px;
	width:100%;
}

#chapitre2{
	border: 10px solid black;
	border-radius: 30px;
	background-color: white;
	margin:20px;
	padding:20px;
	width:100%;
}

#chapitre3{
	border: 10px solid black;
	border-radius: 30px;
	background-color: white;
	margin:20px;
	padding:20px;
	width:100%;
}

#exemple{
	height: 100%;
	width: 40%;
	font-family: 'Muli';
	display:flex;
	flex-direction: column;
	justify-content: center;
	vertical-align: middle;
}

#exemple_miroir, #exemple_substi1, #exemple_transpo, #exemple_substi2, #exemple_pseudo, #exemple_homo{
	font-size: 13px;
	display:flex;
	flex-direction: row;
	vertical-align: middle;
}

#exemple_tresfreq, #exemple_freq, #exemple_peufreq, #exemple_rare{
	font-size: 13px;
	vertical-align: middle;
}


#exemple_4lettres, #exemple_5lettres, #exemple_6lettres, #exemple_7lettres, #exemple_8lettres{
	font-size: 13px;
	vertical-align: middle;
}


#exemple_mots{
	height: 100%;
	width: 40%;
	font-family: 'Muli';
	display:flex;
	flex-direction: column;
	justify-content: center;
	vertical-align: middle;
}

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


#graph_lettre{
	width: 50%;

}

#graph_freq{
	width: 50%;

}

.jspsych-survey-multi-choice-text{
	font-family: 'Muli';
	font-size: 15px;
}

#smileypos{
	background-color:#00cc00;
	border: 5px solid black;
	width: 100px;
	height: 100px;

}


#smileyneg{
	background-color:#cc0000;
	border: 5px solid black;
	width: 100px;
	height: 100px;

}

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

.table_word, .table_word_last{
	font-weight:bold;
	font-size:xx-large;
	width:23%;
	padding:15px;

}
.table_word{
	border-bottom: 2px solid black;
}


.table_titre{
	border-bottom: 2px solid black;
	border-right: 2px solid black;
	border-collapse: collapse;
	border-spacing:0;
	font-size:xx-large;
	font-weight:normal;
	width:31%;
	padding:15px;
	text-align: center;
}

.table_titre_last{
	border-right: 2px solid black;
	border-collapse: collapse;
	border-spacing:0;
	font-size:xx-large;
	font-weight:normal;
	width:31%;
	padding:15px;
	text-align: center;
}

table{
	width: 100%;
	
}

.sentences{
	font-size:xx-large;
}

#image_dico_pos, #image_chem_pos{
	margin-left:5%;
	margin-right:5%;
}

.table_pseudo{
	font-weight:bold;
	font-size:xx-large;
	width:20%;
	padding:15px;
	text-align:center;
}

.conseil{
	font-size:xx-large;
	text-align:center;
	margin-top:20px;
}