html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #1C1C1C;
  font-family: 'Press Start 2P', cursive;
}

.image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;   
  display: none;
}

.landscape {
  background-image: url('/img/horizontal.png');
}
.portrait {
  background-image: url('/img/vertical.png');
}

@media (orientation: landscape) {
  .landscape { display: block; }
}
@media (orientation: portrait) {
  .portrait { display: block; }
}

.hotspot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f5f5f5;
  text-decoration: none;
  white-space: nowrap;
  pointer-events: auto;
  background: rgba(0,0,0,0);
  font-family: 'Press Start 2P', cursive;
  cursor: pointer;
}

.landscape .hotspot {
  font-size: 1.2vw;
}

.landscape .index {
  left: 40.5%; top: 10.83%;
  width: 16.26%; height: 4.57%;
}

.landscape .stickers { 
  left: 7.0%; top: 88.0%;
  width: 12%; height: 4%; 
}
.landscape .log { 
  left: 25.0%; top: 88.0%;
  width: 8%; height: 4%; 
}
.landscape .walks { 
  left: 42%; top: 88.0%;
  width: 12%; height: 4%; 
}
.landscape .iland { 
  left: 63.0%; top: 88.0%;
  width: 15%; height: 4%; 
  font-size: 1vw;       
}
.landscape .ask { 
  left: 82.0%; top: 88.0%;
  width: 12%; height: 4%; 
}

.portrait .hotspot {
  font-size: 2.2vw;
}

.portrait .index {
  left: 33.33%; top: 11.72%;
  width: 34.45%; height: 3.94%;
}

.portrait .log { 
  left: 42%; top: 70%;
  width: 15%; height: 4%; 
}
.portrait .walks { 
  left: 40%; top: 77%;
  width: 20%; height: 4%; 
}
.portrait .stickers { 
  left: 34%; top: 84%;
  width: 33%; height: 4%; 
}

.portrait .iland { 
  left: 5%; top: 92%;
  width: 25%; height: 4%; 
}
.portrait .contact { 
  left: 70%; top: 92%;
  width: 25%; height: 4%; 
}