style.scss

@font-face {
  font-family: myFont;
  src: url(./fonts/ttf/p5hatty.ttf);
}

html,
body {
  /*  background: no-repeat center url("images/map.png"); */
  background-color: #bf0f10;
  font-family: myFont, "Liberaion Sans", sans-serif;
  margin: 0;
  height: 100%;
}

.grid-container {
  display: grid;
  grid-template-columns: 0fr 2fr 0fr;
  grid-template-rows: 0.2fr 0.15fr 1.1fr;
  gap: 0px 0px;

  height: 100vh;
  margin: 0px;
  overflow: auto;
}
.map {
  grid-area: 2 / 2 / 4 / 3;
}
.search {
  grid-area: 1 / 2 / 3 / 3;
}

.flex-container {
  justify-content: space-evenly;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.search-svg {
  z-index: 3;
}

//.search {
//  width: 33%;
//  height: 10vh;
//  justify-self: center;
//
//  display: flex;
//  justify-content: center;
//}

.search-container {
  height: 100%;
  width: 100%;
  display: flex;
}

.search-svg {
  height: 100%;
}

.search-foreign-obj {
  display: flex;
  align-items: center;
}

$image-width: 1450px;

.svg {
  height: 100%;
  width: 100%;
  justify-self: center;
}

.map-image {
  width: 1500px;
  height: auto;
  max-width: 1500px;
}

#cursor-container {
  isolation: isolate;
}

.cursor-blue {
  mix-blend-mode: darken;
}

.label {
  //pointer-events: none;
  //visibility: hidden;
}

.label-image-bg {
  mix-blend-mode: normal;
}

.label-content-selected {
  mix-blend-mode: difference;
}
.label-content-unselected {
  mix-blend-mode: normal;
}

.label-image-bg-alt {
  mix-blend-mode: difference;
}

.visible {
  visibility: visible;
}
.hidden {
  visibility: hidden;
}

.label-text {
  text-anchor: middle;
  //transform-origin: center;
  pointer-events: none;
  font-variant-caps: small-caps;
  font-weight: bolder;
  font-size: large;
}
.label-kanji {
  font-size: x-large;
}

/* label kanji text */
#label0-kanji {
  font-size: 22px;
}
#label1-kanji {
  font-size: x-large;
}
#label9-kanji {
  font-size: large;
}
#label10-kanji {
  font-size: large;
}
#label14-kanji {
  font-size: large;
}
#label18-kanji {
  font-size: xx-large;
}
#label24-kanji {
  font-size: large;
}

/* link images */
#city0-image {
  transform-origin: 680px 418px;
}
#city1-image {
  transform-origin: 246px 219px;
}
#city2-image {
  transform-origin: 457px 262px;
}
#city3-image {
  transform-origin: 582px 182px;
}
#city4-image {
  transform-origin: 622px 263px;
}

#city5-image {
  transform-origin: 890px 251px;
}
#city6-image {
  transform-origin: 948px 175px;
}
#city7-image {
  transform-origin: 1071px 264px;
}
#city8-image {
  transform-origin: 1138px 156px;
}
#city9-image {
  transform-origin: 154px 384px;
}
#city10-image {
  transform-origin: 295px 343px;
}
#city11-image {
  transform-origin: 461px 364px;
}
#city12-image {
  transform-origin: 515px 463px;
}
#city13-image {
  transform-origin: 797px 356px;
}
#city14-image {
  transform-origin: 875px 428px;
}
#city15-image {
  transform-origin: 973px 365px;
}
#city16-image {
  transform-origin: 1157px 361px;
}
#city17-image {
  transform-origin: 1402px 410px;
}
#city18-image {
  transform-origin: 241px 519px;
}
#city19-image {
  transform-origin: 805px 510px;
}
#city20-image {
  transform-origin: 1126px 495px;
}
#city21-image {
  transform-origin: 1283px 566px;
}
#city22-image {
  transform-origin: 130px 703px;
}
#city23-image {
  transform-origin: 568px 860px;
}
#city24-image {
  transform-origin: 1211px 779px;
}

.kasumi-image-container {
  display: none;
  justify-self: center;
  grid-row: 1 / 4;
}
.kasumi-image {
  width: auto;
  height: 60vh;
  margin: 20px 0 20px 0;
  display: none;
}

@media (min-width: 2500px) and (orientation: landscape) {
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 0.2fr 0.18fr 1fr;
    gap: 0px 0px;
    width: 100%;
    height: 100%;
  }

  .map {
    grid-area: 2 / 2 / 4 / 3;
  }
  .search {
    grid-area: 1 / 2 / 3 / 3;
  }
  .kasumi-img1 {
    grid-area: 1 / 1 / 4 / 2;
  }
  .kasumi-img2 {
    grid-area: 1 / 3 / 4 / 4;
  }

  .kasumi-image-container {
    //display: block;
    display: grid;
  }
  .kasumi-image {
    //display: block;
    align-self: center;
    display: block;
  }
}