html {
  height: 100%; /* mobile viewport height fix */
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 3vw, 32px);
}

body {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 100vh; /* fallback */
  min-height: 100dvh; /* modern */
  padding: clamp(16px, 2vw, 12px) clamp(16px, 2vw, 16px);
}

img.header {
  width: 100%;
  height: auto;
  display: block;
}

footer {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 520px) {
  footer {
    flex-direction: column-reverse;
  }
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}