@import url('https://fonts.googleapis.com/css?family=Istok+Web|Comfortaa');

br:not(.contact) {
    display: none;
}


body {
    margin: 0;
    background: url("background.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: auto 80vh;
    width: 100%;
    font-family: 'Istok Web', sans-serif;;
}



header {
    text-align: center;
    margin-top: 20vh;
    margin-bottom: 20vh;
    max-width: 100vw;
    overflow: auto;
}

h1 {
    font-family: 'Comfortaa', cursive;
    font-size: 64px;
    max-width: 100vw;
    overflow: auto;
}

section {
    margin-left: 5vw;
    margin-right: 5vw;
    margin-top: 0;
    margin-bottom: 0;
    background-color: #ffffff;
    border-top: 1px;
    border-top-style: solid;
    border-top-color: #ffa600;
    padding: 2vh;

}

/* Pour les champs de mail. */
.mail {
    width: 99%;
    margin: 1vh;
    border-color: #000000;
    border-width: 1px;
    border-radius: 3px;
}
/*Login */

 .login {
     width: 100%;
     padding: 1em;
     font-size: 1em;
     border-radius: 10px;
     border: 1px solid #000000;
     transition: border .3s;
 }

 .login:focus, .login:hover {
     border:1px solid #ffa600;
 }

 #login form * {
     display: block;
     width: 100%;  /*
     padding-left: 1em;
     padding-right: 1em;  */
 }

 #login {
     text-align: center;
     width: 100%;
     height: 90vh;
     margin: 0;
     padding: 0;
 }


 #login form {
     max-width: 600px;
     display: inline-block;
     text-align: center;
 }

 #send {
    margin-left: 1em;
     margin-top: 1em;
     background: none;
     transition: background .3s;
 }

 #send:focus, #send:hover {
     background: #ffa600;
 }

textarea {
    height: 100px;
}



footer {
    margin-top: 5vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    padding-left: 5vw;
    padding-right: 5vw;
    background-color: lightseagreen;
    margin-right: 0;
}

footer * {
    display: inline;
}

#twitter {
    height: 6em;
    width: auto;
}