@media only screen and (min-width: 300px) {
 /* smartphones */
	body{
		background-color:#ffffff;
		padding:0;
		margin:0;
		font-family: Verdana, Arial, Calibri, Sans-serif;
		color:#000000;
		overflow-y: scroll; 
		background-color:#000000;
	}
	.page{
		padding-left:10px;
		padding-right:10px;
		padding-top: 20px;
		background-color:#FFFFFF;
		text-align:justify;
	}
	.page img{		
		max-height: 100%;
		max-width: 100%;
	}
	.page h1{
		font-size:2.7em;
		font-family: Courier new, courier, monospace;
		letter-spacing:-0.06em;
		margin-top :0;
		margin-bottom :0;
		text-decoration:overline;
		background-color: #ffffff;
		text-align:left;
	}
	.page h2{
		/*font-size:1.4em;
		letter-spacing:-0.02em;
		font-family: Calibri, Verdana, Arial;
		text-decoration:overline underline;*/
		font-size:1.4em;
		letter-spacing:-0.02em;
		font-family: Courier new, courier, monospace;
		text-decoration:overline;
		margin-bottom:3px;
	}
	p{
		margin-top:3px;
	}
	.page .centre{
		text-align:center;
	}
	.page .realhaaackeur{
		display:inline-block;
	}
	.page .realhaaackeur img{
		float:left;
		padding:0 20px 20px 0;
	}
	a{
		font-weight:bold;
		color:#333333;
		text-decoration:underline;
	}
	a:hover{
		background-color:#93eeff;
		text-decoration:none;
	}
	a img{
		/*évite un liseret de la couleur du hover background sous les images*/
		vertical-align:text-bottom;
	}
	a:hover img{
		filter: opacity(0.4); 
	}
}


@media only screen and (min-width: 600px) {
  /* tablettes: */
	.page{
		width:560px;		
		margin-left: auto;
		margin-right: auto;
		padding-left: 45px;
		padding-right: 45px;
	}
	.page h2{
		font-size:1.5em;
	}
	.page .realhaaackeur{
		width:80%;
		margin-left:10%;
		margin-right:10%;
	}
}

@media only screen and (min-width: 768px) {
  /* pc: */
 }