:root {
  font-family:'Sarabun', sans-serif;
  letter-spacing: 0.02em;
}

#mainContainer {
  width: fit-content; margin: auto; display: block; text-align: center;
}

#question {
  font-weight: 700; font-size: 120%;
  margin-bottom: 0.5em;
  max-width: 500px
}

#answer, #hint {
  visibility: hidden;
  /* margin-top: 0.5em; */
}

#answerfield {
  border-radius: 2px; outline: solid 2px grey
}

#answerfield:focus {
  border-radius: 2px; outline: solid 2px SkyBlue
}

.navLinks {
  margin-top: 1.5em;
  font-size: smaller;
}

#seperatorOptionContainer {
  display: block;
  margin: auto;
}

#ulContainer {
  display: block;
  margin: auto;
  width: fit-content;
  text-align: left;
}
#ulContainer > ul {
  padding-left: 1em;
}

#simpleGuide {
  width: 14em; 
  margin: auto;
}

#guideContent {
  background-color: color-mix(in srgb, dimgrey, black 50%);
  border-radius: 2px; padding: 1px 0px;
  margin: 0.8em 0;
}

#errors {
  font-size: smaller;
}


#lightblue {
  color: SkyBlue;
}
#yellow {
  color: Gold;
}
#red {
  color: Tomato;
}
#green {
  color: #35a854;
}
#totalProgress {
  position: fixed;
  margin: 0 0.1em;
  padding: 0;
  width: -moz-available;
  width: -webkit-fill-available;
  width: fill-available;
  left: 0;
  top: 0;
  background-color: #1c1b22;
  border-color: #2b2a33;
  border-radius: 0.1em;
  height: 0.16em;
  transition: value 1s ease-out;
}
#hint {
  margin: auto;
  width: fit-content;
  text-align: left;
  opacity: 0.8;
}
#tempNotice {
  height: 1em;
}