body {
    background-image: url('../asset/pic/elizabeth/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;
  }
  #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;
  }

  #elizabeth img{ /* elizabeth */
    top: 235px;
    left: 1050px;
    display: none;
  }
  #elizabeth1 img{ /* dying */
    top: 235px;
    left: 1050px;
    display: none;
  }
  #elizabeth2 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;
  }
  #fish_chips img{ 
    left: 18px;
    top: 628px!important;
    width: 300px!important;
    height: 300px!important;
    display: none;
  }
  #english_breakfast img{ 
    left: 254px;
    top: 640px!important;
    width: 259px!important;
    height: 259px!important;
    display: none;
  }
  #pudding img{ 
    left: 510px;
    top: 680px!important;
    width: 190px!important;
    height: 190px!important;
    display: none;
  }
  #spaghetti_bolognes img{
    left: 725px;
    top: 673px!important;
    width: 224px!important;
    height: 224px!important;
    display: none;
  }
  #cream_tea img{
    left: 954px;
    top: 623px!important;
    width: 259px!important;
    height: 259px!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;
}