.snowflakes {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 9999;
      overflow: hidden;
    }

    .snowflake {
      position: absolute;
      top: -10%;
      color: white;
      font-size: 1.5em;
      opacity: 0.8;
      animation: fall linear infinite;
    }

    @keyframes fall {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(100vh);
      }
    }
    .snowflake:nth-child(1) {
      left: 10%;
      animation-duration: 3s;
      animation-delay: 0s;
    }
    .snowflake:nth-child(2) {
      left: 20%;
      animation-duration: 5s;
      animation-delay: 0.5s;
    }
    .snowflake:nth-child(3) {
      left: 30%;
      animation-duration: 4s;
      animation-delay: 1s;
    }
    .snowflake:nth-child(4) {
      left: 40%;
      animation-duration: 6s;
      animation-delay: 1.5s;
    }
    .snowflake:nth-child(5) {
      left: 50%;
      animation-duration: 3.5s;
      animation-delay: 2s;
    }
    .snowflake:nth-child(6) {
      left: 60%;
      animation-duration: 4.5s;
      animation-delay: 2.5s;
    }
    .snowflake:nth-child(7) {
      left: 70%;
      animation-duration: 5s;
      animation-delay: 3s;
    }
    .snowflake:nth-child(8) {
      left: 80%;
      animation-duration: 6s;
      animation-delay: 3.5s;
    }
    .snowflake:nth-child(9) {
      left: 90%;
      animation-duration: 4s;
      animation-delay: 4s;
    }
    .snowflake:nth-child(10) {
      left: 95%;
      animation-duration: 5.5s;
      animation-delay: 4.5s;
    }
    .fps-display { background-color: rgba(255, 255, 255, 0.8); border-radius: 20px; padding: 5px 10px; display: flex; align-items: center; font-size: 15px; }
    .fps-display div { border-radius: 50%; width: 10px; height: 10px; }
    .fps-display .green { background-color: green; }
    .avatar-border { display: inline-block; border: 5px solid transparent; border-radius: 50%; position: relative; animation: border-animation 1.5s linear infinite; overflow: hidden; } 
    .header__photo-img { border-radius: 50%; } 
    @keyframes border-animation { 0% { border-color: blue; box-shadow: 0 0 0 0 blue; } 100% { box-shadow: 0 0 0 20px transparent; } }
    body {
        margin: 0;
        user-select: none; 
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #282c34;
        cursor: url('https://tienmai291207.github.io/mouse.png'), auto; 
        overflow: auto;
    }

    .circle {
        position: absolute;
        width: 10px; /* Kích thước hình tròn */
        height: 10px; /* Kích thước hình tròn */
        background-color: orange; /* Màu cam */
        border-radius: 50%; /* Tạo hình tròn */
        animation: circle-animation 0.5s ease forwards;
    }

    @keyframes circle-animation {
        0% {
        transform: scale(1);
        opacity: 1;
        }
        100% {
        transform: scale(3);
        opacity: 0;
        }
    }
     .fps-display {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 10px;
        font-weight: bold;
        color: black;
        background-color: rgba(132, 99, 255, 0.5);
        border-radius: 20px;
        padding: 5px 10px;
        display: flex;
        align-items: center;
      }
      .fps-indicator {
        border-radius: 50%;
              width: 10px;
        height: 10px;
        background-color: green;
        margin-right: 5px;
      }
    @media screen and (min-aspect-ratio: 16/9) and (min-width: 1024px) {
        .fps-display {
          top: auto !important;
          bottom: 10px !important;
        }
      }
    a {
     cursor: url('https://tienmai291207.github.io/mouse.png'), auto;
    }