body {
  font-family: Sarabun, sans-serif;
  font-weight: 250;
  background-color: #1a222d;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Ubuntu, sans-serif;
  margin: 0.5em;
  font-weight: 350;
  text-align: center;
}

h2 {
  font-size: 1.2em;
}

hr {
  width: 50%;
  margin-top: 1.5em;
}

input {
  display: block;
  margin: 1em auto;
  padding: 0.5em;
  border-radius: 0.5em;
  width: 24em;
  background-color: #161f27;
  color: #ffffff;
  border: 1px solid #808080;

}
  
#graphingArea {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* display: grid; */
  /* grid-template-columns: repeat(3, 1fr); */
  width: 100%;
  margin: auto;
}

.graphCanvasContainer {
  width: 100%; height: 100%;
  margin: auto;
}



.graphBox {
  padding: 1em;
  background-color: #161f27;
  margin: 1em;
  border-radius: 1em;
  width: 100%;
  max-height: 70vh;
}

.graphDescription {
  text-align: center;
  margin: auto;
  margin-top: 1.5em;
  margin-bottom: 0;
  /* max-width: 20em;  */
}

/* .graphDescription > p {
  margin: auto;
  display: block;
} */
nonexistent {
  color: hsla(136, 55%, 43%, 0.509), hsl(45, 90%, 50%), hsl(5, 75%, 56%)
}

.textDesc {
  font-size: 1.1em;
  text-decoration: underline;
  

}

.incorrectAns {
  font-size: 0.8em;
  color: #909090;
}