div{
  box-sizing:border-box;
}
#rules h1,button{
  text-align:center;
}
#rules{
  padding: 12px;
  background:rgb(250,250,250);
}
#rules p {
  font-size:13pt;
}
#rules h1{
  font-family: 'Roboto Slab', serif;
}
#box,#rules,#results{
  box-shadow: 0px 0px 25px rgba(1,1,1,1);
  width:340px;
  margin:15px auto 0 auto;
}
#top{
  width:100%;
  color:black;
  padding:10px;
  font-family: 'Roboto Slab', serif;
  font-size:16pt;
  background:rgb(115, 186, 44);
}
#bot{
  width:100%;
  height:100%;
  background:rgb(224, 224, 224);
}
button{
  width:100%;
  border-radius: 0 0 4px 3px;
  height:55px;
  font-family: 'Roboto Slab', serif;
  font-size:16pt;
  background: rgba(12,11,10,0.25);
  border: rgba(12,11,10,0.25);
}
button:hover{
  opacity:.75;
}
input{
  display:inline-block;
  width:85px;
  height:80px;
  margin:45px 140px;
  border:5px solid red;
  font-size:25pt;
}
#results{
  text-align:center;
  padding:10px;
  font-family: 'Open Sans', sans-serif;
  background:rgb(110,225,110);
}
#results h1{
  font-family: 'Playfair Display', serif;
}
#results h3{
  font-family: 'Open Sans', sans-serif;
  font-size:12pt;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}


#article {
  font-family:Arial, Helvetica, sans-serif;
  padding: 5% 10% 0;
}