body { margin: 0; padding: 0; background-color: #eff; }
#assignment { display: none; }
#container { margin: 0 auto; width: 90%; border: 0; }
#results { padding: 0; margin: 0; }
#results > div { padding: 2em 3%; margin: 2em 0 0; }
#white { background-color: white; border: 1px solid #808080; }
#black { background-color: black; }
#gray { background-color: #808080; }
div#colors { padding-top: 0; padding-bottom: 1em; }
div#footnotes { height: 1em; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }
#results div div {
  width: 18.5%;
  height: 72px;
  border-radius: 8px;
  display: inline-block;
  background-color: #eee;
  margin: 4px 0.5%;
}
div#colors > div, div#footnotes > div {
  background-color: transparent;
  border: 0;
  text-align: center;
  font-size: 0.9em;
}
div#colors > div {
  height: 3em;
}
div#footnotes > div {
  height: 1em;
}
form { 
  width: 96%;
  min-width: 300px;
  margin: 1em;
  margin: 0;
  text-align: center;
  background-color: #777;
  padding: 2%;
  margin-top: 1.5em;
}
h1 { font-size: 1.6em; 
  font-family: Rockwell, Sanchez, Courier, Verdana, sans-serif; 
  border-bottom: 1px solid; 
  margin: 0 0 0 4px;
  padding: 0;
}
#container > p { font-size: 0.9em; margin-left: 4px; } 
ul#info li, ul#info p { margin-bottom: 0.5em; font-size: 0.9em; color: #444; }
a { text-decoration: none; }
ul#info li:nth-child(n+2) { display: none; }
div#reference { display: none; padding: 0; margin: 0 auto; width: 60%; }
div#reference p { font-size: 0.9em; }

div#footnotes { display: none; height: 1em; } 

h1 { font-family: "Work Sans", Helvetica, Arial, sans-serif; font-size: 1.7em; letter-spacing: 0; font-weight: 500; }
* { font-family: "Work Sans", Helvetica, Arial, sans-serif; }
h2 { font-weight: 600; }

@media screen and (max-width: 700px) {
  div#colors { font-size: 0.8em; }
  #results > div { padding-top: 1em; padding-bottom: 1em; margin-top: 1em; margin-bottom: 1em; }
  div#results div div { height: 48px; }
  #container > p { font-size: 0.8em; margin-left: 4px; } 
}
@media screen and (max-width: 600px) {
  div#colors { display: none; }
  div#footnotes { display: block;  }
  div#reference { display: block;  }
}
@media screen and (max-width: 450px) {
  h1 { font-size: 1.07em; }
}

footer { text-align: center; font-size: 90%; margin: 2em 0 3em; }