@charset "UTF-8";


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

body{
	max-height: 100vh; 
}

.slide{
	width: 100vw; 
	height: 100vh; 
	display: flex; 
	justify-content: center;
	align-items: center; 
}

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

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

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

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

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



.scrollHorizontal{
	display: flex;
	flex-direction: row;
	width: 500vw; 
	transform: rotate(90deg) translateY(-100vh); 
	transform-origin: top left; 
}


.container{
	width: 100vh;
	height: 100vw; 
	transform: rotate(-90deg) translateX(-100vh);
	transform-origin: top left;
	overflow-x: hidden; 
}


::-webkit-scrollbar{
	display: none;
}


.bouton_content{
    display: flex;
    flex-direction: column;
}
.bouton{
	display: flex;
	justify-content: center;
	margin-top: 50px;
}

a{
	text-decoration: none; 
	background: floralwhite;
	padding: 15px;
	border: none;
	border-radius: 30px;	
}


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

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

.modal1_content{
	background: floralwhite;
	padding: 6em 2em;
	width: 500px;
	position: relative;
}

.modal1_close{
	position: absolute;
	right: 5px;
	top: 5px;
	color: hotpink;
	background: none;
	border: none;
	font-size: 36px;
}

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

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

.modal2_content{
	background: floralwhite;
	padding: 6em 2em;
	width: 500px;
	position: relative;
	
}

.modal2_close{
	position: absolute;
	right: 5px;
	top: 5px;
	color: hotpink;
	background: none;
	border: none;
	font-size: 36px;
}

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

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

.modal3_content{
	background: floralwhite;
	padding: 6em 2em;
	width: 500px;
	position: relative;
	
}

.modal3_close{
	position: absolute;
	right: 5px;
	top: 5px;
	color: hotpink;
	background: none;
	border: none;
	font-size: 36px;
}

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

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

.modal4_content{
	background: floralwhite;
	padding: 6em 2em;
	width: 500px;
	position: relative;
}

.modal4_close{
	position: absolute;
	right: 5px;
	top: 5px;
	color: hotpink;
	background: none;
	border: none;
	font-size: 36px;
}

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

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

.modal5_content{
	background: floralwhite;
	padding: 6em 2em;
	width: 500px;
	position: relative;
}

.modal5_close{
	position: absolute;
	right: 5px;
	top: 5px;
	color: hotpink;
	background: none;
	border: none;
	font-size: 36px;
}



h1{
	font-family: 'Josefin Sans', sans-serif;
	font-size: 4em;
	color:floralwhite;
}

h2{
	font-family: 'Josefin Sans', sans-serif;
	color: floralwhite;
}

h3, p {
	font-family: 'Josefin Sans', sans-serif;
	color: black;
}

a {
	font-family: 'Josefin Sans', sans-serif;
	font-weight: bold;
	color: deeppink;
}