body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img,a img{border:none;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}

body {
  background: #222;
  box-sizing: border-box;
  color: #e3e3e3;
  margin: 0 auto;
  max-width: 40em;
  padding: 0 1em;
  height: 100%;
  width: 100%;
}

body, input, textarea, button {
  font-family: 'Lekton', Courier, monospace;
  font-size: 1.3em;
}

p {
  line-height: 1.5;
  margin: 2em 0;
}

strong {
  color: #5C9DCC;
  font-size: 1.6em;
}

span {
  color: #E6AF83;
}

a:link, a:visited {
  color: #E079D1;
  text-decoration: none;
}

a:hover, a:focus, a:active {
  color: #EDC2E7;
  text-decoration: underline;
}

textarea {
  background: #1c1c1c;
  border: solid 1px #111;
  box-sizing: border-box;
  color: #e3e3e3;
  display: block;
  font-size: 1em;
  line-height: 1.5;
  min-height: 7em;
  outline: none;
  padding: 1em;
  width: 100%;
}

textarea:focus {
  outline: solid 4px #5C9DCC;
}

footer {
  margin-top: 0.8em;
  text-align: right;
}

button {
  background: #E079D1;
  border: none;
  color: #222;
  cursor: pointer;
  font-size: 0.9em;
  padding: 0.5em 1em;
  text-align: center;
}

button:hover, button:focus, button:active {
  background: #EDC2E7;
}

.invalid button {
  background: #E079D1;
  opacity: 0.3;
  cursor: default;
  outline: none;
}

.contact-success,
.contact-failure {
  border-top: solid 1px #444;
}

.contact-success,
.contact-failure,
.success .fields,
.failure .fields {
  display: none;
}

.success .contact-success,
.failure .contact-failure {
  display: block;
}