.logo {
    position: fixed; /* 固定定位 */
    top: 20px;       /* 距离顶部距离 */
    right: 10px;      /* 距离右侧距离 */
    z-index: 1000;    /* 确保Logo在最上层 */
  }
  .footer {
    
    background-color: #FFFF;
    flex-shrink: 0; /* 确保footer不会被压缩 */
    padding: 0.1rem 0;
    color: #e32929;
    font-size: 0.08rem;
    
    line-height: 0.12rem;
    text-align: center;
  }
  :root {
    --clr-neutral-100: hsl(0, 0%, 100%); 
    --clr-primary-100: hsl(205, 15%, 58%);
    --clr-primary-400: hsl(215, 25%, 27%);
    --clr-primary-800: hsl(217, 33%, 17%);
    --clr-primary-900: hsl(218, 33%, 9%);
  }
  html {
    color-scheme:dark ;
  }
.body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 1.125rem;
    background-color: var(--clr-primary-800);
  }
  .tag-list {
    margin: 0;
    padding-inline: 0;
    list-style: none;
  }
  .tag-list li{
    padding: lrem;
    background: var(--clr-primary-400);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem -0.25 var(-clr-primary-900)
  }
  .scroller{
    max-width: 600px;
  }
  .scroller_inner{
    display: flex;
    gap: 1rem;
    padding-block: 1rem;
    flex-wrap: wrap;
  } 
  .scroller[data-animated="true"]{
    overflow: hidden;
    mask: linear-gradient(90deg, transparent,white,20%);
  }
  .scroller[data-animated="true"] .scroller_inner{
    flex-wrap: nowrap;
    animation: scroll 40s normal linear infinite;
  }
  @keyframes scroll {
    to{
      transform: translateX(-100%);
    }
  }