#menu {
  width: 158px;
  height: 100%;
  position: relative; /* riferimento per i pulsanti */
  background: #000;
  background-image: url("Caesar-3_menu.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Pulsanti 4:3 */
.button {
  position: absolute;
  width: 43px;
  aspect-ratio: 4 / 3;
  cursor: pointer;
}

/* Immagini dentro i pulsanti */
.button img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.button:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  background: #cfc3a8;
  color: white;
  padding: 10px 20px;
  font-size: 10px;
  white-space: nowrap;
}

#btn1 { top: 328px; left: 4px; } /*casa*/
#btn2 { top: 326px; left: 58px; } /*pala*/
#btn3 { top: 326px; left: 112px; } /*strada*/

#btn4 { top: 366px; left: 4px; } /*acqua*/
#btn5 { top: 366px; left: 58px; } /*salute*/
#btn6 { top: 366px; left: 112px; } /*dei*/

#btn7 { top: 406px; left: 4px; } /*scuola*/
#btn8 { top: 406px; left: 58px; } /*arte*/
#btn9 { top: 406px; left: 112px; } /*politica*/

#btn10 { top: 446px; left: 4px; } /*ingegneria*/
#btn11 { top: 446px; left: 58px; } /*sicurezza*/
#btn12 { top: 446px; left: 112px; } /*industria*/

/* ultimi 3 bottoni più sottili*/
#btn13 { top: 486px; left: 4px; height: 26px} /*elimina*/
#btn14 { top: 486px; left: 58px; height: 26px} /*messaggi*/
#btn15 { top: 486px; left: 112px; height: 26px} /*problemi*/