@font-face {font-family: JugendWf; src: url(/open/fonts/JugendWf.ttf)}
@font-face {font-family: Campanile;src: url(/open/fonts/Campanile.ttf)}

html,body {background:#222;background-image:url(/open/tile.png);color:#e5ca9b;padding:0;margin:0;width:100%;height:100%;overflow:hidden;font-size:1vw;font-family: Verdana}

h1 {font-family: JugendWf, serif;text-align:center;font-size:200%;margin:.2em;}
h1::before {content:'[ '}
h1::after {content:' ]'}

.curvy{border-top-left-radius:2em;border-top-right-radius:.2em;border-bottom-left-radius:.2em;border-bottom-right-radius:2em}
input.curvy{border-top-left-radius:1em;border-bottom-right-radius:1em}
input.curvy:active, input.curvy:focus {outline: 0!important;}
#content {left:50%;position:absolute;top:25%;padding:1em;background-color:#430012;border:solid .3em #e5ca9b;width:25em;margin-left:-12.5em;height:8.5em;font-size:2vw}
form {margin-top:5%;}
label {display:inline-block;width:20%;font-size:1.8vw;font-family: Campanile}
input {display:inline-block;width:60%;font-size:1vw;height:2.5em;margin-right:5%;background:#444;border-radius:.4em;box-shadow:0 0 .3em #444;border:.1em solid #444;color:#fff;padding-left:1em;}
input:focus {border:.1em solid #c49f0a;background-image:linear-gradient(#e6bc15,#c49f0a);box-shadow:0 0 .3em #e6bc15;}
input[type=submit] {width:5em;position:relative;top:-2.5em;height:4em;margin:0;font-size:1.2vw;background:linear-gradient(#e6bc15 0%,#c49f0a 75%) repeat scroll 0 0 rgba(0, 0, 0, 0);border:.1em solid #e6bc15;box-shadow:0 0 .3em #c49f0a;font-weight:bold;padding:.3em 1em;cursor:pointer;}

#error {opacity:0;text-align:center;background:linear-gradient(to bottom, #b41 0%, #b12 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);border:.1em solid #b12;border-radius:.4em;box-shadow:0 0 .3em #b41;padding:.4em;transition:opacity 0.5s ease-in;font-size:1vw}
#error.show {opacity:1;}