body {
  box-sizing: border-box;
  font: bold 16px/25px "Trebuchet MS", Sans-Serif;
  background-color: cornsilk;
  margin-left: 20px;
}
p, ul { margin: 0; }
ul { padding-left: 20px; }
input {
  display: block;
  width: 500px;
  max-width: 85%;
  padding: 2px 13px;
  margin: 30px 20px 10px;
  font: 16px/20px "Trebuchet MS", Sans-Serif;
  border: 2px solid #444;
  font: Arial;
  border-radius: 23px;
  cursor: text;
}
input::placeholder {
  text-align: center;
}
/* TODO hover and active */
button {
  padding: 4px 15px;
  margin: 10px 30px;
  font: bold 16px/20px "Trebuchet MS", Sans-Serif;
  border: 2px solid #444;
  border-radius: 23px;
  cursor: pointer;
  box-shadow: 0 6px #505050;
}
button:hover {
  background: #666666;
  color: white;
}
button:active {
/*  background: #3e8e41;*/
  box-shadow: 0 2px #505050;
  transform: translateY(4px);
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #444; }