*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  width: 100vw;
  height: 100dvh;
  margin: 0;
  display: grid;
  place-items: center;
  background-color: #ffffff;
  overflow: hidden;
}

.navigation {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.navigation img {
  display: block;
  width: 1200px;
  height: 1600px;
}

.hotspot {
  position: absolute;
  display: block;
}

.hotspot:focus-visible {
  outline: 3px solid #f7f4ef;
  outline-offset: 4px;
}

.navigation a {
  left: 37%;
  width: 26%;
  height: 2.5%;
  border-radius: 8px;
}

.navigation a.link-1 {
  top: 51%;
}

.navigation a.link-2 {
  top: 54.4%;
}

.navigation a.link-3 {
  top: 57.8%;
}