html, body {
      /* Thay đổi màu nền tại đây */
      background-color: #f6f6f6;
      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: #383838;
      text-shadow: 0.4px 0.4px 0.4px rgba(0,0,0,.2);
}

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

#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-image: linear-gradient(to right, #ffc3a0 0%, #ffafbd 100%);
      padding: .6rem 2rem;
      padding-top: .8rem;
      text-align: center;
      font-size: 2.4rem;
      border-radius: 10rem;
}

date, time {
      display: block;
}

date {
      font-size: 18px;
}

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: 44px;
      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;
}

#music audio {
      width: 100%;
}

#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;
      }

      #music audio {
            width: revert;
      }
}