body{
	width: 100%;
  	height: 100%;
	background:linear-gradient(to bottom, #000000, #9957bf);
	overflow: auto;
}

header{
	margin-bottom: 5%;
}

#logo{
	padding: 1%;

}

h1{
	font-family: 'Telma-Regular';
	color: white;
	font-size: 1.5rem;
	display: inline-block;
	margin-right: 0.5vw;
}


h2{
	color: white;
	font-family: 'LatoWeb';
	font-size: 0.8rem;
	display: inline-block;
}


#boite{
	width: 90%;
    height: 80%;
    margin: auto;
    display: flex;
    justify-content: space-between;

}

.titres{
	width: 33%;
    height: 100%;

}

h4{
	font-size: 2rem;
	font-family: 'Telma-Regular';
	text-align: center;
	color: white;
	border: solid white 2px;
	border-radius: 30px;
	padding: 7px;
	margin-bottom: 5%;
	cursor: pointer;
}

p{
	color: white;
	
}

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

a:hover{
	font-style: oblique;
	color: #F7E0BF;
}

.infos{
	width: 100%;
	font-family: 'LatoWeb';
	margin-bottom: 7%;
	margin-top: 5%;
}

.infos .type{
	font-style: italic;
	margin-bottom: 3%;
	color: white;
}

.infos .date{
	font-family: 'LatoWebSemibold';
	margin-bottom: 7%;
	color: white;
}


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

img{
    /*max-height: 20%;*/
    max-width: 100%;
}


.images img{
	margin-bottom: 3%;
}

footer{
	text-align: center;
	font-family: 'LatoWeb';
	padding: 0.5%;
}

/* 	  ____   ____ ____  ___ ____ _____ 
	 / ___| / ___|  _ \|_ _|  _ \_   _|
	 \___ \| |   | |_) || || |_) || |  
	  ___) | |___|  _ < | ||  __/ | |  
	 |____/ \____|_| \_\___|_|    |_|
*/

#infos_recit_enjeu, #recit_enjeu, #infos_not_video_game, #not_video_game, #infos_son, #archive_son, #infos_taches, #Faites_taches, #infos_sect, #sect_talk, #infos_riso, #images_fanzine, #infos_exp, #experimentation{
	display: none;
}