/* dist/index-yxqv90r6.css */
.WorldMap {
  position: absolute;
  z-index: 3;
  height: 2900px;
  margin: 0;
}

.HistoryBar {
  position: fixed;
  background-color: BurlyWood;
  overflow: scroll;
  z-index: 10;
  scrollbar-width: none;
  resize: horizontal;
  border: .1vw solid #000;
  width: 31vw;
  height: 100vh;
  top: 0;
}

.HistoryEvent {
  clear: left;
  direction: ltr;
}

.HistoryEventPicture {
  float: left;
  clear: left;
  border: .15vw solid brown;
  width: 5vw;
}

.HistoryEventPictureHiLit {
  float: left;
  clear: left;
  border: .3vw solid #f0f;
  width: 5vw;
}

.HistoryEventTitle {
  margin: 0 0 0 5.3vw;
}

.WorldMapEventPicture {
  position: absolute;
  z-index: 5;
  border: .15vw solid brown;
  height: .3vw;
}

.WorldMapEventPictureHiLitHistory {
  position: absolute;
  z-index: 9;
  border: .3vw solid #f0f;
  height: 2vw;
}

.WorldMapEventPictureHiLitWorld {
  position: absolute;
  z-index: 14;
  border: .3vw solid #f0f;
  height: 30vw;
}

.WorldMapEventPictureHiLitCity {
  position: absolute;
  z-index: 6;
  border: .3vw solid #f0f;
  height: 2vw;
}

.Astrolabe {
  position: absolute;
  z-index: 4;
  opacity: .2;
  width: 280px;
  height: 300px;
  top: 2550px;
  left: 71px;
}

.Astrolabe:hover {
  position: absolute;
  z-index: 4;
  opacity: 1;
  width: 280px;
  height: 300px;
  top: 2550px;
  left: 71px;
}

.Milestone {
  position: fixed;
  z-index: 8;
  background: url("/_bun/asset/8d4417be55fea971.png") 0 0 / contain no-repeat;
  width: 25vw;
  height: 25vw;
  margin: 0;
  padding: 0;
  bottom: 0;
  left: 37.5vw;
}

.MilestoneNumber {
  text-align: center;
  color: #0000;
  text-shadow: .2vw .2vw .2vw #fff6;
  background: #764e20;
  -webkit-background-clip: text;
  background-clip: text;
  margin-top: 6vw;
  font-family: serif;
  font-size: 4.4vw;
}

.Airship {
  position: absolute;
  z-index: 7;
  width: 300px;
  height: 300px;
  transition-property: top, left;
  transition-duration: 0s;
  top: 0;
  left: 0;
}

.CharacterBoard {
  display: grid;
  grid-template-columns: 11.5vw 11.5vw 11.5vw 11.5vw 11.5vw 11.5vw;
  z-index: 15;
  position: fixed;
  overflow: scroll;
  scrollbar-width: none;
  background: url("/_bun/asset/b10e893a3f2b620b.jpg") 0 0 / 100vw 100vh no-repeat;
  align-content:  start;
  height: 100vh;
  top: 0;
  left: 0;
}

.Wanted {
  position: absolute;
  width: 11.5vw;
  height: 22vw;
}

.CharacterPic {
  position: absolute;
  border-radius: .5vw;
  width: 4.45vw;
  height: 4.45vw;
  margin-top: 1.3vw;
  margin-left: 3.5vw;
}

.CharacterTextContainer {
  position: absolute;
  scrollbar-width: none;
  overflow: scroll;
  width: 10vw;
  height: 13.7vw;
  margin-top: 6vw;
  margin-left: 1vw;
}

.CharacterNameTitle {
  text-align: center;
  margin: 0 .5vw 0 0;
  font-size: .7vw;
}

.CharacterOpenIssues {
  text-align: justify;
  margin: .4vw .5vw 0 0;
  font-size: .7vw;
  font-weight: 400;
}

.CharacterPastNotes {
  text-align: justify;
  margin: 0 .5vw 0 0;
  font-size: .7vw;
  font-weight: 400;
}

.Searcher {
  position: fixed;
  z-index: 16;
  opacity: .5;
  outline-width: 0;
  border-style: solid;
  border-width: .05vw;
  width: 20vw;
  padding: 0;
  font-size: 1.5vw;
  bottom: .3vw;
  left: 40vw;
}

.Imageviewer {
  position: fixed;
  z-index: 17;
  border: .3vw solid brown;
  bottom: 0;
}

.Toolbar {
  position: fixed;
  z-index: 99;
  background-color: #e35336;
  border: .12vw solid #000;
  padding-bottom: .55vw;
}

.hide {
  transition: all 1ms;
  transform: translate(-9999px);
}

.topleft {
  top: 0;
  left: 0;
}

.Toolbarbuttoncontainer {
  clear: left;
}

.ToolbarButtonunpressed {
  outline: .1vw solid #000;
  float: left;
  background-color: #ff856d;
  background-size: cover;
  border: .3vw outset #e35336;
  width: 1.2vw;
  height: 1.2vw;
  margin: .55vw .55vw 0;
}

.ToolbarButtonunpressed:hover {
  outline: .2vw solid #00f;
  float: left;
  background-color: #ff856d;
  background-size: cover;
  border: .3vw outset #e35336;
  width: 1.2vw;
  height: 1.2vw;
  margin: .55vw .55vw 0;
}

.ToolbarButtonunpressed:active {
  outline: .2vw solid #00f;
  float: left;
  background-color: #b73f27;
  border: .3vw inset #e35336;
  width: 1.2vw;
  height: 1.2vw;
  margin: .55vw .55vw 0;
}

.ToolbarButtonpressed {
  outline: .1vw solid #000;
  float: left;
  background-color: #b73f27;
  background-size: cover;
  border: .3vw inset #e35336;
  width: 1.2vw;
  height: 1.2vw;
  margin: .55vw .55vw 0;
}

.ToolbarButtonpressed:hover {
  outline: .2vw solid #00f;
  float: left;
  background-color: #b73f27;
  background-size: cover;
  border: .3vw inset #e35336;
  width: 1.2vw;
  height: 1.2vw;
  margin: .55vw .55vw 0;
}

.Toolbarbuttonhint {
  float: left;
  margin: .7vw .35vw 0 -.2vw;
  font-size: 1.2vw;
  font-weight: 700;
}

[data-tooltip]:hover:after {
  display: block;
  position: absolute;
  content: attr(data-tooltip);
  background: #eee;
  border: .1vw solid #000;
  font-size: 1.5vw;
  left: 10vw;
}

.BackgroundTable {
  position: fixed;
  z-index: 2;
  height: 3500px;
  bottom: 0;
  left: 0;
}

.PocketWatch {
  position: fixed;
  z-index: 20;
  width: 30vw;
  top: 15vw;
  left: 5vw;
}

.ClockHand {
  position: fixed;
  z-index: 21;
  transform-origin: 11% 50%;
  width: 20vw;
  top: 32.9vw;
  left: 17.8vw;
  transform: rotate(-90deg);
}

.HoursContainer {
  position: fixed;
  z-index: 22;
  text-align: center;
  width: 3.5vw;
  top: 32.3vw;
  left: 18.26vw;
}

.Hours {
  font-size: 3.4vw;
}

.YearContainer {
  position: fixed;
  z-index: 21;
  background: url("/_bun/asset/1a2e3b3c700b6b49.png") 0 0 / contain no-repeat;
  width: 30vw;
  height: 15vw;
  margin: 0;
  padding: 0;
  top: 1vw;
  left: 5vw;
}

.Year {
  text-align: center;
  color: #0000;
  text-shadow: .2vw .2vw .2vw #fff3;
  background: #211e0d;
  -webkit-background-clip: text;
  background-clip: text;
  margin-top: 2.6vw;
  font-family: serif;
  font-size: 7vw;
}

li, .pie-outer *, .pie-outer {
  margin: 0;
  padding: 0;
}

.pie-outer {
  position: fixed;
  z-index: 20;
  padding-top: 100%;
  top: 1vw;
  left: 40vw;
}

.pie {
  pointer-events: none;
  position: absolute;
  overflow: hidden;
  border: .4vw solid #af9b7a;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)rotate(75deg);
}

.pie ul {
  list-style-type: none;
}

.pie ul:after {
  content: " ";
  display: block;
  width: 100%;
  padding-top: 100%;
}

.pie li {
  position: absolute;
  overflow: hidden;
  transform-origin: 100% 100%;
  border: 0 solid #000;
  width: 100%;
  height: 100%;
  margin-top: 0;
  margin-left: 0;
  top: -50%;
  left: -50%;
}

.pie li:first-child {
  transform: rotate(0)skew(60deg);
}

.pie li:nth-child(2) {
  transform: rotate(30deg)skew(60deg);
}

.pie li:nth-child(3) {
  transform: rotate(60deg)skew(60deg);
}

.pie li:nth-child(4) {
  transform: rotate(90deg)skew(60deg);
}

.pie li:nth-child(5) {
  transform: rotate(120deg)skew(60deg);
}

.pie li:nth-child(6) {
  transform: rotate(150deg)skew(60deg);
}

.pie li:nth-child(7) {
  transform: rotate(180deg)skew(60deg);
}

.pie li:nth-child(8) {
  transform: rotate(210deg)skew(60deg);
}

.pie li:nth-child(9) {
  transform: rotate(240deg)skew(60deg);
}

.pie li:nth-child(10) {
  transform: rotate(270deg)skew(60deg);
}

.pie li:nth-child(11) {
  transform: rotate(300deg)skew(60deg);
}

.pie li:nth-child(12) {
  transform: rotate(330deg)skew(60deg);
}

.pie li:nth-child(13) {
  transform: rotate(360deg)skew(60deg);
}

.pie a {
  pointer-events: auto;
  display: block;
  position: absolute;
  text-decoration: none;
  text-align: center;
  color: #fff;
  width: 100%;
  height: 100%;
  font-size: 2.125vw;
  line-height: 4.125vw;
  top: 50%;
  left: 50%;
  transform: skew(-60deg)rotate(-75deg);
}

.black {
  outline-color: #000;
  outline-style: solid;
  outline-width: .1vw;
  background: #333;
  width: 100%;
}

.teal {
  background: teal;
  width: 85%;
}

.gray {
  background: #666;
  width: 70%;
}

.orange {
  background: #fff;
  width: 55%;
}

@media (width >= 1vw) {
  .pie-outer {
    width: 55vw;
    height: 55vw;
    padding-top: 0;
  }

  .pie a {
    font-size: 2vw;
  }
}

.Seasons {
  position: fixed;
  z-index: 21;
  width: 30.3vw;
  top: 13.35vw;
  left: 52.34vw;
}

.MapOCR {
  position: absolute;
  z-index: 4;
  opacity: .2;
  width: 300px;
  height: 300px;
  top: 2250px;
  left: 80px;
}

.MapOCR:hover {
  position: absolute;
  z-index: 4;
  opacity: 1;
  width: 300px;
  height: 300px;
  top: 2250px;
  left: 80px;
}

.RedPin {
  position: absolute;
  z-index: 6;
  width: 25px;
  height: 25px;
}

.Tooltip {
  position: absolute;
  z-index: 14;
  background-color: LemonChiffon;
  border: 1px solid #000;
  margin: 0;
  padding: .2vw;
  font-size: 1vw;
  top: 0;
  left: 0;
}

.LongDescriptionContainer {
  position: fixed;
  z-index: 13;
  direction: ltr;
  background-image: url("/_bun/asset/367a7fb10b7a93e4.jpg");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  width: 44vw;
  height: 29vw;
  margin: 0;
  padding: 7vw 7vw 7vw 7.5vw;
  top: 0;
}

.LongDescription {
  margin: 0;
  font-size: 1.5vw;
}

.CityMapContainer {
  position: fixed;
  z-index: 11;
  line-height: 0;
  bottom: 0;
}

.CityMap {
  width: 40vw;
}

.CityName {
  position: absolute;
  z-index: 12;
  background-color: #d3d3d3;
  border: .3vw solid #000;
  border-radius: .3vw;
  margin: .2vw;
  padding: .2vw;
  font-size: 2vw;
  font-weight: 700;
  line-height: 1.7vw;
  bottom: 0;
}

.CitySpot {
  position: absolute;
  z-index: 12;
  border: .15vw solid brown;
  height: 1.2vw;
}

.CitySpotHiLitWorld, .CitySpotHiLitHistory {
  position: absolute;
  z-index: 12;
  border: .3vw solid #f0f;
  height: 1.2vw;
}

.CitySpotHiLitCity {
  position: absolute;
  z-index: 14;
  border: .3vw solid #f0f;
  height: 30vw;
}

.Hourglass {
  position: absolute;
  z-index: 4;
  opacity: .2;
  width: 300px;
  height: 300px;
  top: 1650px;
  left: 62px;
}

.Hourglass:hover {
  position: absolute;
  z-index: 4;
  opacity: 1;
  width: 300px;
  height: 300px;
  top: 1650px;
  left: 62px;
}