html  {
height:100%;
}

body {
background-image: url("/img/background.png");
background-size: auto;
background-attachment: fixed;
margin:0px;
width:100%;
height: 100%;
padding:0px;
position:absolute;
}

img {
margin: auto;
}

#background {
background: white;
max-width: 50%;
min-width: 50%;
min-height: 100%;
position: fixed;
left:25%;
right:25%;
z-index:0;
}

#accueil {
width: 85%;
margin:auto;
position: relative;
z-index:2;
}

h1 {
font-size: 2.4em;
color: navy;
text-align: center;
}

h2 {
font-size: 2em;
color:purple;
margin-top:20%;
}

p, li {
font-size: 1.2em;
color: darkorchid;
text-align: justify;
}

#tarifs, #contact, form{
max-width: 85%;
margin:auto;
}

form{
border: 2px, double, white;
border-radius: 10px;
}

input{
max-width:100%;
margin: auto;
opacity: 0.3;
}

textarea{
max-width:90%;
margin: auto;
opacity: 0.3;
}

form p{
text-align: center;
max-width: 70%;
margin: auto;
margin-top:10%;
}

#submit {
background-color: #bee6fd;
color: rgb(0, 0, 0);
opacity: 0.5;
margin-top:1%;
margin-bottom:10%;
}

#tarifs h2, #contact h2{
max-width: 50%;
margin: auto;
margin-top: 20%;
text-align: center;
}

#tarifs p {
font-size: 1em;
}

#coordonnees p {
color: lavender;
}

#coordonnees a {
color: DeepSkyBlue;
}

ul {
margin-bottom: 15%;
}

#lunette_f, #oeil, #sourire, #lunette_h {
max-width: 30%;
margin: 6%;
}

#lunette_f {
float: left;
margin-left: 0%;
margin-top: 0%;
}

#oeil{
float: right;
margin-right: 0%;
margin-top: 0%;
}

#sourire {
float: left;
margin-left: 0%;
margin-top: 0%;
}

#lunette_h {
display:block;
margin: auto;
}

@media (orientation: portrait) {
#background {
min-width:58%;
left:21%;
right:21%;
opacity:0.5;
}

#carre_1, #carre_2, #carre_3, #carre_4 {
display: flex;
flex-direction: column;
max-width: 68%;
}

#carre_1, #carre_2, #carre_3 {
margin-bottom:6%;
}

#contact {
max-width: 78%;
}

#coordonnees {
max-width:60%;
float:right;
margin-top:10%;
}

}

@media (orientation: landscape) {
#background {
opacity:0.6;
}

#carre{
display:flex;
justify-content: space-around;
margin:auto;
margin-bottom:10%;
}

#carre img {
max-width:20%;
margin:auto;
}

p, li {
font-size: 2em;
}

h1 {
font-size: 6em;
color: navy;
}

h2 {
font-size: 2.9em;
}

#tarifs p {
font-size: 1.2em;
}

#contact {
max-width: 50%;
}

form {
width: 100%
}

#coordonnees {
max-width:40%;
float:right;
margin-top:10%;
}

}