html, body {
    
 
      margin: 0;
      padding: 0;
}

img {max-width: 100%;}

body {
      display: grid;
      font-family: "Segoe UI", sans-serif;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: minmax(auto, auto);
      color: #3e3e3e;
      text-shadow: 0.4px 0.4px 0.4px rgba(0,0,0,.2);
    background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);


}

h1 {
      font-weight: lighter;
      grid-column: span 3;
      text-align: center;
      color: #ec407a;
 font-size: 25px;
}

#wrapper {
      display: grid;
      grid-column: 3 / 11;
      grid-template-columns: repeat(3, 1fr);
      grid-auto-rows: minmax(auto, auto);
      grid-row-gap: 10px;
      margin-top: 3.6rem;
}

#clock-box, #info {
      grid-column: span 3;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
}

#clock-box #clock {
      grid-column: 4 / 10;
      background-color: #F8C8C8;
      padding: .6rem 2rem;
      padding-top: .8rem;
      text-align: center;
      font-size: 2.4rem;
      border-radius: 10rem;
}

date, time {
      display: block;
}

date {
      font-size: 40px;
}

time {
      font-family: "Arial", sans-serif;
      line-height: 3.2rem;
      letter-spacing: 2px;
}

.avt {
      width: 160px;
      height: 160px;
      border-radius: 50%;
      box-shadow: 2px 2px 8px rgba(0,0,0,.2);
}

#info {
      margin-top: 2.6rem;
}

#heart {
      grid-column: span 2;
      display: grid;
      grid-template-rows: 2;
      font-size: 120px;
      color: #b90d46;
      align-self: center;
      padding-bottom: 2.6rem;
      text-align: center;
}

anni {
      font-size: 16px;
      letter-spacing: 0.2px;
}

#info .one {
      grid-column: 3 / 6;
      text-align: center;
}

#info .two {
      grid-column: 8 / 11;
      text-align: center;
}

footer {
      grid-column: span 3;
      text-align: center;
      font-size: 1.6rem;
      font-weight: lighter;
      margin-top: 1.2rem;
}

#music {
      grid-column: 2;
      position: relative;
      z-index: 1000;
      opacity: .4;
}

#mask {
      background-image: linear-gradient(to top, #6d44cc5d 0%, #f09cd880 100%);
      opacity: .42;
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
}

@media (max-width: 992px) {
      #wrapper {
            grid-column: span 12;
      }

      #clock-box #clock {
            grid-column: 2 / 12;
      }

      .avt {
            width: 120px;
            height: 120px;
      }

      #info .one, #info .two{
            grid-column: span 12;;
      }

      #heart {
            grid-column: span 12;
            padding-bottom: 1rem;
      }

      footer {
            font-size: 1.2rem;
            margin: 0;
            padding-bottom: 2rem;
      }
}
/* Cấu hình chung cho hạt rơi */
.falling-particle {
    position: fixed;
    top: -20px; /* Xuất phát từ phía trên màn hình */
    pointer-events: none; /* Không làm ảnh hưởng khi click chuột */
    z-index: 9999; /* Luôn nổi lên trên cùng */
    animation: fall linear forwards;
}

/* Hiệu ứng chuyển động rơi và lắc lư */
@keyframes fall {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        /* Rơi xuống hết màn hình và tự xoay nhẹ */
        transform: translateY(105vh) translateX(var(--drift)) rotate(var(--rotation));
        opacity: 0.3; /* Mờ dần khi chạm đáy */
    }
}