<!-- this is the markup, keep your hands off! -->

<form>
  <label for="email">Subscribe to our mailing list</label>
  <input type="email" value="" name="email" placeholder="email address" required>
  <input type="submit" value="Subscribe" name="subscribe">
</form>
$orange: #FF940D;
$darkOrange: #E8490C;

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  background-color: rebeccapurple;
  background-image: url("http://damonbauer.me/assets/images/trees.png");
  background-position: bottom;
  background-repeat: repeat-x;  
  background-size: 100% auto;
  
  @media screen and (min-width: 30em) {
    background-size: 60% auto;
  }
}

form {
  margin: 2em auto;
  max-width: 40em;
  border: 8px solid #AA55FF;
  border-radius: 25px;
  padding: 3em 2em;
  background: #3A2D47;
  box-shadow: 5px 5px darken(rgba(#3A2D47, 0.25), 10%);
}

label {
  display: block;
  margin-bottom: 1em;
  color: $orange;
  line-height: 1.5;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 1.5rem;
  text-align: center;
  text-shadow: 3px 3px $darkOrange;
  
  @media screen and (min-width: 30em) {
    font-size: 1.75rem;
  }
}

input[type="email"] {
  border: 0;
  padding: 1em 0.5em;
  margin: 0 0 2em;
  width: 100%;
  font-size: 0.875rem;
  letter-spacing: 2px;
  border-radius: 2px;
  box-shadow: 3px 3px rgba(black, 0.5);
  
  @media screen and (min-width: 30em) {
    font-size: 1rem;  
  }
  
  &:focus {
    outline: 0;
  }
}

input[type="submit"] {
  position: relative;
  width: 100%;
  padding: 1em 0;
  border: 0;
  font-size: 0.875rem;
  letter-spacing: 2px;
  background-color: $orange;
  color: #3A2D47;
  box-shadow: 3px 3px $darkOrange;
  border-radius: 2px;
  transition: box-shadow ease 0.1s,
              top ease 0.2s,
              left ease 0.2s,
              background-color ease 0.2s;
  
  @media screen and (min-width: 30em) {
    font-size: 1rem;  
  }
  
  &:focus {
    outline: 0;
  }
  
  &:active {
    top: 1px;
    left: 1px;
    box-shadow: 0 0 transparent;
    background-color: $darkOrange;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.