*{  box-sizing : border-box;}
body{ background:#f9f9f9;font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;}
h2{ text-align: center; padding:1em;font-weight: normal;}
section{width:20em;margin:0 auto; display:block; }
article {
  border: 1px solid #d9d9d9;
  padding: .5em 1em;
  margin: .5em;
}
.output * {
  display: block;
  width: 100%;
  border: 1px solid #d9d9d9;
  padding: .5em; 
  margin:.5em 0;
}
.output .color{ background:white;}

input[type='text'] {
  text-align: center;
  width:100%;
  padding:.5em;
  border: 1px solid #d9d9d9;
}
input[type='text']:focus{
  outline:none;
  border:1px solid #999;
  box-shadow: 0px 0px 5px 1px #999;
}
input[type='submit']{padding:.3em 1em;}
@media (min-width: 600px){
  section{width:100%;max-width:60em;display:flex}
  article{flex-basis:33%;}
}


.article {
  padding: 5% 15% 1%;
}