body,
html {
  margin: 0px;
}

.hidden {
  display: none;
}

#container {
  position: absolute;
  top: 42px;
  width: 700px;
  height: 556px;
  background-image: url(background.svg);
  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: 84px;
  top: 94px;
  width: 151px;
  height: 31px;
  background-color: #e9f8fd;
  font-family: "Dongle", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 28px;
  color: #2d7cac;
  border: 2px solid #2d7cac;
  border-radius: 16px;
  text-align: center;
}

#test-coords.reduced {
  top: 84px;
}

#test-coords:focus-visible {
  display: inline-block;
  vertical-align: middle;
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.6);
  border-radius: 16px;
}

#container.alt #test-coords {
  left: 472px;
}

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

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

#new-game {
  position: absolute;
  left: 17px;
  top: 509px;
  width: 102px;
  height: 31px;
  padding-top: 5px;
  background-color: #2a7aab;
  font-family: "Dongle", sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 24px;
  border: none;
  border-radius: 20px;
  text-align: center;
  color: #fff;
}

#container.alt #new-game {
  left: 578px;
}

#new-game:focus-visible {
  display: inline-block; /* Or use 'display: block' or 'display: flex' */
  vertical-align: middle;
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.6);
  border-radius: 16px;
}

#new-game:hover {
  background-color: #3a8abb;
}

#guess-header {
  position: absolute;
  left: 12px;
  top: 4px;
  width: 98px;
  height: 31px;
  font-family: "Dongle", sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: #2a7aab;
  padding-left: 10px;
  border-bottom: 2px solid #2a7aab;
}

#distance-header {
  position: absolute;
  left: 136px;
  top: 4px;
  width: 90px;
  height: 31px;
  font-family: "Dongle", sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: #2a7aab;
  padding-left: 26px;
  border-bottom: 2px solid #2a7aab;
}

#result-list {
  position: absolute;
  left: 14px;
  top: 48px;
  width: 252px;
  height: 260px;
  padding: 2px;
  background-color: #e0f6ff;
  font-family: "Dongle", sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #2a7aab;
  border-radius: 10px;
  overflow-y: scroll;
}

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

#guess-box {
  position: absolute;
  left: 20px;
  top: 19px;
  width: 281px;
  height: 133px;
  background-color: #fff;
  border-radius: 22px;
}

#guess-box.reduced {
  width: 272px;
  height: 110px;
}

#container.alt #guess-box {
  position: absolute;
  left: 410px;
}

#guess-head {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 281px;
  height: 45.5px;
  border-radius: 22px 22px 0px 22px;
  background-color: #2a7aab;
}

#guess-box.reduced #guess-head {
  width: 272px;
}

#guess-icon {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 44px;
  height: 44px;
  border-radius: 20px;
  background-image: url(coordinates1mod.svg);
}

#guess-box input {
  text-align: center;
}

#guess-box input {
  width: 26px;
  height: 28px;
  font-size: 22px;
  border: 1px solid #b0ddff;
  border-radius: 4px;
}

#guess-left-bracket {
  position: absolute;
  left: 94px;
  top: -4px;
  width: 44px;
  height: 52px;
  font-family: "Dongle", sans-serif;
  font-weight: 400;
  font-size: 58px;
  line-height: 58px;
  color: #fff;
}

#guess-left-bracket.squashed {
  left: 66px;
}

#guess-comma {
  position: absolute;
  left: 154px;
  top: 6px;
  width: 18px;
  height: 36px;
  font-family: "Dongle", sans-serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 48px;
  color: #fff;
}

#guess-comma.squashed {
  left: 125px;
}

#guess-z-comma {
  position: absolute;
  left: 176px;
  top: 6px;
  width: 18px;
  height: 36px;
  font-family: "Dongle", sans-serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 46px;
  color: #fff;
}

#guess-right-bracket {
  position: absolute;
  left: 204px;
  top: -4px;
  width: 44px;
  height: 52px;
  font-family: "Dongle", sans-serif;
  font-weight: 400;
  font-size: 58px;
  line-height: 58px;
  color: #fff;
}

#guess-right-bracket.squashed {
  left: 226px;
}

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

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

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

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

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

#banner-box {
  position: absolute;
  left: 320px;
  top: 19px;
  width: 361px;
  height: 133px;
  background-color: #fff;
  border-radius: 22px;
}

#banner-box.reduced {
  left: 310px;
  width: 371px;
  height: 110px;
}

#container.alt #banner-box {
  left: 20px;
}

#banner-head {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 361px;
  height: 45.5px;
  background-color: #2a7aab;
  border-radius: 22px 22px 0px 22px;
}

#banner-box.reduced #banner-head {
  width: 371px;
}

#banner-icon {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 44px;
  height: 44px;
  border-radius: 20px;
  background-image: url(instructionsmod.svg);
}

#banner-text {
  position: absolute;
  left: 8px;
  top: 58px;
  width: 338px;
  height: 76px;
  font-family: "Dongle", sans-serif;
  font-weight: 300;
  font-size: 26px;
  line-height: 22px;
  text-align: center;
}

#info-box {
  position: absolute;
  left: 20px;
  top: 183px;
  width: 281px;
  height: 190px;
  background-color: #fff;
  border-radius: 20px;
}

#container.alt #info-box {
  left: 402px;
}

#info-head {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 281px;
  height: 45.5px;
  background-color: #2a7aab;
  border-radius: 22px;
}

#info-icon {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 44px;
  height: 44px;
  border-radius: 20px;
  background-image: url(feedback1mod.svg);
}

#info-text {
  position: absolute;
  left: 22px;
  top: 52px;
  width: 264px;
  height: 76px;
  font-family: "Dongle", sans-serif;
  font-weight: 300;
  font-size: 15px;
  overflow: hidden;
  text-align: center;
}

#guess-feedback {
  position: absolute;
  left: 14px;
  top: 4px;
  width: 264px;
  height: 40px;
  padding: 4px;
  overflow: hidden;
  font-family: "Dongle", sans-serif;
  font-weight: 700px;
  font-size: 28px;
  line-height: 32px;
  text-align: center;
  pointer-events: none;
  color: #fff;
}

#victory {
  position: absolute;
  left: 25px;
  top: 178px;
  width: 260px;
  height: 292px;
  background-color: #fff;
  border: 3.5px solid #2a7aab;
  border-radius: 24px;
  padding: 4px;
}

#container.alt #victory {
  left: 407px;
}

#victory-head {
  position: absolute;
  left: 50px;
  top: 20px;
  width: 172px;
  height: 38px;
  font-family: "Dongle", sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 24px;
  text-align: center;
  color: #2a7aab;
}

#victory-gem {
  position: absolute;
  left: 81px;
  top: 86px;
  width: 110px;
  height: 94px;
  background-image: url(gem.svg);
}

#victory-info-1 {
  position: absolute;
  left: 32px;
  top: 201px;
  width: 208px;
  height: 104px;
  font-family: "Dongle", sans-serif;
  font-weight: 300;
  font-size: 26px;
  line-height: 22px;
  text-align: center;
}

#victory-info-2 {
  position: absolute;
  left: 32px;
  top: 231px;
  width: 208px;
  height: 104px;
  font-family: "Dongle", sans-serif;
  font-weight: 300;
  font-size: 26px;
  line-height: 22px;
  text-align: center;
}

#level-4-box {
  position: absolute;
  left: 19px;
  top: 158px;
  width: 270px;
  height: 312px;
  background-color: #fff;
  border: 3.5px solid #2a7aab;
  border-radius: 24px;
  padding: 4px;
}

#container.alt #level-4-box {
  left: 402px;
}

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

.data-coords {
  float: left;
  width: 104px;
  height: 24px;
  margin: 2px;
  padding-left: 2px;
  font-family: "Dongle", sans-serif;
  font-weight: 400;
  font-size: 26px;
}

.data-distance {
  float: left;
  width: 108px;
  height: 24px;
  margin: 2px;
  padding-left: 2px;
  font-family: "Dongle", sans-serif;
  font-weight: 400;
  font-size: 26px;
}

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

#container.alt #x-axis {
  position: absolute;
  left: 22.5px;
  width: 361.5px;
}

#x-axis-arrowhead-a {
  position: absolute;
  left: 352px;
  top: -7px;
  width: 10px;
  height: 7px;
  background: linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%);
}

#x-axis-arrowhead-b {
  position: absolute;
  left: 352px;
  top: -0.5px;
  width: 10px;
  height: 7px;
  background-color: #ffc;
  background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%);
}

#x-axis-arrowhead-label {
  position: absolute;
  left: 361px;
  top: -4px;
  width: 22px;
  height: 22px;
  font-family: "Dongle", sans-serif;
  font-weight: 700;
  font-size: 22px;
}

#y-axis {
  position: absolute;
  left: 326px;
  top: 170px;
  width: 1px;
  height: 362px;
  border-right: 1px solid black;
  pointer-events: none;
}

#container.alt #y-axis {
  position: absolute;
  left: 21px;
}

#y-axis-arrowhead-a {
  position: absolute;
  left: 1px;
  top: 0px;
  width: 7px;
  height: 10px;
  background: linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%);
}

#y-axis-arrowhead-b {
  position: absolute;
  left: -5.5px;
  top: 0px;
  width: 7px;
  height: 10px;
  background-color: #ffc;
  background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%);
}

#y-axis-arrowhead-label {
  position: absolute;
  left: -18px;
  top: -20px;
  width: 22px;
  height: 22px;
  font-family: "Dongle", sans-serif;
  font-weight: 700;
  font-size: 22px;
}

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

#container.alt #x-label-box {
  left: 2px;
}

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

#container.alt #y-label-box {
  left: -10px;
}

#grid {
  position: absolute;
  left: 328px;
  top: 188px;
  width: 362px;
  height: 362px;
}

#container.alt #grid {
  left: 22px;
}

#cool-graph {
  position: absolute;
  left: 28px;
  top: 174px;
  width: 360px;
  height: 358px;
  background-color: #c4efff;
}

#cool-1 {
  position: absolute;
  left: 16px;
  top: 144px;
  width: 162px;
  height: 92px;
  background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgb(160, 176, 188) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%);
}

#cool-2 {
  position: absolute;
  left: 176px;
  top: 144px;
  width: 162px;
  height: 92px;
  background: linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgb(160, 176, 188) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%);
}

#cool-3 {
  position: absolute;
  left: 176px;
  top: -40px;
  width: 1px;
  height: 184px;
  background-color: #a0b0c4;
}

#cool-4 {
  position: absolute;
  left: 175px;
  top: -41px;
  width: 162px;
  height: 92px;
  background: linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgb(160, 176, 188) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%);
}

#cool-5 {
  position: absolute;
  left: 337px;
  top: 51px;
  width: 1px;
  height: 184px;
  background-color: #a0b0c4;
}

#cool-6 {
  position: absolute;
  left: 178px;
  top: 234px;
  width: 162px;
  height: 94px;
  background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgb(160, 176, 188) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%);
}

#cool-7 {
  position: absolute;
  left: 15px;
  top: 237px;
  width: 163px;
  height: 94px;
  background: linear-gradient(to top right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgb(160, 176, 188) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%);
}

#cool-8 {
  position: absolute;
  left: 13px;
  top: 51px;
  width: 1px;
  height: 184px;
  background-color: #a0b0c4;
}

#cool-9 {
  position: absolute;
  left: 15px;
  top: -41px;
  width: 162px;
  height: 92px;
  background: linear-gradient(to top left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) calc(50% - 0.8px), rgb(160, 176, 188) 50%, rgba(0, 0, 0, 0) calc(50% + 0.8px), rgba(0, 0, 0, 0) 100%);
}

.axis-label {
  float: left;
  width: 28.4px;
  height: 28.4px;
  font-family: "Dongle", sans-serif;
  font-weight: 700;
  font-size: 24px;
  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-family: "Dongle", sans-serif;
  font-weight: 300;
  font-size: 12px;
}

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

.cell {
  float: left;
  background-color: rgba(80, 140, 180, 0.25);
  margin: 0.36px;
  width: 28px;
  height: 28px;
}

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

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

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

.cell.semishaded0a {
  background: linear-gradient(45deg, rgba(80, 140, 180, 0.25) 25%, #bda5f3 25%);
}

.cell.semishaded0b {
  background: linear-gradient(45deg, #bda5f3 75%, rgba(80, 140, 180, 0.25) 75%);
}

.cell.semishaded1a {
  background: linear-gradient(90deg, rgba(80, 140, 180, 0.25) 50%, #bda5f3 50%);
}

.cell.semishaded1b {
  background: linear-gradient(90deg, #bda5f3 50%, rgba(80, 140, 180, 0.25) 50%);
}

.cell.semishaded2a {
  background: linear-gradient(135deg, rgba(80, 140, 180, 0.25) 25%, #bda5f3 25%);
}

.cell.semishaded2b {
  background: linear-gradient(135deg, #bda5f3 75%, rgba(80, 140, 180, 0.25) 75%);
}

.cell.semishaded3a {
  background: linear-gradient(0deg, #bda5f3 50%, rgba(80, 140, 180, 0.25) 50%);
}

.cell.semishaded3b {
  background: linear-gradient(0deg, rgba(80, 140, 180, 0.25) 50%, #bda5f3 50%);
}

.cell.demishaded0a {
  background: linear-gradient(45deg, rgba(80, 140, 180, 0.25) 76%, #bda5f3 76%);
}

.cell.demishaded0b {
  background: linear-gradient(45deg, #bda5f3 24%, rgba(80, 140, 180, 0.25) 24%);
}

.cell.demishaded2a {
  background: linear-gradient(135deg, rgba(80, 140, 180, 0.25) 76%, #bda5f3 76%);
}

.cell.demishaded2b {
  background: linear-gradient(135deg, #bda5f3 24%, rgba(80, 140, 180, 0.25) 24%);
}

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

.point.highlighted {
  background-color: #2d7cac;
}

.blob {
  position: absolute;
  width: 28px;
  height: 28px;
  text-align: center;
  font-family: "Dongle", sans-serif;
  font-weight: 300;
  font-size: 26px;
  line-height: 33px;
  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: #2d7cac;
  color: #fff;
}

.blob.bingo {
  width: 31px;
  height: 26px;
  padding: 0px 0px 0px 0px;
  background-image: url(gem.svg);
  border-radius: 13px;
  margin-left: -0.5px;
  margin-top: 2px;
}

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

#level-name {
  position: absolute;
  left: 146px;
  top: 5px;
  width: 92px;
  height: 36px;
  font-family: "Dongle", sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 42px;
  color: #fff;
}

#hint-text {
  position: absolute;
  left: 20px;
  top: 58px;
  width: 230px;
  height: 64px;
  padding: 4px;
  overflow: hidden;
  font-family: "Dongle", sans-serif;
  font-weight: 300;
  font-size: 26px;
  line-height: 22px;
  border-radius: 6px;
}

#try-again {
  position: absolute;
  left: 104px;
  top: 320px;
  width: 108px;
  height: 31px;
  background-color: #e9f8fd;
  font-family: "Dongle", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 28px;
  color: #2d7cac;
  border: 2px solid #2d7cac;
  border-radius: 16px;
  text-align: center;
}

#try-again.reduced {
  top: 84px;
}

#try-again:focus-visible {
  display: inline-block;
  vertical-align: middle;
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.6);
  border-radius: 16px;
}

#container.alt #try-again {
  left: 488px;
}

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

#diagram {
  position: absolute;
  left: 34px;
  top: 196px;
  width: 310px;
  height: 310px;
  background-image: url(grid_4d.svg);
}

#diagram-x {
  position: absolute;
  left: 296px;
  top: 260px;
  width: 40px;
  height: 40px;
  font-size: 22px;
  font-weight: 700;
}

#diagram-y {
  position: absolute;
  left: 256px;
  top: 114px;
  width: 40px;
  height: 40px;
  font-size: 22px;
  font-weight: 700;
}

#diagram-z {
  position: absolute;
  left: 30px;
  top: -8px;
  width: 40px;
  height: 40px;
  font-size: 22px;
  font-weight: 700;
}

#modal {
  position: absolute;
  left: 320px;
  top: 18px;
  width: 344px;
  height: 114px;
  color: #2d7cac;
  border: 2px solid #2a7aab;
  border-radius: 24px;
  background-color: #fff;
  padding: 8px;
  text-align: center;
}

#modal.reduced {
  position: absolute;
  left: 310px;
  top: 18px;
  width: 354px;
  height: 92px;
}

#container.alt #modal {
  left: 18px;
}

#modal-text {
  margin: 6px;
  margin-top: 10px;
  font-family: "Dongle", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 24px;
}

#modal-button {
  position: absolute;
  left: 128px;
  top: 82px;
  width: 108px;
  height: 30px;
  background-color: #e9f8fd;
  font-family: "Dongle", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
  color: #2d7cac;
  border: 2px solid #2d7cac;
  border-radius: 16px;
  text-align: center;
}

#modal.reduced #modal-button {
  top: 64px;
}

#modal-button:focus-visible {
  display: inline-block; /* Or use 'display: block' or 'display: flex' */
  vertical-align: middle;
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.6);
  border-radius: 16px;
}

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

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