body,
html {
  margin: 0px;
  font-family: "Verdana";
  background-color: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hidden {
  display: none;
}

#container {
  position: absolute;
  top: 42px;
  width: 700px;
  height: 558px;
  border: 1px solid black;
  background-color: #bfe8ff;
}

#container.algebraic {
  background-color: #d4c8c4;
}

#statement {
  position: absolute;
  left: 4px;
  top: 10px;
  width: 692px;
  height: 32px;
  font-size: 18px;
  text-align: center;
}

#subheader {
  position: absolute;
  left: 104px;
  top: 42px;
  width: 486px;
  height: 36px;
  font-size: 18px;
  text-align: center;
}

#streets {
  position: absolute;
  left: 96px;
  top: 98px;
  background-color: #bbb;
  width: 500px;
  height: 338px;
  border: 1px solid #777;
  border-radius: 2px;
}

#streets.wide {
  left: 96px;
  width: 500px;
}

.clue {
  position: absolute;
  background-color: #d8edf2;
  border: 1px solid black;
  width: 50px;
  height: 47px;
  padding-top: 3px;
  font-size: 34px;
  text-align: center;
}

#container.algebraic .clue {
  background-color: #edf4f2;
}

#streets.wide .clue {
  font-size: 26px;
  padding-top: 7px;
  height: 43px;
}

.clue.smol {
  padding-top: 12px;
  height: 38px;
  font-size: 20px;
}

.clue.round {
  border-radius: 27px;
}

#container.algebraic .clue {
  border: 0px;
  background-color: transparent;
  background-image: url(hexagon.png);
  font-size: 24px;
}

#container.algebraic .clue.round {
  border-radius: 0px;
  background-image: url(square.png);
  font-size: 24px;
}

.cell {
  position: absolute;
  width: 54px;
  height: 54px;
  font-size: 28px;
}

.cell input {
  width: 48px;
  height: 48px;
  font-size: 32px;
  text-align: center;
  background-color: #fff;
  border: 1px solid;
  -webkit-appearance: none;
  border-radius: 0px;
  padding-left: 1px;
  padding-right: 1px;
  padding-bottom: 0px;
  padding-top: 0px;
}

.grey {
  position: absolute;
  color: #fff;
  font-size: 92px;
}

.grey.unforced {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  background-color: #d8edf2;
  margin-left: 6px;
  margin-top: 36px;
  border: 1px solid #333;
}

.hexc {
  position: absolute;
  width: 48px;
  height: 30px;
  font-size: 26px;
  color: #000;
  text-align: center;
}

.hexi {
  position: absolute;
}

.hexi input {
  width: 40px;
  height: 28px;
  font-size: 24px;
  text-align: center;
}

.hexi.flawed {
  border: 1px solid red;
  background-color: #fdd;
}

.hexi.flawed input {
  background-color: #fdd;
}

.gth {
  position: absolute;
  width: 54px;
  height: 54px;
  font-size: 28px;
  color: #235;
}

#submit {
  position: absolute;
  left: 70px;
  top: 512px;
  background-color: #f2f2c6;
  width: 148px;
  height: 44px;
  padding-top: 4px;
  font-size: 24px;
  border: 1px solid #7a9;
  border-radius: 4px;
  text-align: center;
}

#submit:hover {
  background-color: #f8f8e6;
}

#hint {
  position: absolute;
  left: 20px;
  top: 512px;
  background-color: #f2f2c6;
  width: 142px;
  height: 44px;
  padding-top: 4px;
  font-size: 24px;
  border: 1px solid #7a9;
  border-radius: 4px;
  text-align: center;
}

#hint:hover {
  background-color: #f8f8e6;
}

#try-another {
  position: absolute;
  left: 272px;
  top: 512px;
  background-color: #f2f2c6;
  width: 350px;
  height: 44px;
  padding-top: 4px;
  font-size: 24px;
  border: 1px solid #7a9;
  border-radius: 4px;
  text-align: center;
}

#try-another:hover {
  background-color: #f8f8e6;
}

#try-again {
  position: absolute;
  left: 70px;
  top: 512px;
  background-color: #f2d4c2;
  width: 148px;
  height: 44px;
  padding-top: 4px;
  font-size: 24px;
  border: 1px solid #7a9;
  border-radius: 4px;
  text-align: center;
}

#try-again:hover {
  background-color: #fbe2d2;
}

#numbers-used {
  position: absolute;
  left: 60px;
  top: 428px;
  width: 584px;
  height: 36px;
  padding-top: 2px;
  font-size: 24px;
  text-align: center;
  pointer-events: none;
}

#message {
  position: absolute;
  left: 8px;
  top: 444px;
  width: 674px;
  height: 36px;
  padding-top: 2px;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  pointer-events: none;
}

/*# sourceMappingURL=styles.css.map */

/*# sourceMappingURL=styles.css.map */