body{
background: #f4f2dd; /*couleur fond écran*/
font-family: 'Open Sans', sans-serif; /*police*/
}

#container{
position: relative;
/* position par rapport au haut de l'écran*/
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
}

#container form {
width: 100%;
padding: 10%;
border: 1px solid #f1f1f1;
background: #fff;
box-shadow: 0 0 20px 0 rgba(0,0,0,0.2), 0 5px 5px 0 rgba(0,0,0,0.24);
}

#container h1 {
	width: 80%;
	margin: 0 auto;
	padding-bottom: 10px;
	text-align: center;
}

input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}


input[type=submit] {
background-color: #53af57;
color: white;
padding: 14px 20px;
margin: 7px 0;
border: none;
cursor: pointer;
width: 100%;
}

.credit {
font-size: 0.5vh;
}

@media screen and (orientation: portrait) {
	#container{
		width: 45%;
		margin: 0 auto;
		margin-top: 15%;
	}
	#container h1 {
		font-size: 2vh;
	}
	input[type=text], input[type=password], input[type=submit], label {
		font-size: 1.5vh;
	}
	#bloc_img {
	width: 100%;
	display: flex;
	flex-direction: column;
	}
}

@media screen and (orientation: landscape) {
	#container{
		width: 35%;
		margin-left: 50%;
		margin-top: 15%;
	}
	#container h1 {
		font-size: 2vw;
	}
	input[type=text], input[type=password], input[type=submit], label {
		font-size: 1.5vw;
	}
	#bloc_img {
		width: 45%;
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 5%;
		left: 7.5%;
	}
}