/* Base mobile-first container */
.container {
  width: 100%;
  max-width: 420px; /* typical large-phone width */
  margin: 0 auto;
  padding: 0 16px;
}

/* When device width > 768px (tablet or desktop),
   allow the container to expand 10–20% */
@media (min-width: 768px) {
  .container {
    max-width: 480px;  /* roughly +15% expansion */
    border: 1px solid var(--theme);
    box-shadow: 0px 0px 30px var(--theme);
    padding: 8px 20px;
  }
  nav {
    padding: 0 60px;
  }
}

/* Optionally larger screens */
@media (min-width: 1200px) {
  .container {
        border: 1px solid var(--theme);
    box-shadow: 0px 0px 30px var(--theme);
    padding: 8px 20px;
    max-width: 520px;  /* ~20% expansion */
  }
}