/*************** Boilerplate ***************/
* { box-sizing:border-box; }
html, body {
  /*font-family:Verdana, Geneva, sans-serif;*/
  margin:0px; padding:0px;
  min-height:100%;
  text-rendering:optimizeLegibility;
  width:100%;
}
p { margin:0px; }
table { border-collapse:collapse; margin:0px; padding:0px; }



/*************** Variables ***************/
:root {
  --clrBack0:#100406; /* Near Black */
  --clrBack1:#1a110e; /* Dark Brown/Black */
  --clrBack2: #291c17; /* Chocolate */
  --clrBack4: #392620; /* Med Brown */
  --clrBack5: #6a4540; /* Ruddy Brown */
  --clrBorder0:#000000; /* Black */
  --clrBorder1:#391018; /* Dark Red */
  --clrBorder2:#4a0b17; /* Med Red */
  --clrBorder3:#d8c2bf; /* Tan */
  --clrText1:#ebe0df; /* Light Tan */
  --clrText2:#c5a49f; /* Dark Tan*/
  --clrText3:#e02a24; /* Dark Tan*/
}



/*************** Tag Styling ***************/
html {
  background-color:var(--clrBack2);
  background-image:linear-gradient(to right, var(--clrBack1), var(--clrBack2), var(--clrBack1));
}
body {
  background-color:transparent;
  color:var(--clrText1);
  font-size:2rem;
  margin:auto;
  padding:10px 20px;
  overflow:hidden;
  height:100%;
  width:98%;
}
button {
  background-color:var(--clrBack5);
  border:solid 2px var(--clrBorder2);
  border-radius:40px;
  color:var(--clrText1);
  cursor:pointer;
  font-size:1.4rem;
  padding:2px 10px;
}
h1,h2,h3 {
  color:var(--clrText2);
  margin:2px 0px 4px 0px;
}
pre {
  margin:0px;
  padding:0px;
}



/*************** ID Styling ***************/
#content {
  height:100%;
  min-height:100%;
  width:100%;
  display:flex;
  flex-direction:column;
}
#content #top { width:100%; }
#content #middle { }
#content #bottom {
  flex:1;
  position:relavtive;
  text-align:center;
}
#content #bottom img { max-width:100%; }

/*TODO: test on phone widths!!! !!! !!!*/

#answer {
  color:var(--clrText3);
  font-style:oblique;
  text-transform:capitalize;
}
#answer, #input_display { min-height:30px; }

#board { height:3000px;} /*Too big, to force JS resize*/

#bottom img {
  max-width:100%;
}
#bottom #doll, #bottom #hand {
  position:absolute;
  bottom:-20px;
}

#bottom #doll {
  right:0; /*start in frame*/
  z-index:888;
}
#bottom #board {
}
#bottom #hand {
  bottom:-100%;
  z-index:999;
}


#hand_cache { position:absolute; top:-1px; left:-1px; height:1px; width:1px; overflow:hidden; }

#home { position:absolute; top:20px; left:45px; }
#learn { position:absolute; top:20px; right:45px; }

#top table { width:100%; }
#top table button { margin:2px 6px;}
#top table td+td { text-align:right; }
#top #bAsk { padding:2px 18px; }


/*************** Class Styling ***************/
.disabled {
  background-color:#aaa;
  border-color:#777;
  color:#666;
  cursor:auto;
}

.invisible { display:none; }

.pre { white-space:pre-wrap; } /*like a <pre> tag, but can be embedded more easily*/

.section {
  background-color:rgba(0,0,0,0.4);
  border:solid 1px var(--clrBorder1);
  border-radius:7px;
  overflow:hidden;
}
.section h3 {
  background-color:var(--clrBack0);
  border-bottom:solid 1px var(--clrBorder1);
  margin:0px;
  padding:1px 8px;
}
.section p, .section .pre {
  padding:7px 18px;
}