body,
html {
  margin: 0px;
  font-family: Verdana, tahoma, arial, helvetica, sans-serif;
}

.hidden {
  display: none;
}

#container {
  position: absolute;
  top: 42px;
  width: 700px;
  height: 556px;
  background-color: #cbcdb8;
  border: 1px solid black;
  overflow: hidden;
}

#backdrop {
  position: absolute;
  top: 140px;
  width: 700px;
  height: 416px;
  background-color: #fff;
}

#enter-coords {
  position: absolute;
  left: 28px;
  top: 12px;
  width: 138px;
  height: 36px;
  font-size: 20px;
}

#test-coords {
  position: absolute;
  left: 22px;
  top: 94px;
  width: 154px;
  height: 66px;
  background-color: #a8cbfd;
  font-size: 20px;
  font-family: Verdana, tahoma, arial, helvetica, sans-serif;
  padding: 4px;
  border: 1px solid black;
  border-radius: 6px;
  text-align: center;
}

#test-coords:hover {
  background-color: #add2ff;
}

#test-coords.disabled {
  background-color: #b4cde4;
  display: none;
}

#new-game {
  position: absolute;
  left: 74px;
  top: 480px;
  width: 128px;
  height: 40px;
  background-color: #a8cbfd;
  font-size: 20px;
  font-family: Verdana, tahoma, arial, helvetica, sans-serif;
  padding: 4px;
  border: 1px solid black;
  border-radius: 6px;
  text-align: center;
}

#new-game:hover {
  background-color: #add2ff;
}

#guess-header {
  position: absolute;
  left: 16px;
  top: 264px;
  width: 124px;
  height: 22px;
  background-color: rgba(224, 198, 252, 0.65);
  font-size: 20px;
  padding: 4px;
  padding-left: 6px;
  border: 1px solid black;
}

#distance-header {
  position: absolute;
  left: 154px;
  top: 264px;
  width: 116px;
  height: 22px;
  background-color: rgba(224, 198, 252, 0.65);
  font-size: 20px;
  padding: 4px;
  padding-left: 6px;
  border: 1px solid black;
}

#guess-list {
  position: absolute;
  left: 16px;
  top: 298px;
  width: 264px;
  height: 170px;
  background-color: rgba(246, 248, 235, 0.8);
  font-size: 20px;
  border: 1px solid black;
  overflow-y: scroll;
}

#treasure {
  position: absolute;
  left: 580px;
  top: 18px;
  width: 120px;
  height: 106px;
  background-image: url(treasure_new.png);
}

#container.textured #treasure {
  background-image: url(treasure_new.png);
}

#guess {
  position: absolute;
  left: 8px;
  top: 26px;
  width: 180px;
  height: 58px;
  background-color: #d0baea;
  border-radius: 10px;
}

#guess input {
  text-align: center;
}

#guess input {
  width: 26px;
  height: 28px;
  font-size: 22px;
}

#guess-left-bracket {
  position: absolute;
  left: 10px;
  top: 14px;
  width: 36px;
  height: 36px;
  font-size: 20px;
}

#guess-comma {
  position: absolute;
  left: 80px;
  top: 14px;
  width: 18px;
  height: 36px;
  font-size: 20px;
}

#guess-comma.squashed {
  position: absolute;
  left: 62px;
  top: 14px;
  width: 36px;
  height: 36px;
  font-size: 20px;
}

#guess-z-comma {
  position: absolute;
  left: 108px;
  top: 14px;
  width: 18px;
  height: 36px;
  font-size: 20px;
}

#guess-right-bracket {
  position: absolute;
  left: 158px;
  top: 14px;
  width: 36px;
  height: 36px;
  font-size: 20px;
}

#x-coord {
  position: absolute;
  left: 32px;
  top: 12px;
  width: 36px;
  height: 36px;
}

#x-coord.squashed {
  position: absolute;
  left: 24px;
  top: 12px;
  width: 36px;
  height: 36px;
}

#y-coord {
  position: absolute;
  left: 104px;
  top: 12px;
  width: 36px;
  height: 36px;
}

#y-coord.squashed {
  position: absolute;
  left: 72px;
  top: 12px;
  width: 36px;
  height: 36px;
}

#z-coord {
  position: absolute;
  left: 118px;
  top: 12px;
  width: 36px;
  height: 36px;
}

.data {
  float: left;
  width: 246px;
  height: 26px;
  font-size: 18px;
}

.data-coords {
  float: left;
  width: 130px;
  height: 26px;
  margin: 2px;
  padding-left: 2px;
}

.data-distance {
  float: left;
  width: 104px;
  height: 26px;
  margin: 2px;
  padding-left: 2px;
}

#x-axis {
  position: absolute;
  left: 296px;
  top: 518px;
  width: 390px;
  height: 1px;
  border-top: 1px solid black;
  overflow: visible;
  pointer-events: none;
}

#y-axis {
  position: absolute;
  left: 308px;
  top: 144px;
  width: 1px;
  height: 386px;
  border-right: 1px solid black;
  pointer-events: none;
}

#x-label-box {
  position: absolute;
  left: 288px;
  top: 518px;
  width: 390px;
  height: 22px;
  padding-left: 8px;
  overflow: visible;
  pointer-events: none;
}

#y-label-box {
  position: absolute;
  left: 274px;
  top: 142px;
  width: 22px;
  height: 388px;
  padding-top: 4px;
  pointer-events: none;
}

#grid {
  position: absolute;
  left: 306px;
  top: 154px;
  width: 367px;
  height: 367px;
}

.axis-label {
  float: left;
  width: 30px;
  height: 30px;
  font-size: 16px;
  text-align: center;
  pointer-events: none;
}

.axis-label.zero {
  text-align: left;
}

#y-label-box .axis-label {
  text-align: right;
}

#y-label-box .axis-label.smol {
  text-align: right;
  padding-top: 4px;
  height: 20px;
}

.axis-label.smol {
  width: 24px;
  height: 24px;
  font-size: 12px;
}

.axis-label.big {
  width: 40px;
  height: 40px;
}

.cell {
  position: absolute;
  width: 29px;
  height: 24px;
  background-color: rgba(175, 225, 225, 0.5);
  margin-top: 4px;
  margin-left: 4px;
  padding-top: 5px;
}

.cell.smol {
  width: 23px;
  height: 21px;
  padding-top: 2px;
}

.cell.big {
  width: 37px;
  height: 33px;
  padding-top: 4px;
}

.cell.shaded {
  background-color: #d0baea;
}

.cell.semishaded0a {
  background: linear-gradient(45deg, rgba(175, 225, 225, 0.5) 25%, #d0baea 25%);
}

.cell.semishaded0b {
  background: linear-gradient(45deg, #d0baea 75%, rgba(175, 225, 225, 0.5) 75%);
}

.cell.semishaded1a {
  background: linear-gradient(90deg, rgba(175, 225, 225, 0.5) 50%, #d0baea 50%);
}

.cell.semishaded1b {
  background: linear-gradient(90deg, #d0baea 50%, rgba(175, 225, 225, 0.5) 50%);
}

.cell.semishaded2a {
  background: linear-gradient(135deg, rgba(175, 225, 225, 0.5) 25%, #d0baea 25%);
}

.cell.semishaded2b {
  background: linear-gradient(135deg, #d0baea 75%, rgba(175, 225, 225, 0.5) 75%);
}

.cell.semishaded3a {
  background: linear-gradient(0deg, #d0baea 50%, rgba(175, 225, 225, 0.5) 50%);
}

.cell.semishaded3b {
  background: linear-gradient(0deg, rgba(175, 225, 225, 0.5) 50%, #d0baea 50%);
}

.cell.demishaded0a {
  background: linear-gradient(45deg, rgba(175, 225, 225, 0.5) 76%, #d0baea 76%);
}

.cell.demishaded0b {
  background: linear-gradient(45deg, #d0baea 24%, rgba(175, 225, 225, 0.5) 24%);
}

.cell.demishaded2a {
  background: linear-gradient(135deg, rgba(175, 225, 225, 0.5) 76%, #d0baea 76%);
}

.cell.demishaded2b {
  background: linear-gradient(135deg, #d0baea 24%, rgba(175, 225, 225, 0.5) 24%);
}

.point {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 5px;
}

.point.highlighted {
  background-color: #789;
}

.blob {
  position: absolute;
  width: 29px;
  height: 26px;
  padding-top: 3px;
  text-align: center;
  font-size: 18px;
  color: #222;
  text-align: center;
  border-radius: 14px;
}

.blob.smol {
  background-color: #c2f6ff;
  width: 22px;
  height: 20px;
  padding-top: 1px;
  margin-top: 4px;
  font-size: 14px;
  border-radius: 10px;
  border: 0.5px solid #b4c4d8;
}

.blob.cold {
  background-color: #96d0ff;
}

.blob.bingo {
  width: 26px;
  height: 26px;
  padding: 0px 0px 0px 0px;
  background-color: #2f8;
  border: 1px solid #0b4;
  border-radius: 13px;
  margin-left: 1px;
  margin-top: 2px;
}

.blob.bingo.smol {
  width: 22px;
  height: 22px;
  border-radius: 11px;
}

#banner-text {
  position: absolute;
  left: 206px;
  top: 48px;
  width: 472px;
  height: 90px;
  font-size: 18px;
  overflow: hidden;
  text-align: center;
}

#banner {
  position: absolute;
  left: 0px;
  top: 2px;
  width: 700px;
  height: 138px;
  font-size: 18px;
  background-color: #fff;
}

#level-name {
  position: absolute;
  left: 388px;
  top: 16px;
  width: 92px;
  height: 36px;
  font-size: 20px;
}

#guess-feedback {
  position: absolute;
  left: 4px;
  top: 162px;
  width: 264px;
  height: 150px;
  padding: 4px;
  overflow: hidden;
  font-size: 18px;
  text-align: center;
  pointer-events: none;
}

#guess-feedback.squidge-up {
  top: 98px;
}

#hint-text {
  position: absolute;
  left: 12px;
  top: 200px;
  width: 242px;
  height: 64px;
  padding: 4px;
  overflow: hidden;
  font-size: 16px;
  border: 1px solid black;
  border-radius: 6px;
}

#try-again {
  position: absolute;
  left: 74px;
  top: 292px;
  width: 128px;
  height: 40px;
  background-color: #a8cbfd;
  font-size: 20px;
  font-family: Verdana, tahoma, arial, helvetica, sans-serif;
  padding: 4px;
  border: 1px solid black;
  border-radius: 6px;
  text-align: center;
}

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

#try-again.squidge-up {
  top: 112px;
}

#diagram {
  position: absolute;
  left: 334px;
  top: 214px;
  width: 334px;
  height: 334px;
  background-image: url(level4axis.png);
}

#diagram-caption {
  position: absolute;
  left: 324px;
  top: 158px;
  width: 354px;
  height: 44px;
  font-size: 18px;
  color: #423b3b;
  text-align: center;
}

#modal {
  position: absolute;
  left: 198px;
  top: 18px;
  width: 462px;
  height: 108px;
  font-size: 20px;
  border: 1px solid #f44;
  background-color: #fff2f2;
  padding: 8px;
  text-align: center;
}

#modal-text {
  margin: 4px;
}

#modal-button {
  position: absolute;
  left: 198px;
  top: 72px;
  width: 82px;
  height: 40px;
  border: 1px solid black;
  border-radius: 4px;
  background-color: #a8cbfd;
  font-size: 20px;
  font-family: Verdana, tahoma, arial, helvetica, sans-serif;
}

#modal-button:hover {
  background-color: #add2ff;
}

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