html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
}

#container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
} */

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
  }
  
  #app {
    z-index: 1;
    padding: 1rem;
    border-radius: 8px;
  }
  
  /* Surrounding elements using absolute positioning */
#image-row{
    position: absolute;
    padding: 0.5rem 1rem;
    border-radius: 6px;
  }
  
  #image-row    { top: 10%; left: 50%; transform: translateX(-50%); }
  

#image-row {
    margin-bottom: auto;
    /* 把 image-row 推到 container 上半部中央 */
    margin-top: 48px;
    /* 頂端留一點空間，可依需求調整 */
}

#app {
    margin-top: 48px;
    /* app 和 image-row 之間的距離，可依需求調整 */
}

#image-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    gap: 16px;
}

#image-row a {
    display: flex;
    align-items: center;
    height: 80px;
    /* 與 img 的 max-height 對齊 */
}

#image-row img {
    display: block;
    max-height: 80px;
    object-fit: contain;
}

@media (max-width: 600px) {
    #image-row {
      flex-direction: column;
      gap: 20px;
      align-items: center;
    }
    #image-row a {
      width: 90vw;
      max-width: 350px;
      justify-content: center;
    }
    #image-row img {
      width: 100%;
      height: auto;
      max-height: 80px;
      object-fit: contain;
      display: block;
    }
  }





.firefox-download {
    content: url('../images/download-firefox-light.png');
  }
  
  @media (prefers-color-scheme: dark) {
    .firefox-download {
      content: url('../images/download-firefox-dark.png');
    }
  }

  .chrome-download {
    content: url('../images/download-chrome-light.png');
  }
  
  @media (prefers-color-scheme: dark) {
    .chrome-download {
      content: url('../images/download-chrome-dark.png');
    }
  }

  .appstore-download {
    content: url('../images/download-appstore-light.png');
  }
  
  @media (prefers-color-scheme: dark) {
    .appstore-download {
      content: url('../images/download-appstore-dark.png');
    }
  }

  .edge-download {
    content: url('../images/download-edge-light.png');
  }
  
  @media (prefers-color-scheme: dark) {
    .edge-download {
      content: url('../images/download-edge-dark.png');
    }
  }















#panda:hover {
    opacity: 1;
  }
  
  #panda.fade {
    opacity: 0;
    cursor: default !important;
  }
  
  #wordsSeen,
  #welcome {
    /* font-family: "Noto Sans", Fallback, sans-serif; */
    font-size: 2em;
    position: absolute;
    /* bottom: 0px; */
    top: 0px;
    /* z-index: -99; */
    opacity: 1;
    /* padding-bottom: 1em; */
    padding-top: 1em;
    transition: opacity .2s ease-in-out;
  }
  
  #wordsSeenNumber,
  #welcome {
    vertical-align: middle;
    font-size: 4em !important;
  }
  
  #easter {
    position: absolute;
    z-index: 100;
  }
  
  #wordsSeen.invisible {
    opacity: 0;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 0.87;
    }
  }
  
  .char {
    margin: 0 0.1em;
    font-size: 20rem;
  }
  
  /* 移動設備適配 */
  @media screen and (max-width: 768px) {
    .char {
      font-size: 10rem;
    }
    
    .pinyin {
      font-size: 1.5rem;
    }
    
    .english {
      font-size: 1rem;
    }
    
    .zhuyin {
      font-size: 2rem !important;
    }
  }
  
  /* 更小的屏幕 */
  @media screen and (max-width: 480px) {
    .char {
      font-size: 6rem;
    }
    
    .pinyin {
      font-size: 1.2rem;
    }
    
    .english {
      font-size: 0.9rem;
    }
    
    .zhuyin {
      font-size: 1.5rem !important;
    }
  }

.PingFang-font {
    font-family: "PingFang SC" !important;
  }

a {
    color: inherit;
    text-decoration: inherit;
  }
  
  .charClickable, a {
    cursor: pointer;
    transition: transform .2s ease-in-out;
  }
  
  
  
  .charClickable:hover, a:hover {
    transition: transform 0.225s ease-in;
    transform: scale(1.01);
  }
  
  /* .zhuyin, */
  .pinyin {
    /* font-family: "Noto Sans", Fallback, sans-serif !important; */
    font-size: 2.5rem;
    margin: 0.1em;
    font-weight: bold;
    /* padding-top: 0.5em; */
  }
  
  .english {
    font-family: "Noto Sans", Fallback, sans-serif;
    font-size: 1.5rem;
    /* font-weight: bold; */
    /* margin: 0.1em 3em !important; */
    margin: 0.1em !important;
  }
  
  .zhuyin {
    /* apply selected font to make it fun */
    /* font-family: "Noto Sans", Fallback, sans-serif; */
    font-size: 4rem !important;
    font-weight: bold;
    /* margin: 0.1em 3em !important; */
    margin: 0.1em !important;
    /* padding-top: 0.5em; */
    /* padding-top: 0.1em; */
  }
  
  .hide {
    display: none;
  }

/* Pleco Tone Colors */
.tone1 {
    /* background-image: rgb(227,0,0); */
    background: linear-gradient(180deg,
        rgba(227, 0, 0, 0.67) 0%,
        rgba(227, 0, 0, 1) 100%);
  }
  
  .tone2 {
    background: linear-gradient(180deg,
        rgba(2, 179, 28, 0.67) 0%,
        rgba(2, 179, 28, 1) 100%);
  }
  
  .tone3 {
    background: linear-gradient(180deg,
        rgba(36, 32, 255, 0.67) 0%,
        rgb(36, 32, 255) 100%);
  }
  
  .tone4 {
    background: linear-gradient(180deg,
        rgba(160, 16, 218, 0.67) 0%,
        rgb(160, 16, 218) 100%);
  }
  
  .tone5 {
    background: linear-gradient(180deg,
        rgba(0, 0, 0, 0.67) 0%,
        rgba(0, 0, 0, 1) 100%);
  }
  
  .tone1,
  .tone2,
  .tone3,
  .tone4,
  .tone5 {
    /* padding-top: 0.3em; */
    background-clip: text;
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
  }
  
  
  /* DARK MODE, these settings should be applied at the end */
  /* .darkMode .tone5 { */
  @media (prefers-color-scheme: dark) {
     .tone5 {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.5) 0%,
            rgb(255, 255, 255) 100%);
        /* padding-top: 1em; */
        background-clip: text;
        background-size: 100%;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent;
        -moz-text-fill-color: transparent;
      }
  }