@font-face {
  font-family: HK Grotesk;
  src: url('hk-grotesk.regular.ttf');
}

body            { font-family: 'HK Grotesk', sans-serif; background: #eee; }
a, h1, h2       { color: #227b64; }
h1, h2          { font-family: 'HK Grotesk', sans-serif; margin: 0; margin-top: 0.9em; }
h1              { border-bottom: 2px solid #eee; text-align: center; }
h2              { font-size: 1.2em; }

input           {
    margin-top: 0.8em;
}
input[type=submit] {
    border: 1px solid #333;
    border-radius: 2px;
    font-size: 1.0em;
    padding: 8px;
}

.page           {
    margin: 2em auto; width: 90%; border: 1px solid #ccc;
    padding: 0.8em; background: white;
}
.index {
  margin-top: 1em;
}

#questions      {
  margin-top: 1em;
}
.question       {
  padding-bottom: 0.5em;
}
.autoformat     {
  border-bottom: 1px solid #ccc;
}
.warning        {
  font-size: small;
  color: red;
}
.message {
  font-size: large;
  color: red;
  margin-top: 1em;
  margin-bottom: 1em;
  width: 100%;
  background-color: #eee;
  text-align: center;
  padding: 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

textarea {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.header {
  text-align: right;
  font-size: small;
}
.footer {
  text-align: left;
  font-size: small;
}

.summary_single {
  list-style-type: disk;
}
.summary_multiple {
  list-style-type: square;
}
.summary_open {
  list-style-type: circle;
  font-style: italic;
}
.thankyou {
  font-size: large;
  margin-top: 1em;
  margin-bottom: 1em;
}

#counts {
  border-collapse: collapse;

}
#counts th, #counts td {
  border: 3px solid #ccc;
  text-align: center;
  padding: 3px;
}
.submit {
  text-align: center;
}