body {
  background-color: #fcfcfc;
  color: #444;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif; /* 'Helvetica Neue',Helvetica,Arial,sans-serif */
}

main {
  width: 100%;
  max-width: 900px;
  display: inline-block;
}

header h1,
header h3 {
  font-weight: lighter;
}

section.controls {
  padding-top: 20px;
  font-weight: lighter;
}

section.code-blocks .code {
  width: 50%;
  display: block;
  float: left;
  font-family: "Courier New", Courier, monospace;
}

section.code-blocks .code .padding {
  padding: 30px;
}

section.code-blocks .code textarea {
  display: block;
  width: 100%;
  height: 500px;
  padding: 0;
  border: 1px solid #444;
  background-color: #fcfcfc;
  color: #444;
  padding: 10px;
  margin: -10px;
  white-space: pre;
  overflow-x: scroll;
  overflow: scroll;
}

footer {
  margin-bottom: 50px;
}

::-webkit-input-placeholder {
   color: #aaa;
}
:-moz-placeholder { /* Firefox 18- */
   color: #aaa;
}
::-moz-placeholder {  /* Firefox 19+ */
   color: #aaa;
}
:-ms-input-placeholder {
   color: #aaa;
}