body,
html {
  margin: 0px;
  font-family: "Verdana";
  background-color: #fff;
  overflow: hidden;
}

.hidden {
  display: none;
}

#container {
  background-image: url(background.svg);
  top: 42px;
  width: 700px;
  height: 556px;
  margin: 0px 0px;
  border: 1px solid black;
  overflow: hidden;
}

#crossy-scene {
  position: absolute;
  left: 2px;
  top: 44px;
  width: 700px;
  height: 556px;
  overflow: hidden;
}

#bridge-fg {
  position: absolute;
  top: 336px;
  background-image: url(bridge.svg);
  width: 700px;
  height: 222px;
  pointer-events: none;
}

#crossy-comment {
  position: absolute;
  left: 0px;
  top: 506px;
  background-color: #152443;
  color: #ffffff;
  width: 674px;
  height: 32px;
  padding-top: 10px;
  padding-bottom: 8px;
  padding-left: 20px;
  padding-right: 8px;
  font-size: 24px;
  font-family: "Dongle", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.person_box {
  position: absolute;
}

.person {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 40px;
  height: 82px;
  text-align: center;
}

.person_label {
  position: absolute;
  left: 8px;
  top: -30px;
  width: 22px;
  height: 21.5px;
  background-color: #2a4065;
  border: 1px solid #4b6591;
  color: #ffffff;
  border-radius: 12px;
  text-align: center;
  line-height: 24px;
  padding-top: 0.5px;
  font-size: 22px;
  font-family: "Dongle", sans-serif;
  font-weight: 400;
  font-style: normal;
}

#person1 {
  background-image: url(person_4a.svg);
}

#person1.highlighted {
  background-image: url(person_4b.svg);
}

#person1.right1 {
  background-image: url(person_4c.svg);
}

#person1.right2 {
  background-image: url(person_4d.svg);
}

#person1.right1.lead {
  background-image: url(person_4e.svg);
}

#person1.right2.lead {
  background-image: url(person_4f.svg);
}

#person1.left1 {
  background-image: url(person_4c.svg);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#person1.left2 {
  background-image: url(person_4d.svg);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#person1.left1.lead {
  background-image: url(person_4e.svg);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#person1.left2.lead {
  background-image: url(person_4f.svg);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#person2 {
  background-image: url(person_3a.svg);
}

#person2.highlighted {
  background-image: url(person_3b.svg);
}

#person2.right1 {
  background-image: url(person_3c.svg);
}

#person2.right2 {
  background-image: url(person_3d.svg);
}

#person2.right1.lead {
  background-image: url(person_3e.svg);
}

#person2.right2.lead {
  background-image: url(person_3f.svg);
}

#person2.left1 {
  background-image: url(person_3c.svg);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#person2.left2 {
  background-image: url(person_3d.svg);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#person2.left1.lead {
  background-image: url(person_3e.svg);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#person2.left2.lead {
  background-image: url(person_3f.svg);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#person3 {
  background-image: url(person_2a.svg);
}

#person3.highlighted {
  background-image: url(person_2b.svg);
}

#person3.right1 {
  background-image: url(person_2c.svg);
}

#person3.right2 {
  background-image: url(person_2d.svg);
}

#person3.right1.lead {
  background-image: url(person_2e.svg);
}

#person3.right2.lead {
  background-image: url(person_2f.svg);
}

#person3.left1 {
  background-image: url(person_2c.svg);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#person3.left2 {
  background-image: url(person_2d.svg);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#person3.left1.lead {
  background-image: url(person_2e.svg);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#person3.left2.lead {
  background-image: url(person_2f.svg);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#person4 {
  background-image: url(person_1a.svg);
}

#person4.highlighted {
  background-image: url(person_1b.svg);
}

#person4.right1 {
  background-image: url(person_1c.svg);
}

#person4.right2 {
  background-image: url(person_1d.svg);
}

#person4.right1.lead {
  background-image: url(person_1e.svg);
}

#person4.right2.lead {
  background-image: url(person_1f.svg);
}

#person4.left1 {
  background-image: url(person_1c.svg);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#person4.left2 {
  background-image: url(person_1d.svg);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#person4.left1.lead {
  background-image: url(person_1e.svg);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

#person4.left2.lead {
  background-image: url(person_1f.svg);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.tracker {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 22px;
  height: 21.5px;
  background-color: #9aa0d5;
  border: 1px solid #adb8f8;
  color: #ffffff;
  border-radius: 12px;
  text-align: center;
  line-height: 24px;
  padding-top: 0.5px;
  font-size: 22px;
  font-family: "Dongle", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.tracker.particle {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #bbc2f6;
}

.tracker.particle.yellow {
  background-color: #dde2c6;
}

#torch {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 22px;
  height: 60px;
}

#torch.torch {
  background-image: url(torch.png);
  pointer-events: none;
}

#torch.lantern {
  background-image: url(lantern.png);
  pointer-events: none;
}

#torch.modern {
  background-image: url(torch.svg);
  width: 60px;
  pointer-events: none;
}

#torch.modern.left {
  background-image: url(torch.svg);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.particle-of-darkness {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 24px;
  height: 24px;
  background-color: #121218;
  border-radius: 10px;
}

#caption {
  position: absolute;
  left: 0px;
  top: 69px;
  color: #ffffff;
  padding-left: 21px;
  padding-right: 12px;
  padding-top: 14px;
  width: 540px;
  height: 90px;
  border-radius: 4px;
  line-height: 21px;
  font-size: 26px;
  font-family: "Dongle", sans-serif;
  font-weight: 300;
  font-style: normal;
}

#cross-button {
  position: absolute;
  left: 526px;
  top: 520px;
  background-color: #2a4065;
  color: #fff;
  padding-top: 2px;
  width: 74px;
  height: 22px;
  border-radius: 12px;
  text-align: center;
  line-height: 24px;
  font-size: 22px;
  font-family: "Dongle", sans-serif;
  font-weight: 400;
  font-style: normal;
}

#cross-button:hover {
  background-color: #2a5075;
}

#restart-button {
  position: absolute;
  left: 614px;
  top: 520px;
  background-color: #2a4065;
  color: #fff;
  padding-top: 2px;
  width: 74px;
  height: 22px;
  border-radius: 12px;
  text-align: center;
  line-height: 24px;
  font-size: 22px;
  font-family: "Dongle", sans-serif;
  font-weight: 400;
  font-style: normal;
}

#restart-button:hover {
  background-color: #2a5075;
}

#nrich {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-color: #dde;
}

#time-taken-header {
  position: absolute;
  left: 564px;
  top: 44px;
  color: #ffffff;
  padding-top: 16px;
  padding-right: 20px;
  width: 116px;
  height: 22px;
  text-align: right;
  line-height: 24px;
  font-size: 26px;
  font-family: "Dongle", sans-serif;
  font-weight: 300;
  font-style: normal;
}

#time-taken {
  position: absolute;
  left: 564px;
  top: 76px;
  color: #ffffff;
  padding-top: 4px;
  padding-right: 20px;
  width: 116px;
  height: 28px;
  text-align: right;
  line-height: 24px;
  font-size: 24px;
  font-family: "Dongle", sans-serif;
  font-weight: 400;
  font-style: normal;
}

#nrich {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-color: #dde;
}

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

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