@font-face {
    font-family: 'lunaregular';
    src: url('fonts/luna-webfont.woff2') format('woff2'),
         url('fonts/luna-webfont.woff') format('woff'),
         url('fonts/luna.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'juliagarregular';
    src: url('fonts/juliagar-webfont.woff2') format('woff2'),
         url('fonts/juliagar-webfont.woff') format('woff'),
         url('fonts/juliagar.ttf');
    font-weight: normal;
    font-style: normal;

}

#fondPrelude{

    background-image: url('collages/collage_un.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

}

#bandeau{

	background-color: rgba(255,255,255,0.4);
	margin-top: 17%;
	/*margin-bottom: 10px;
	margin-right: 0%;
	margin-left: 0%;*/
	height: 40%;
	width: 100%;

}


#contenu{

	display: flex;
	flex-direction: column;
	width: 40%;
	height: 75%;
	text-align: center;
	padding: 0%;
	align-items: center;
	margin: auto;

}

h5{

	font-family: 'lunaregular';
	font-size: 3em;
	margin: auto;
	color: rgba(210, 104, 11, 1);
	
}


h6{
	
	font-family: 'lunaregular';
	font-size: 1.2em;
	margin: auto;
	padding-bottom: 1%;
}

/*bouton Bienvenue*/
.accueil{

	display: flex;
	justify-content: center;
}

button{

	margin-top: 2%;
	padding-bottom: 1%;
	padding-top: 1%;
	border-radius: 50px;
	background-color: rgba(255,255,255,0.4);
	transition-duration: 0.7s;

	}


button a{

	font-family: 'juliagarregular';
    font-size: 4em;
    color: rgba(105, 42, 5, 1);
    text-align: center;
}


/*media queries*/

/*très grand écran */
@media all and (min-width:1800px){

#bandeau{

	
	margin-bottom: 5%;
	margin-top: 17%;
	}


h6{
	font-size: 2.3em;
	}

button{

	margin-bottom: 3%;
	}

button a{

	font-size: 8em;

	}

}

@media screen and (max-width: 800px){

#bandeau{

	margin-bottom: 5%;
	margin-top: 25%;
	height: 20%;
	
	}

h5{
	font-size: 2em;
	}

h6{

	font-size: 0.9em;
	}

button a{

    font-size: 3em;
	}

}

@media screen and (max-width: 700px){

#bandeau{

	margin-top: 10%;
	}

h5{

	font-size: 1.5em;
	}

h6{

	font-size: 0.6em;
	}

button a{
	
    font-size: 2.7em;
    
	}
}


@media screen and (max-width: 600px){

#bandeau{

	
	margin-top: 70%;
	height: 20%;
	}

h5{
	font-size: 1.7em;
	}

h6{

	font-size: 0.9em;

	}
	
}



@media all and (max-width: 500px){

#fondAccueil{

	background-size: cover;

	}

#bandeau{
			
	height: 20%;
			
	}

#contenu{

	text-align: center;
	margin-left: ;
	}

h5{

   	font-size: 1.5em;
   
   }

h6{

   	font-size: 0.8em;
   }
	
}
	

@media screen and (max-width: 425px){

#bandeau{

	margin-top: 30%;
	
	}

h1{
	
	font-size: 1em;
	margin: auto;

	}

}