@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');

/* HABERNAGE PARAMETRES GLOBAUX  - box-sizing pour les vieux navigateurs - oveflow pour cacher le curseur */

html {
	font-size : 100%;
}
body {
font-family: 'Roboto', sans-serif;
background: #000;
box-sizing: border-box;
height:auto;
overflow-x: hidden;
margin:0;
/* non selectable*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size : 14px;
}

h1, h2 {
font-weight:100;
margin: 0;
}
h1 {
color : #ffffff;
font-size: 50px;
text-transform: uppercase;
}
h2 {
font-size: 25px;
text-transform: normal;
}
h3 {
	font-size: 14px;
	margin : 2px;
	font-weight: 400;
}
img {
	display:block;
}
a {
	text-decoration : none;
	
}

section#fondImage {
height:100vh;
background-image: url("https://www.franaparis.fr/habernage/images/Messier8bis.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color : #ffffff;
display : flex;
flex-direction: column;
justify-content :space-between;
align-items: center;
color:#f0F0F0;
text-align:center;
}

/* ******* HABERNAGE SECTION PREMIER BLOC ******* */
.main-content-text {
	padding-top : 100px;
}

button#monBouton {
padding: 15px 25px;
border: 1px solid #b50000;
background-color:rgba(255, 255, 255, 0.3);
display: inline-block;
margin-top: 80px ;
border-radius: 25px;
text-decoration: none;
outline-style: none;
color: #b50000;
font-size: 16px;
}

button#monBouton:hover {
background: #b50000;
color: #fff;
}

/* ******* HABERNAGE SECTION Second BLOC :  animation; ******* */

img#daisy {
	width : 280px;
	height : auto;	
	align-self:flex-start;
	margin-left :100px;
}
	

#sentence {
	color : #fff;
	padding-bottom : 5px;
}
 #sentence a {
	text-decoration: none;
	color:#fff;
}
 #sentence a:hover{
color:powderblue;
font-variant: small-caps;
font-size:30px;
 }
/* ******* HABERNAGE SECTION FOOTER ******* */
#basdepage {
  	font-family: Arial, Helvetica, sans-serif;
	padding: 10px 0px 20px 0px;
	text-align: center;
	background : black;
	max-width : 100vw;
	border-top: solid 1px #D10002;
	color: #D10002 ;
}
#paysage { 	
	text-align:center;
 }
#NASA {
	font-size : 11px;
	font-style: italic;
}
#NASA a {
	text-decoration: none;
	color: #D10002 ;
}
#NASA a:hover {
	color: #fff;
}
.population {

}
.animaux{

}
/* *********************************** 
MEDIAS QUERIES 
*********************************** */
/* ------------------------------*
LANDSCAPE entre 768 et 960
*-------------------------------*/
@media only screen and (orientation : landscape) and (min-width: 768px) and (max-width: 960px)  { 
	h1 {
		font-size : 28px;
	}
	h2 {
		font-size : 18px;
	}
	h3 {
		font-size: 13px;
	}
  	
  	.main-content-text {
		padding-top : 50px ;
	}
  	button {
  		margin-top: 30px ;
  		font-size:13px;
  		padding: 10px 20px;
  	}
	img#daisy { 
		width:180px; 
		margin: 30px 0px 50px 30px;
	}
  	#basdepage {padding: 10px 0px 10px 0px;
}
}

@media only screen and (orientation : landscape) and (min-width: 768px) and (max-width: 960px) and (max-height: 414px) { 
	.main-content-text { padding-top: 25px; }
	#basdepage { padding: 8px 5px 0px 5px; }
	#NASA { font-size: 9px;	}
}
/*------------------------------------*
Phone Portrait and Landscape FONT
*------------------------------------*/
@media only screen and (max-width: 767px) {

	h1 {
		font-size : 30px;
	}
	h2 {
		font-size : 18px;
	}
	h3 {
		font-size: 13px;
	}
}
/* ------------------------------*
PORTRAIT under 767
*--------------------------------*/
@media only screen and (orientation : portrait) and (max-width: 767px) { 
  	
  	.main-content-text {
		padding-top : 40px ;
	}
  	button {
  		margin-top: 30px ;
  		font-size:13px;
  		padding: 10px 20px;
  	}
	img#daisy { 
		width:180px; 
		margin: 30px 0px 50px 30px;
	}
  	#basdepage { padding: 10px 10px 10px 10px;}
}

/* ------------------------------*
LANDSCAPE under 768
*--------------------------------*/
@media only screen and (orientation : landscape) and (max-width: 767px) {   	
  	.main-content-text {
		padding-top : 20px ;
	}
  	button {
  		margin-top: 20px ;
  		font-size:13px;
  		padding: 10px 20px;
  	}
	img#daisy { 
		width:180px; 
		margin: 30px 0px 50px 30px;
	}
	#basdepage {
			padding: 8px 5px 10px 5px;
	}
	#NASA {
		font-size: 9px;
	}
}
/* ------------------------------*
LANDSCAPE under 768 iphone 5
*--------------------------------*/
@media only screen and (orientation : landscape) and (max-width: 767px) and (max-height : 568px) {  	
  	.main-content-text {
		padding-top : 10px ;
	}
  	button {
  		margin-top: 20px ;
  		font-size:13px;
  		padding: 10px 20px;
  	}
	img#daisy { 
		width:160px; 
		margin: 20px 0px 20px 30px;
	}
	#NASA {
		font-size: 9px;
	}
}
/*------------------------------------*
Phone Portrait and Landscape petits
*------------------------------------*/
@media only screen and (max-width:320px) {
	
	h1 {
		font-size : 22px;
	}
	h2 {
		font-size : 12px;
	}
	h3 {
		font-size : 11px;
	}
	section { 
		padding-top : 5px; }
	
	.main-content-text {
		padding-top : 10px;
	}
	button {
		font-size: 12px;
		padding: 8px 18px;
		margin-top : 10px;
	}
	img#daisy { 
		width:120px; 
		margin: 20px 0px 20px 30px;
	}
	#basdepage {
		padding: 5px;
	}
	#NASA {
		font-size: 9px;
	}
}
/