body {
      font-family: Arial, sans-serif;
      background: rgb(55, 46, 49);
      height: 100vh;
      margin: 0;
      overflow: hidden;
      position: relative;
  }

  .box {
      background: transparent;
      padding: 0rem;
      border-radius: 0px;
      box-shadow: none;
      position: absolute;
      z-index: 10;
  }

  .wind-speed-box {
      top: 2rem;
      right: 2rem;
  }

  .timestamp-box {
      bottom: 2rem;
      left: 2rem;
      padding: .25rem 0 .25rem 1.75rem;
      background: url('update.svg') no-repeat left center;
      background-size: 1.5rem 1.5rem;
  }


  .about-box {
      bottom: 2rem;
      right: 2rem;
  }

  .about-box a {
      color: rgb(185, 163, 135);

  }

  .anna-box {

      top: 2rem;
      left: 2rem;
  }

  .anna {
      font-size: 2rem;
      color: rgb(185, 163, 135);
      margin: 0;
  }


  .about {
      color: rgb(185, 163, 135);
      margin: 0;
  }

  .wind-speed {
      font-size: 2rem;
      color: rgb(185, 163, 135);
      margin: 0;
  }

  .timestamp {
      color: rgb(185, 164, 136);
      margin: 0;
  }

  .circle-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      z-index: 1;
  }

  .circle {
      border-radius: 50%;
      overflow: hidden;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }

  /* Circle sizing based on viewport aspect ratio */
  @media (max-aspect-ratio: 1/1) {

      /* Portrait or square viewport: width is constraining dimension */
      .circle {
          width: 110vw;
          height: 110vw;
      }
  }

  @media (min-aspect-ratio: 1/1) {

      /* Landscape viewport: height is constraining dimension */
      .circle {
          width: 110vh;
          height: 110vh;
      }
  }

  .circle video {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  /* Mobile adjustments using smaller viewport units */
  @media (max-width: 768px) {
      body {
          /* Use dynamic viewport height that accounts for mobile browser UI */
          height: 100dvh;
          height: 100svh;
          /* Fallback for older browsers */
      }

      .circle-container {
          /* Use smaller viewport height on mobile */
          height: 100dvh;
          height: 100svh;
          /* Fallback */
      }

      /* Reduce margins significantly on mobile */
      .wind-speed-box {
          top: 0.5rem;
          right: 0.5rem;
      }

      .timestamp-box {
          bottom: 0.5rem;
          left: 0.5rem;
      }

      .about-box {
          bottom: 0.5rem;
          right: 0.5rem;
      }

      .anna-box {
          top: 0.5rem;
          left: 0.5rem;
      }

      /* Make elements smaller on mobile */
      .anna {
          width: 80px;
          font-size: 1.5rem;
      }

      .wind-speed {
          font-size: 1.5rem;
      }

      .about {
          font-size: 0.8rem;
      }

      .timestamp {
          font-size: 0.8rem;
      }
  }