body, table, p, div, td, th {
  font-family: -apple-system, helvetica;
}
table { 
  border-spacing: 2px; 
  width: 600px; 
  margin-bottom: 50px;}
th { 
  font-size: 16pt; 
  font-weight:normal;}
thead td a {
  color: yellow; 
  text-decoration:none;}
tbody { 
  font-size: 14pt; 
  border: 1px solid grey; 
  text-align:center; 
  padding: 3px;}

h1 {text-align:center; color: #009900; font-weight: normal;}
div#container { width: 600px; margin:0 auto; }
div.contestant { float: left; width: 20%; margin: 10px; font-size: 30px; }
div.contestant > div {width: 100%; margin-bottom: 5px; border: 1px solid #000099; text-align: center; padding: 5px;}
div.contestant > div:first-child {background-color: #000099; color: #000099; }
div.contestant a { text-decoration: none; color: white;}
p {text-align:center;}
span.m {font-size: 8pt;}
span.m a {color: #000099;}
span.m a:hover {text-decoration: underline}

#history { margin:0 auto;}
br { clear: both;}

input { 
  font-size: 20pt;
  color: #000099; 
  padding: 5px;
  border-color: #000099;
  background-color: white;
  width: 200px;
  box-shadow: 3px 3px 5px 0px #ccc;
  border-radius: 3px;}

div.contestant > div:first-child { border-radius: 10px 3px 0px 0px;}
div.contestant > div:last-child { border-radius: 0px 0px 10px 3px;}

@media only screen and (max-width: 600px) {
  div#container { width: 100%;}
  div.contestant { width: 40%;}
  #history {width: 95%;}
  #history th {font-size: 10pt;}
  #history td {font-size: 10pt;}
}