@import "./colors.css";
@import "./general.css";
#content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  background-color: var(--bg0_hard);
  color: var(--fg1);
  background-image: url("/files/ui/website-bkg.png");
  background-repeat: round;
  image-rendering: crisp-edges;
}
#content #shugoshi-wrapper #shugoshi #hint {
  display: none;
  position: absolute;
  font-size: 32px;
  z-index: 5;
  cursor: pointer;
  /* this dead centers  */
  /* top/right/bottom/left = 0 */
  inset: 0;
  /* let browser split the leftover space */
  margin: auto;
  width: 290px;
  height: max-content;
  /* the following creates a resizable container bkg img */
  /* for hints with always the same bkg image  */
  /* at first */
  /* this sets a border image, by slicing the url at 27 px */
  /* and stretches the border from the middle, not the edges  */
  border-image: url("/files/ui/ui-hint.png") 27 stretch;
  border-style: solid;
  border-width: 27px;
  /* and a filler background for the hole left by the broder image */
  background: url("/files/ui/ui-hint-inner.png");
}
#content #shugoshi-wrapper #shugoshi #hint.active {
  display: block;
}
#content #shugoshi-wrapper #shugoshi #shugoshi-ui {
  position: relative;
  width: 360px;
  height: 60px;
}
#content #shugoshi-wrapper #shugoshi #shugoshi-ui .ui-box {
  position: absolute;
  top: 10px;
  text-align: center;
  font-size: 16px;
  height: 40px;
  width: 45px;
  background-image: url("/files/ui/ui-top-box.png");
}
#content #shugoshi-wrapper #shugoshi #shugoshi-ui .ui-box p {
  margin: 0;
  line-height: 1;
}
#content #shugoshi-wrapper #shugoshi #shugoshi-ui .ui-box p.title {
  font-size: 12px;
  margin-top: 3px;
}
#content #shugoshi-wrapper #shugoshi #shugoshi-ui .ui-box p.value {
  font-size: 26px;
  line-height: 0.8;
}
#content #shugoshi-wrapper #shugoshi #shugoshi-ui .ui-box#switch {
  background-image: url("/files/ui/ui-top-box-bright.png");
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
#content #shugoshi-wrapper #shugoshi #shugoshi-ui .ui-box#switch .time {
  display: none;
}
#content #shugoshi-wrapper #shugoshi #shugoshi-ui .ui-box#switch .time.active {
  display: block;
}
#content #shugoshi-wrapper #shugoshi #shugoshi-ui .ui-box#switch .time p {
  color: var(--orange_dark);
  font-size: 22px;
  line-height: 0.6;
  text-align: center;
}
#content #shugoshi-wrapper #shugoshi #shugoshi-ui .ui-box#switch .time p:first-child {
  width: 30px;
  font-size: 24px;
  /* border-bottom: 1px solid var(--orange_dark); */
  /* padding-bottom: 2px; */
  margin-top: -3px;
}
#content #shugoshi-wrapper #shugoshi #shugoshi-ui #menu {
  cursor: pointer;
  position: absolute;
  left: 10px;
  top: 10px;
}
#content #shugoshi-wrapper #shugoshi #shugoshi-space {
  width: 360px;
  height: 580px;
  position: relative;
}
#content #shugoshi-wrapper #shugoshi #shugoshi-space .shugoshi-img {
  position: absolute;
  top: 0;
  left: 0;
}
#content #shugoshi-wrapper #shugoshi #shugoshi-space .shugoshi-img#shugoshi-note {
  cursor: pointer;
  top: unset;
  bottom: 22px;
  left: 141px;
}
#content #shugoshi-wrapper #shugoshi #shugoshi-space .shugoshi-img#shugoshi-note-expanded {
  cursor: pointer;
}
#content #shugoshi-wrapper #shugoshi #shugoshi-space .shugoshi-img#shugoshi-rain-front, #content #shugoshi-wrapper #shugoshi #shugoshi-space .shugoshi-img#shugoshi-rain-back {
  opacity: 0.5;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper {
  display: none;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper.active {
  display: block;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #menu-wrapper {
  position: absolute;
  top: 60px;
  left: 0px;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #menu-wrapper #menu-items {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  gap: 50px 0;
  flex-direction: column;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #menu-wrapper #menu-items .menu-box {
  position: relative;
  cursor: pointer;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #menu-wrapper #menu-items .menu-box p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  margin: 0px;
  font-size: 45px;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper {
  display: none;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper.active, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper.active, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper.active {
  display: block;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #menu-frame-img, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #menu-frame-img, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #menu-frame-img {
  position: absolute;
  top: 60px;
  left: 0;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #shugoshi-icon, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #shugoshi-icon, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #shugoshi-icon {
  position: absolute;
  top: 73px;
  left: 99px;
  transform: rotate(15deg);
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #about, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #credits, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #about, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #credits, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #about, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #credits, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options {
  position: absolute;
  top: 70px;
  left: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  flex-direction: column;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #about h2, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #credits h2, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options h2, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #about h2, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #credits h2, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options h2, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #about h2, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #credits h2, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options h2 {
  font-size: 30px;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #about h3, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #credits h3, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options h3, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #about h3, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #credits h3, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options h3, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #about h3, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #credits h3, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options h3 {
  font-size: 26px;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #about h2, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #about h3, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #credits h2, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #credits h3, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options h2, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options h3, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #about h2, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #about h3, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #credits h2, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #credits h3, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options h2, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options h3, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #about h2, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #about h3, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #credits h2, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #credits h3, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options h2, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options h3 {
  margin: 3px 10px;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #about p, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #credits p, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options p, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #about p, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #credits p, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options p, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #about p, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #credits p, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options p {
  font-size: 24px;
  margin: 0 32px;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #about .back, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #credits .back, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options .back, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #about .back, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #credits .back, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options .back, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #about .back, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #credits .back, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options .back {
  display: inline;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 40px;
  cursor: pointer;
  background-image: url("/files/ui/ui-menu-box.png");
  width: 165px;
  height: 70px;
  line-height: 65px;
  text-align: center;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #about .info-box, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #credits .info-box, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options .info-box, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #about .info-box, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #credits .info-box, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options .info-box, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #about .info-box, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #credits .info-box, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options .info-box {
  width: 165px;
  height: 70px;
  position: relative;
  margin-right: 6px;
  cursor: pointer;
  /* color: var(--bg4); */
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #about .info-box .info-bkg, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #credits .info-box .info-bkg, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options .info-box .info-bkg, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #about .info-box .info-bkg, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #credits .info-box .info-bkg, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options .info-box .info-bkg, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #about .info-box .info-bkg, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #credits .info-box .info-bkg, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options .info-box .info-bkg {
  position: absolute;
  top: 0;
  left: 0;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #about .info-box .title, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #credits .info-box .title, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options .info-box .title, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #about .info-box .title, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #credits .info-box .title, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options .info-box .title, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #about .info-box .title, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #credits .info-box .title, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options .info-box .title {
  position: relative;
  padding-left: 10px;
  padding-top: 5px;
  margin: 0;
  font-size: 22px;
  z-index: 2;
  margin: 0;
  color: inherit;
  text-decoration: underline;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #about .info-box .value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #credits .info-box .value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options .info-box .value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #about .info-box .value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #credits .info-box .value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options .info-box .value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #about .info-box .value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #credits .info-box .value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options .info-box .value {
  position: relative;
  padding-left: 20px;
  font-size: 24px;
  margin: 0;
  z-index: 2;
  line-height: 1;
  color: inherit;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #about .info-box .value#moon-phase-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #credits .info-box .value#moon-phase-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options .info-box .value#moon-phase-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #about .info-box .value#moon-phase-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #credits .info-box .value#moon-phase-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options .info-box .value#moon-phase-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #about .info-box .value#moon-phase-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #credits .info-box .value#moon-phase-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options .info-box .value#moon-phase-value {
  font-size: 20px;
  padding-left: 12px;
  margin-top: 7px;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #about .info-box#location, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #credits .info-box#location, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options .info-box#location, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #about .info-box#location, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #credits .info-box#location, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options .info-box#location, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #about .info-box#location, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #credits .info-box#location, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options .info-box#location {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding-top: 5px;
  margin: 0;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #about .info-box#location #location-title, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #credits .info-box#location #location-title, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options .info-box#location #location-title, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #about .info-box#location #location-title, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #credits .info-box#location #location-title, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options .info-box#location #location-title, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #about .info-box#location #location-title, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #credits .info-box#location #location-title, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options .info-box#location #location-title {
  padding-left: 20px;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #about .info-box#location #location-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #credits .info-box#location #location-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options .info-box#location #location-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #about .info-box#location #location-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #credits .info-box#location #location-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options .info-box#location #location-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #about .info-box#location #location-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #credits .info-box#location #location-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options .info-box#location #location-value {
  padding-left: 0;
  padding-top: 5px;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #about .info-box#reload #reload-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #credits .info-box#reload #reload-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options .info-box#reload #reload-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #about .info-box#reload #reload-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #credits .info-box#reload #reload-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options .info-box#reload #reload-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #about .info-box#reload #reload-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #credits .info-box#reload #reload-value, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options .info-box#reload #reload-value {
  line-height: 1.5;
  padding-left: unset;
  text-align: center;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #about .info-box#reload #reload-icon, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #credits .info-box#reload #reload-icon, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options .info-box#reload #reload-icon, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #about .info-box#reload #reload-icon, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #credits .info-box#reload #reload-icon, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options .info-box#reload #reload-icon, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #about .info-box#reload #reload-icon, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #credits .info-box#reload #reload-icon, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options .info-box#reload #reload-icon {
  position: absolute;
  top: 8px;
  right: 13px;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #about .info-box#reload #reload-icon.loading, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #credits .info-box#reload #reload-icon.loading, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options .info-box#reload #reload-icon.loading, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #about .info-box#reload #reload-icon.loading, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #credits .info-box#reload #reload-icon.loading, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options .info-box#reload #reload-icon.loading, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #about .info-box#reload #reload-icon.loading, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #credits .info-box#reload #reload-icon.loading, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options .info-box#reload #reload-icon.loading {
  animation: rotate 1.3s linear infinite;
}
#content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #about-wrapper #options, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #credits-wrapper #options, #content #shugoshi-wrapper #shugoshi #menu-frame-wrapper #options-wrapper #options {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  left: 0;
  top: 95px;
}
#content #shugoshi-wrapper #shugoshi #note-wrapper {
  display: none;
  position: absolute;
  top: 100px;
  left: 50px;
  width: 250px;
  height: 510px;
}
#content #shugoshi-wrapper #shugoshi #note-wrapper.active {
  display: block;
}
#content #shugoshi-wrapper #shugoshi #note-wrapper #text-wrapper {
  position: relative;
  color: var(--bg0);
}
#content #shugoshi-wrapper #shugoshi #note-wrapper #text-wrapper p {
  color: inherit;
  font-size: 16px;
  margin: 0;
}
#content #shugoshi-wrapper #shugoshi #note-wrapper #text-wrapper {
  /* .value { */
  /* color: var(--blue_dark); */
  /* } */
}
#content #shugoshi-wrapper #shugoshi #note-wrapper #text-wrapper #date-wrapper {
  position: absolute;
  left: 15px;
  top: 13px;
}
#content #shugoshi-wrapper #shugoshi #note-wrapper #text-wrapper #text {
  position: absolute;
  top: 40px;
  left: 23px;
}
#content #shugoshi-wrapper #shugoshi #note-wrapper #text-wrapper #text p {
  font-size: 20px;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper {
  display: none;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper.active {
  display: block;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #get-location {
  position: absolute;
  top: 0;
  left: 0;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #text-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 230px;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #text-wrapper h2 {
  margin-bottom: 10px;
  text-decoration: underline;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #text-wrapper p {
  font-size: 20px;
  margin: 0;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #text-wrapper p.button {
  color: var(--orange);
  margin: 8px 0;
  cursor: pointer;
  background-image: url("/files/ui/ui-menu-box.png");
  width: 165px;
  height: 70px;
  line-height: 65px;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #text-wrapper .back {
  display: inline;
  position: fixed;
  bottom: -112px;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 40px;
  cursor: pointer;
  background-image: url("/files/ui/ui-menu-box.png");
  width: 165px;
  height: 70px;
  line-height: 65px;
  text-align: center;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #dialog {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  flex-direction: column;
  inset: 0;
  margin: auto;
  width: 290px;
  height: max-content;
  border-image: url("/files/ui/ui-hint.png") 27 stretch;
  border-style: solid;
  border-width: 27px;
  background: url("/files/ui/ui-hint-inner.png");
  font-size: 20px;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #dialog.active {
  display: flex;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #dialog h2 {
  font-size: 24px;
  text-align: center;
  text-decoration: underline;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #dialog h3 {
  font-size: 22px;
  margin-top: 10px;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #dialog p {
  margin: 20px 0 10px;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #dialog button {
  color: var(--fg1);
  font-size: 22px;
  margin: 20px auto 10px;
  border: 1px solid var(--fg1);
  width: 100px;
  height: 30px;
  line-height: 1px;
  opacity: 0.3;
  cursor: auto;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #dialog button.active {
  opacity: 1;
  cursor: pointer;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #dialog input {
  background: none;
  color: var(--fg1);
  border: none;
  border-bottom: 1px solid var(--fg1);
  margin: 5px 0;
  appearance: textfield;
  font-size: 22px;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #dialog input:focus {
  outline: none;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #dialog input::placeholder {
  opacity: 0.5;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #dialog .warning {
  display: none;
  position: absolute;
  color: var(--red_dark);
  left: 175px;
  display: none;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #dialog .warning.active {
  display: block;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #dialog .warning#warning-lat {
  top: 166px;
}
#content #shugoshi-wrapper #shugoshi #get-location-wrapper #dialog .warning#warning-lon {
  top: 225px;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}