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

*{
	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*/
}

.slide{
	width: 100vw;
	height:100vh;
	display: flex; /*les boits s'organisent les unes vis à vis des autres et non plus selon le flux html*/
	align-items: center;
	
}

.one{
  min-width: 100vw;
  height: 100vh;
  background-image: url("img/matrice.png");
  background-size: cover;
  background-position: center;
	
}

.two{
	min-width: 100vw;
	height: 100vh;
	background-image: url("img/forme-vivante.png");
	background-size: cover;
	background-position: center;
	 
}


.three{
	min-width: 100vw;
	height: 100vh;
	background-image: url("img/specimen.png");
	background-size: cover;
	background-position: center;
	
}

.four{
	min-width: 100vw;
	height: 100vh;
	background-image: url("img/mirage.png");
	background-size: cover;
	background-position: center;
	
}

.five{
	min-width: 100vw;
	height: 100vh;
	background-image: url("img/sans-titre.png");
	background-size: cover;
	background-position: center;
	
}

.scroll_horizontal{
	display: flex;
	flex-direction: row;
	width: 300vw; /*on multiplie la valeur de 100vw demandée dans "slide" par le nombre de boites contenues (ici 3div) */
	transform: rotate(90deg) translateY(-100vh); /* pour repositionner la boite dans la fenêtre*/
	transform-origin: top left; /*le container pivote à partir du point en haut à gauche*/
	
}

.container{
	width: 100vh;
	height: 100vw; /*les unités de mesure habituelles sont inversées !*/
	transform: rotate(-90deg) translate(-100vh);
	transform-origin: top left;
	overflow-x: hidden; /*permet le scroll horizontal*/
}

/*supprimer les barres de navigation que pour chrome*/
::-webkit-scrollbar{
	display:none;
	
}

/*réglage du bouton et titre*/
.bouton_content{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.bouton{
	display:flex;
	justify-content:flex-start;
	margin-left:30px;
		
}
a:hover{
	background-color: rgba(255,255,255,0.35);
	color: white;
}

a{
	text-decoration: none;
	background: none;
	padding : 6px 14px;
	border :2px solid white;
	border-radius: 40px;
	
}

a{
	font-family: 'Libre Caslon Text', serif;
	font-style: italic;
    color: white;
	font-size: 2.3em;
	
}


h3{
	font-family: 'Roboto Mono', monospace;
	font-weight: 100;
	font-style: oblique;
	color: white;
	font-size: 18px;
	margin-bottom: 10px;

}

p{
	font-family: 'Roboto Mono', monospace;
	font-weight: 100;
	color: white;
	font-size: 13.5px
}

.modal1{
	width:65vh;
	height:25vh;
	position:fixed;
	left:0;
	top: 58%;
	padding-left: 30px;
	margin-bottom: 30px;
	background: rgba(0,0,0,0.8);
	display:flex;
	/*masquer la fenêtre modale*/
	visibility:hidden;
	opacity:0;
}
/*target pour indiquer au navigateur d'afficher l'ancre demo*/
.modal1:target{
	visibility:visible;
	opacity: 1;
}

.modal1_close{
	position:absolute;
	right:1px;
	top:2px;
	color:255,255,255;
	background:none;
	border:none;
	font-size:36px;
}

/*régler la position des éléments contenus dans la boite*/
.modal1_content{
	background:none;
	padding:2em;
	width:100%;
	
}



.modal2{
	width:65vh;
	height:25vh;
	position:absolute;
	left:100;
	top: 60%;
	margin-bottom: 30px;
	background: rgba(0,0,0,0.8);
	display:flex;
	/*masquer la fenêtre modale*/
	visibility:hidden;
	opacity:0;
}
/*target pour indiquer au navigateur d'afficher l'ancre demo*/
.modal2:target{
	visibility:visible;
	opacity: 1;
}

.modal2_close{
	position:absolute;
	right:1px;
	top:2px;
	color:255,255,255;
	background:none;
	border:none;
	font-size:36px;
}

/*régler la position des éléments contenus dans la boite*/
.modal2_content{
	background:none;
	padding:2em;
	width:100%;
	
}

.modal3{
	width:65vh;
	height:25vh;
	position:absolute;
	left:200;
	top: 60%;
	margin-bottom: 30px;
	background: rgba(0,0,0,0.8);
	display:flex;
	/*masquer la fenêtre modale*/
	visibility:hidden;
	opacity:0;
}
/*target pour indiquer au navigateur d'afficher l'ancre demo*/
.modal3:target{
	visibility:visible;
	opacity: 1;
}

.modal3_close{
	position:absolute;
	right:1px;
	top:2px;
	color:255,255,255;
	background:none;
	border:none;
	font-size:36px;
}

/*régler la position des éléments contenus dans la boite*/
.modal3_content{
	background:none;
	padding:2em;
	width:100%;
	
}


.modal4{
	width:65vh;
	height:25vh;
	position:absolute;
	left:300;
	top: 60%;
	margin-bottom: 30px;
	background: rgba(0,0,0,0.8);
	display:flex;
	/*masquer la fenêtre modale*/
	visibility:hidden;
	opacity:0;
}
/*target pour indiquer au navigateur d'afficher l'ancre demo*/
.modal4:target{
	visibility:visible;
	opacity: 1;
}

.modal4_close{
	position:absolute;
	right:1px;
	top:2px;
	color:255,255,255;
	background:none;
	border:none;
	font-size:36px;
}

/*régler la position des éléments contenus dans la boite*/
.modal4_content{
	background:none;
	padding:2em;
	width:100%;
	
}


.modal5{
	width:65vh;
	height:25vh;
	position:absolute;
	left:400;
	top: 60%;
	margin-bottom: 30px;
	background: rgba(0,0,0,0.8);
	display:flex;
	/*masquer la fenêtre modale*/
	visibility:hidden;
	opacity:0;
}
/*target pour indiquer au navigateur d'afficher l'ancre demo*/
.modal5:target{
	visibility:visible;
	opacity: 1;
}

.modal5_close{
	position:absolute;
	right:1px;
	top:2px;
	color:255,255,255;
	background:none;
	border:none;
	font-size:36px;
}

/*régler la position des éléments contenus dans la boite*/
.modal5_content{
	background:none;
	padding:2em;
	width:100%;
	
}

h1{
	font-family: 'Federant';
	font-size: 4em;
	color:whitesmoke;
	text-align: center;
}