style.css

*{
  margin:0;
  padding:0;
  font-family:sans-serif;
  font-weight:lighter;
  font-size:16px;
  box-sizing:border-box;
  color:#333;
}
h1{
  font-size:1.5em;
  margin-bottom:1em;
}
#input h1{
  text-align:center;
}
h1 span,
h2 span{
  font-size:1em;
}
h2{
  font-size:1.5em;
  margin-bottom:0.5em;
}
article{
  background:#eeeeee;
  padding:1.5em;
}
form{
  max-width:30em;
  margin: 0 auto;
}
input,
textarea{
  display:block;
  width:100%;
  padding:0.5em;
  border-radius:2px;
  border: none;
  margin-bottom:1.5em;
}
textarea{
  height:14em;
}
section{
  padding: 1.5em;
  border:1px solid #ccc;
  margin-bottom:1.5em;
  border-radius:2px;
  min-height: 4em;
}
.row{
  display: table;
  width:100%;
  margin-bottom:1.5em;
}
.row section{
  display: table-cell;
  width: 49%;
}
.row section:last-child{
  border-left: 2%;
}
.right{
  text-align:right;
}
img#logo{
  display:none;
  max-width:50%;
}
section
h3{
  font-size:1.2em;
  margin-bottom:0.5em;
}
#output{
  display:none;
}
@media print {
  article{
    background:white;
  }
  #input{
    display:none;
  }
  #output{
    display:block;
  }
}