html, body {
  font-family: monospace;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  background: #ddd;
  color: #000;
}

h1, h2, h3, h4, h5, h6, ul, ol, li, p {
  margin: 0;
  padding: 0;
}

.content {
  background: #fff;
  max-width: 800px;
  margin: clamp(16px, 4vw, 32px) auto;
  padding: clamp(16px, 4vw, 32px);
  box-sizing: border-box;
}

h1 { margin: 0 0 1rem; font-size: clamp(1.6rem, 2.5vw, 2.2rem); }
h2 { margin: 1.5rem 0 0.75rem; font-size: clamp(1.3rem, 2vw, 1.7rem); }
p  { margin: 0 0 1rem; }

ul {
  list-style: none;         /* change to 'disc' if you want bullets */
  margin: 0.25rem 0 0 0;
  padding: 0;
}

a { color: blue; text-decoration: none; word-break: break-word; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

@media (max-width: 480px) {
  html { font-size: 16px; }
  .content { padding: clamp(14px, 5vw, 20px); }
  h2 { margin-top: 1.2rem; }
}

@media (min-width: 1200px) {
  .content { max-width: 900px; }
}