:root {
  --main_width: 100%;
  --main_height: 58rem;
}

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background: none;
  background-color: #FAFBFC;
}

#main_container{
  width: var(--main_width);
  margin: 0 auto;
  padding: 0;
  border: 0px solid #F80;
  background: none;
  font-family: sans-serif;
}

section{
  margin: 0;
}

#title_container{
  text-align: center;
  margin: 0rem 0 0rem 0;
}

#title_container h1{
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 1.4rem;
}

h1.title_top{
  text-decoration: underline;
}

#three_section{
  position: relative;
  border: 0px solid #06F;
}

#canvas_container{
  border: 0px solid #06F;
  position: relative;
  padding: 0;
  margin:0;
  height: var(--main_height);
  width: var(--main_width);
}

canvas {
  margin: 0;
  padding: 0;
  border: 0;
}

/*
Overlay
*/

#overlay_container {
  overflow: hidden;
  position: absolute;
  height: var(--main_height);
  width: var(--main_width);
  border: 0px solid #06F;
  text-align: left;
}

#labels_container p{
  margin: 0;
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  font-size: 0.8rem;
  pointer-events: none;
  color: black;
/*
 font-weight: bold;
  -webkit-text-stroke: 0.2px white;
  */
}

/*
Tool Tip
*/

.tooltipWrapper {
  position: absolute;
  display: inline-block;
}

.tooltipWrapper .tooltipText {
  visibility: hidden;
  background-color: #620;
  border: 1px solid #A42;
  color: #EEE;
  text-align: center;
  border-radius: 6px;
  padding: 2px 4px;
  font-size: 0.9rem;
  position: absolute;
  z-index: 2;
  bottom: -74px;
  left: -16px;
  margin: 0;
  opacity: 0;
  transition: opacity 0.2s;
  text-align: center;
  white-space: nowrap;
}

.tooltipWrapper:hover .tooltipText {
  visibility: visible;
  opacity: 1;
}

/*
Footer
*/

footer{
  margin: 2rem 0;
  text-align: center;
}

footer a{
  color: #410;
  text-decoration: none;
}

footer a:hover{
  color: #D61;
  text-decoration: underline;
}