body {
  font-family: monospace;
  background-color: #2a2a2a;
  margin: 0;
}

div {
  width: 100vw;
  height: 56.25vw;
  max-height: 100vh;
  max-width: 177.78vh;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("1.jpg") no-repeat 0 0/contain;
  background-size: contain;
}

a {
  position: absolute;
}

a:hover {
  filter: drop-shadow(0px 12px 7px rgba(255, 255, 255, 0.5));
  color: white;
  z-index: 2;
}

a:hover:before {
  content: attr(name);
}

#chinatsu {
  background: url("chinatsu.png") no-repeat 0 0/contain;
  top: 8.24074%;
  left: 0;
  width: 29.01041%;
  height: 32%;
}

#yui {
  background: url("yui.png") no-repeat 0 0/contain;
  top: 7.3148%;
  left: 28.75%;
  width: 17.8083%;
  height: 31.481%;
}

#akari {
  background: url("akari.png") no-repeat 0 0/contain;
  top: 3.888888%;
  right: 1.40625%;
  width: 24.27083%;
  height: 39.2%;
}

#kyouko {
  background: url("kyouko.png") no-repeat 0 0/contain;
  top: 5.0925%;
  right: 26.4062%;
  width: 21.875%;
  height: 37%;
}

a:last-child:after {
  content: '';
  background-color: transparent;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: background-color 500ms;
  z-index: 0;
}

a:hover ~ a:last-child:after {
  background-color: rgba(42, 42, 42, 0.5);
}