@font-face {
  font-family: 'Economica';
  font-style: normal;
  font-weight: 400;
  src: local('Economica'), url(fonts/economica.woff2) format('woff2');
}

html,
body {
font-family: 'Economica';
}

html {
height:100%;
background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
text-align: center;
}

header {
padding: 0.25em 1em;
}

header h1 {
color: #333;
/*text-shadow: 0 0 0.1em #FFF;*/
text-shadow: 0 0 0.3em #eadba9;
}

h2 {
text-align : center;
}

nav {
margin: 0 0 2em 0;
padding: 0;
text-align: center;
}

#boutton {
padding-top: 6em;
background-image: url("book.svg");
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center top;
background-color: transparent;
border: 0 none;
text-shadow: 0 0 0.3em #eadba9;
}

section {
background: black;
color: white;
max-width: 30em;
margin: 0 auto;
padding: 1em;
text-align: left;
transition: opacity 0.5s;
}

section.invisible {
opacity: 0;
visibility: hidden;
}

section.visible {
opacity: 1;
visibility: visible;
}

article {
border-bottom : 1px solid #333;
}

article:last-of-type {
border: 0 none;
}

input,
textarea {
border : 1px solid #333;
background: #111;
}

#success {
border: 1px solid #0E0;
background: #EFE;
color: #0A0;
padding: 1em;
font-size: 1.5em;
text-align: center;
}

#error {
border: 1px solid #E00;
background: #FEE;
color: #A00;
padding: 1em;
font-size: 1.5em;
text-align: center;
}

dt {
width: 15%;
float: left;
clear: both;
margin: 1em 0;
text-align: right;
font-size: 1.2em;
}

dd {
width: 80%;
float: right;
margin: 1em 0;
}

input,
textarea {
width: 100%;
padding: 0.5em 0;
color: #FFF;
font-size: 1.2em;
}

input[type="submit"] {
clear: both;
}

p.invisible {
opacity: 0;
display: none;
}

p.visible {
opacity: 1;
display: box;
}