@font-face {
    font-family: 'DINRoundWeb';
    src: url('../fonts/DINRoundWeb.eot');
    src: url('../fonts/DINRoundWeb.eot?#iefix') format('embedded-opentype'),
    url('../fonts/DINRoundWeb.woff') format('woff'),
    url('../fonts/DINRoundComp.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

input:required{
    border:1px solid #0f0;
    background:#afa;
}

main {
    width: 80%;
    margin: 10% 10%;
}

.wrapper{
    padding:2em;
    margin-bottom: 1.5em;
}

p,
label{
    font-size: 1.2em;
    line-height: 1.2em;
    margin:0 0 0.5em 0;
}

.input_holder,
.input_holder_error{
    margin-bottom:1em;
}

input[type=text],
input[type=password],
input[type=email]{
    width:98%;
    display: block;
}

body{
    font-family:'DINRoundWeb', sans-serif;
}

div.wrapper{
    border-radius:20px;
}

p.error_message{
    width: 100%;
    display: block;
}

.error_banner{
    padding:10px;
    width:80%;
    margin:10%;
    border: 5px red dotted;
    background: #faa;
    font-weight:bold;
}

html{
    background-image: url("../images/WaveLength-Header-Lines.png");
    background-size: contain;
    background-position-x: 0;
    background-position-y: 0;
    background-repeat: no-repeat;
}

.error_message{
    background: #faa;
    font-weight:bold;
}

header img{
    max-width: 75%;
    margin: 0 10%;
}

button{
    background: #000;
    color: #fff;
    padding: 0.1em;
    margin: 0.3em;
    outline: 1px solid #000;
    border: 1px solid #fff;
    border-radius: 0.1em;
    outline-offset: 0.1em;
}

input[type=submit]{
    width: 100%;
    background: #38A26A;
    color: #fff;
    font-size: 33px;
    padding: 10px;
    outline: 1px solid #38A26A;
    border: 1px solid #fff;
    border-radius: 19px;
    outline-offset: 3px;
}

form{
    margin-bottom:1em;
}
