html, body, main {
  margin: 0;
  padding: 0;
}

section#frontpage { 
  text-align: center; 
  margin: 0 auto;
  max-width: 800px;
  position: relative;
  font-family: 'IBM Plex Mono'; font-weight: 300; 
  color: #000000;
  
}

footer nav, header nav {
  padding: 20px 0px 20px 0px;
  text-align: center;
  font-family: 'IBM Plex Mono'; font-weight: 300; 
}

a {
  text-decoration: none;
  color: #000000;
}

a:hover {
  text-decoration: underline;
}

#frontpage h1, #frontpage nav a {
  font-weight: 200; 
  font-size: 28px;
  margin-top: 40px;
}

#frontpage #title {
position: relative;
margin: 30px 0;
}

#frontpage h1 {
  position: absolute;
  z-index: -11;
  color: #ffffff;
}

#frontpage #title img {
  width: 600px;
  max-width: 100%;
}

#frontpage h2 { 
  font-weight: 300; 
  font-size: 16px;
  text-align: center;
  text-transform: lowercase;
  z-index: 11;
}

#frontpage nav { 
  margin: 0; padding: 0; 
}

#frontpage nav ul {
  display: block;
  margin: 0;
  padding: 0;
}

#frontpage nav li {
  display: block;
  margin: 5px 0;
  padding: 0;
  }

#frontpage nav a {
  display: inline-block;
  margin: 0;
  padding: 10px 0;
}

#frontpage a#explore {
  display: block;
  margin-left: 10px;
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: 200;
  text-transform: lowercase;
  z-index: 10;
}

#frontpage a#explore:hover {
  text-decoration: none;
}

#frontpage a#explore span {
  color: #666666;
  float: left;
  display: none;
}

#frontpage nav ul li a {
  font-size: 16px; font-weight: 400;
}

#frontpage div#enter {
  margin: 0 auto -20px auto;
  max-width: 500px; height: auto; 
  position: relative;
}

#frontpage div#enter img{
  display: inline-block; 
  width: 500px;
  max-width: 100%; height: auto; 
}

#frontpage div#enter p { 
  position: absolute; top: 138px; left: 216px;
  font-size: 20px;
  opacity: 0;
}

@media screen and (max-width: 550px){ 

#frontpage #title { padding: 0 5px; }
#frontpage #title h2 { font-size: 12px; }
}

#frontpage div#enter:hover img {
opacity: .7
}



@media screen and (min-width: 850px) {


#frontpage a#explore {
  position: absolute; top: 160px; left: -10px;
  max-width: 220px;
  text-align: right;
  z-index: 10;
}

#frontpage a#explore span {
  display: inline;
  float: right;
  position: relative; left: 20px; top: -10px;
}



#frontpage div#enter p { 
  opacity: 0;
  position: absolute; top: 138px; left: 216px;
  font-size: 20px;
}

#frontpage div#enter:hover img {
opacity: .7
}

#frontpage div#enter:hover p {
opacity: 1;
}
}

section#about {
padding-top: 20px;
}

#about h2 {
font-weight: 200;
font-size: 28px;
text-transform: none;
margin: 50px auto 30px auto;
}

#about p {
text-align: left;
color: #333333;
font-family: 'Didact Gothic', sans-serif;
font-size: 17px;
max-width: 590px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}

img.test {
display: block;
max-width: 100%;
}

@media screen and (min-width: 850px) {
#about p {
padding-left: 0px;
padding-right: 0px;
}
}


#about p#intro {
text-align: center;
margin: 30px auto;
font-size: 17px;
}

#about div#jumpto {
border-style: solid;
border-color: #997733;
border-width: 1px 0 1px 0;
padding: 5px;
}

#about div#jumpto a { 
display: block; 
margin: 5px;
padding: 5px;
}




#about p a {
color: #997733;
}


#about hr {
color: #bbbbbb;
border-style: solid;
border-size: 1px;
}

#license {font-size: 12px; max-width: 600px;
text-align: left; margin: 20px auto;}
#license img { float: left; margin: 0 10px;}


/*     INTERACTIVE    */


div#info { position: absolute; 
           font-family: 'IBM Plex Mono';
           font-weight: 400;
           font-size: 16px;
           padding: 10px;
           width: calc(100% - 25px);
           text-align: left;
}

div#info p {
  margin: 0;
  padding: 0;
}

div#info div#license { 
margin: 0;
text-align: right;
max-width: 250px;
position: absolute;
right: 0;
font-size: 10px;
}


div#info div#license img {
float: none;
margin: 5px 0 0 0;
} 

button#reset { 
  font-family: 'IBM Plex Mono';
  font-weight: 400;
  font-size: 16px; 
  margin: 20px 0; 
  letter-spacing: 1px;
}


div#board { position: relative; top: 40px; width: 100%; height: 100%;}


@media screen and (min-width: 600px) {
div#board { top: 0px; }
}

div#board img { position: absolute; top 0; left: 0; 
                width: 100%; height: auto;}
div#board svg { position: absolute; top 0; left: 0; 
                width: 100%; height: auto; }

svg#surround path {fill: #555555;}


g#all g path[id$="blob"] { opacity: 0; }
g#all g g[id$="text"] { opacity: 1; }

g#all g.dim path[id$="blob"] { opacity: 1 }
g#all g.dim g[id$="text"] { opacity: 1 }


g#all g.dim g#ready_text { fill: #bbbbbb; }
g#all g.dim g#quiet_text { fill: #bbbbbb }
g#all g.dim g#bored_text { fill: #bbbbbb; }
g#all g.dim g#agitated_text { fill: #bbbbbb; }


g#all g.dim g#envious_text { fill: #708b5e; }
g#all g.dim g#resentful_text { fill: #7a9663; }
g#all g.dim g#competitive_text { fill: #96b079; }
g#all g.dim g#disgusted_text { fill: #959e44; }
g#all g.dim g#repulsed_text { fill: #aba664; }
g#all g.dim g#disturbed_text { fill: #c1be86; }
g#all g.dim g#scornful_text { fill: #c59950; }
g#all g.dim g#harsh_text { fill: #d5a960; }
g#all g.dim g#critical_text { fill: #d8b185; }
g#all g.dim g#frustrated_text { fill: #bb7061; }
g#all g.dim g#stuck_text { fill: #cb8071; }
g#all g.dim g#impatient_text { fill: #ce9e94; }
g#all g.dim g#furious_text { fill: #b06b76; }
g#all g.dim g#angry_text { fill: #be7e82; }
g#all g.dim g#annoyed_text { fill: #c39195; }
g#all g.dim g#passionate_text { fill: #c47986; }
g#all g.dim g#invested_text { fill: #d489a6; }
g#all g.dim g#engaged_text { fill: #dea2b3; }
g#all g.dim g#proud_text { fill: #ce945d; }
g#all g.dim g#confident_text { fill: #dea47d; }
g#all g.dim g#adventurous_text { fill: #e4bb9c; }
g#all g.dim g#hilarious_text { fill: #bdab3d; }
g#all g.dim g#amused_text { fill: #cdbb4d; }
g#all g.dim g#joking_text { fill: #ddcb5d; }
g#all g.dim g#joyful_text { fill: #8dac1c; }
g#all g.dim g#happy_text { fill: #9dbc3c; }
g#all g.dim g#cheerful_text { fill: #adc56c; }
g#all g.dim g#delighted_text { fill: #80ad9b; }
g#all g.dim g#pleased_text { fill: #90bdab; }
g#all g.dim g#satisfied_text { fill: #a0cdab; }
g#all g.dim g#loving_text { fill: #ce7dcb; }
g#all g.dim g#affectionate_text { fill: #ce82cb; }
g#all g.dim g#accepting_text { fill: #ce95c2; }
g#all g.dim g#inawe_text { fill: #946eb2; }
g#all g.dim g#fascinated_text { fill: #a47ec2; }
g#all g.dim g#interested_text { fill: #bc9fce; }
g#all g.dim g#free_text { fill: #7877cd; }
g#all g.dim g#peaceful_text { fill: #7885d2; }
g#all g.dim g#relieved_text { fill: #9095dc; }
g#all g.dim g#astonished_text { fill: #5581c6; }
g#all g.dim g#surprised_text { fill: #6591d6; }
g#all g.dim g#curious_text { fill: #79a3d2; }
g#all g.dim g#yearning_text { fill: #518fbd; }
g#all g.dim g#hopeful_text { fill: #619fbd; }
g#all g.dim g#daydreamy_text { fill: #85a9b7; }
g#all g.dim g#compassionate_text { fill: #778794; }
g#all g.dim g#sympathetic_text { fill: #778794; }
g#all g.dim g#concerned_text { fill: #8ba7a0; }
g#all g.dim g#sorrowful_text { fill: #737789; }
g#all g.dim g#sad_text { fill: #8387a9; }
g#all g.dim g#gloomy_text { fill: #9597b2; }
g#all g.dim g#terrified_text { fill: #91848c; }
g#all g.dim g#afraid_text { fill: #91848c; }
g#all g.dim g#worried_text { fill: #a49ca0; }
g#all g.dim g#ashamed_text { fill: #8b7d56; }
g#all g.dim g#embarassed_text { fill: #9b8d86; }
g#all g.dim g#awkward_text { fill: #a79f99; }
g#all g.dim g#grief_text { fill: #959492; }
g#all g.dim g#regretful_text { fill: #9d9c9a; }
g#all g.dim g#disappointed_text { fill: #a2a2a0; }