@charset "utf-8";
/* CSS Document */

h1{
	font-family: "Kode Mono",serif;
	font-size: 18pt;
}
/*supprimer toutes les règles par défaut du html*/
h3, p, a{
	font-family: "Kode Mono", serif;
	font-size: 18pt;
}

p{
	margin-top : 10px;
}

.b{
	color : #3EE2FF;
}

.r{
	color : #ef2b6c;
}

.g{
	color : #aaaaaa;
}


*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	max-height: 100vh; /*la hauteur est fixée à celle de l'élément contenu dans le body*/
}

.one{
	width: 100vw;
	max-height: 100vh;
	background-image: url("img_motifs/dufaur_cartographie de l'impossible.png.png");
	background-size: cover;
	background-position: center;
}

.two{
	width: 100vw;
	max-height: 100vh;
	background-image: url("img_motifs/dufaur_trucage magique.png.png");
	background-size: cover;
	background-position: center;
}

.three{
	width: 100vw;
	max-height: 100vh;
	background-image: url("img_motifs/dufaur_pluralité des minorités.png.png");
	background-size: cover;
	background-position: center;
}

.four{
	width: 100vw;
	max-height: 100vh;
	background-image: url("img_motifs/dufaur_random system.png.png");
	background-size: cover;
	background-position: center;
}

.five{
	width: 100vw;
	max-height: 100vh;
	background-image: url("img_motifs/dufaur_mécanique de l'organique.png.png");
	background-size: cover;
	background-position: center;
}

.slide{
	width: 100vw; /*100% de la largeur*/
	height: 100vh; /*100% de la hauteur*/
	display: flex; /*les boites s'organisent les unes vis à vis des autres et non plus selon le flux html*/
	justify-content: flex-start; /*pour centrer ligne*/
	align-items: flex-end; /*pour centrer colonne*/
	padding : 40px;
}

/*pivoter les slides*/
.scrollHorizontal{
	display: flex;
	flex-direction: row;
	width: 500vw; /*on muliplie la valeur de 100vw (tailles des images) par le nombre d'images : 3 (5 pour le projet)*/
	transform: rotate(90deg) translateY(-100vh); /*vh = hauteur d'une slide*/
	transform-origin: top left;
}

.container{
	width: 100vh;
	height: 100vw; /*inversement des unités la largeur est la hauteur et la hauteur est la largeur*/
	transform: rotate(-90deg) translateX(-100vh);
	transform-origin: top left;
	overflow-x: hidden;
}

/*supprimer barres de défilement pour chrome*/
::-webkit-scrollbar{
	display: none;
}

.bouton {
	display: flex;
	margin-top: 10px;
}

.bouton_content{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	
}

a{
	text-decoration: none;
}


/*paramètre des fenêtres modales*/
.modal1_content{
	padding: 40px;
	width: 45vw;
	position: relative;
}

.modal1{
	width: 100vw;
	height: 100vh;
	position: absolute;
	left: 0px;
	top: 0px;
	background: rgba(0, 0, 0, 0.80);
	display: flex;
	visibility: hidden;
}


.modal1_close{
	position: absolute;
	display : block;
	background: none;
	border : none;
	font-size: 18pt;
	margin-top : 10px;
}

.modal1:target{
	visibility: visible;
	opacity: 1;
}

.modal2_content{
	padding: 40px;
	width: 45vw;
	position: relative;
}

.modal2{
	width: 100vw;
	height: 100vh;
	position: absolute;
	left: 100vw;
	top: 0px;
	background: rgba(0, 0, 0, 0.80);
	display: flex;
	visibility: hidden;
}

.modal2_close{
	position: absolute;
	display : block;
	background: none;
	border : none;
	font-size: 18pt;
	margin-top : 10px;
}

.modal2:target{
	visibility: visible;
	opacity: 1;
}

.modal3_content{
	padding: 40px;
	width: 45vw;
	position: relative;
}

.modal3{
	width: 100vw;
	height: 100vh;
	position: absolute;
	left: 200vw;
	top: 0px;
	background: rgba(0, 0, 0, 0.80);
	display: flex;
	visibility: hidden;
}

.modal3_close{
	position: absolute;
	display : block;
	background: none;
	border : none;
	font-size: 18pt;
	margin-top : 10px;
}

.modal3:target{
	visibility: visible;
	opacity: 1;
}

.modal4_content{
	padding: 40px;
	width: 45vw;
	position: relative;
}

.modal4{
	width: 100vw;
	height: 100vh;
	position: absolute;
	left: 300vw;
	top: 0px;
	background: rgba(0, 0, 0, 0.80);
	display: flex;
	visibility: hidden;
}

.modal4_close{
	position: absolute;
	display : block;
	background: none;
	border : none;
	font-size: 18pt;
	margin-top : 10px;
}

.modal4:target{
	visibility: visible;
	opacity: 1;
}

.modal5_content{
	padding: 40px;
	width: 45vw;
	position: relative;
}

.modal5{
	width: 100vw;
	height: 100vh;
	position: absolute;
	left: 400vw;
	top: 0px;
	background: rgba(0, 0, 0, 0.80);
	display: flex;
	visibility: hidden;
}

.modal5_close{
	position: absolute;
	display : block;
	background: none;
	border : none;
	font-size: 18pt;
	margin-top : 10px;
}

.modal5:target{
	visibility: visible;
	opacity: 1;
}