%box {
  box-shadow: 0px 0px 50px rgba(255,255,255,0.1);
  border-radius: 1em;
  margin-bottom:1em;
}


html {
  box-sizing:border-box;
  & * {
    box-sizing:inherit;
  }
}

html, body {
  height:100%;
}

body {
  padding: 4em;
  background: {
    image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/81221/bg-gradient.jpg);
    repeat:no-repeat;
    size:cover;
    position:50% 50%;    
  }
  
  color:#ccc;
  font: {
    family:Open Sans, sans-serif;
    size:14px;
  }
}

::-webkit-input-placeholder { color: #666; }
:-moz-placeholder { color: #666; }
::-moz-placeholder { color: #666; }
:-ms-input-placeholder { color: #666; }

.error-msg {
  display:none;
  @extend %box;
  padding: 1em 2em;
  clear:left; 
  background: {
    color:rgba(200,50,50,0.3);
  }
}

.form-save {
  @extend %box;
  display:none;
  background: rgba(0,0,0,0.3);
  padding: 2em;
}

.form-group {
  @extend %box;
  padding: 2em;
  background: rgba(0,0,0,0.3);
  width:100%;
}

.input-group {
  margin:0 0 .5em;  
}

input[type="text"],
input[type="email"],
textarea {
  background:rgba(255,255,255,0.5);
  border:0;
  border-radius:0.25em;
  padding:0.25em; 
  color: #333;
}

textarea {
  width:100%;
  height:6em;
  font-family:monospace;
}

a {
  color:#fff;
}

p {
  margin: 0 0 1em 0;
}

button.submit {
  background:rgba(0,0,0,0.5);
  border:0;
  border-radius:0.25em;
  padding:0.25em; 
  color:#ccc;
}