<!-- Google Font: Inter -->
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

<style>
  #countdown-container {
    background-color: #004D56;
    color: #F3F2DF;
    font-family: 'Inter', sans-serif;
    text-align: center;
    padding: 40px 20px;
    border-radius: 10px;
    max-width: 700px;
    margin: 40px auto;
    box-sizing: border-box;
  }

  #countdown {
    font-size: 2rem;
    line-height: 1.4;
  }

  /* För iPads och mindre surfplattor */
  @media (max-width: 1024px) {
    #countdown-container {
      padding: 30px 15px;
    }

    #countdown {
      font-size: 1.6rem;
    }
  }

  /* För mobiler */
  @media (max-width: 600px) {
    #countdown-container {
      padding: 25px 10px;
    }

    #countdown {
      font-size: 1.2rem;
    }
  }
</style>

<!-- Nedräknaren -->
<div id="countdown-container">
  <h2 id="countdown">Laddar nedräkning...</h2>
</div>

<script>
  // Slutdatum: 1 juni 2025, 00:00
  const endDate = new Date('2025-06-01T00:00:00').getTime();

  function updateCountdown() {
    const now = new Date().getTime();
    const distance = endDate - now;
    const container = document.getElementById("countdown");

    if (distance <= 0) {
      container.innerHTML = "Nu kör vi!";
      return;
    }

    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);

    container.innerHTML = `
      ${days} dagar ${hours} timmar ${minutes} minuter ${seconds} sekunder
    `;
  }

  updateCountdown();
  setInterval(updateCountdown, 1000);
</script>