body {
    background-image: url('../asset/pic/alexander/background.png'); 
    background-repeat: no-repeat;
    background-color: rgb(0, 136, 109);
  }
  #desktop{
    position: absolute;
    background-repeat: no-repeat;
  }
  #desktop img{
    left: -10px;
    top: -10px;
    position: absolute;
    z-index: 2;
  }
  #restaurant .customer img {
    position: absolute;
    z-index: 0;
    width: 1024px;
    height: 1024px;
    top:50px;
    left: -100px;
    height: 884px!important;
    width: 883px!important;
    top: 204px!important;
    left: 40px!important;
  }
  #restaurant .dish img {
    position: absolute;
    top: 750px;
    width: 150px;
    height: 150px;
    z-index: 3;
  }

  #restaurant .empire img {
    position: absolute;
    width: 800px;
    height: 800px;
    z-index: 4;
  }

  #alex img{ /* louis 16 */
    top: 235px;
    left: 1050px;
    display: none;
  }
  #alex1 img{ /* 断头台 */
    top: 235px;
    left: 1050px;
    display: none;
  }
  #alex2 img{ /* 死 */
    top: 235px;
    left: 1050px;
    display: none;
  }
  #dialogueBox {
    position: absolute;
    width: 512px;
    height: 512px;
    top: 50px;
    left: 600px;
  }
  #dialogueBox img{
    position: absolute;
    
    width: 800px;
    height: 800px;
    top: -100px;
    left: -100px;
    display: none;
  }
  #dialogueText {
    position: absolute;
    top: 170px;
    left: 100px;
    width: 400px;
    height: 150px;
    font-size: 25px;
    text-align: center; /* 水平居中 */
    
  }
  #hint {
    position: absolute;
    
    width: 50px;
    height: 50px;
    top: 350px;
    left: 1100px;
    
  }
#hint img{
    position: absolute;
    width: 50px;
    height: 50px;
    z-index: 5;
    display: none;
  }
  #hintpage img{
    position: absolute;
    z-index: 5;
    display: none;
  }
  #customer1 img{ /* 中年男 */
    display: none;
  }
  #customer1-2 img{ /* unhappy中年男 */
    display: none;
  }
  #customer1-3 img{ /* angry中年男 */
    display: none;
  }
  #customer2 img{ /* 小女孩 */
    top:150px !important;
    display: none;
  }
  #customer2-2 img{ /* unhappy小女孩 */
    top:150px !important;
    display: none;
  }
  #customer2-3 img{ /* angry小女孩 */
    top:150px !important;
    display: none;
  }
  #customer3 img{ /* 老奶奶 */
    top:100px !important;
    display: none;
  }
  #customer3-2 img{ /* unhappy老奶奶 */
    top:100px !important;
    display: none;
  }
  #customer3-3 img{ /* unhappy老奶奶 */
    top:100px !important;
    display: none;
  }
  #lamb img{
    left: -1px;
    top: 643px!important;
    width: 268px!important;
    height: 268px!important;
    display: none;
  }
  #yoghurt img{ /* 芝士 */
    left: 248px;
    top: 679px!important;
    width: 228px!important;
    height: 228px!important;
    display: none;
  }
  #moussaka img{ 
    left: 461px;
    top: 673px!important;
    width: 258px!important;
    height: 258px!important;
    display: none;
  }
  #salad img{
    left: 749px;
    top: 675px!important;
    width: 258px!important;
    height: 258px!important;
    display: none;
  }
  #cheese img{
    left: 1021px;
    top: 678px!important;
    width: 232px!important;
    height: 232px!important;

    display: none;
  }

/* 定义抖动动画 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.shake-animation {
    animation: shake 0.8s; /* 动画持续时间 */
    animation-timing-function: ease-in-out;
}