/* Base font: respects the user's browser setting, never tiny.
   1rem = 16px by default; slightly larger on big screens. */

html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Verdana, Arial, sans-serif;
  font-size: 1.0625rem;      /* ~17px */
  line-height: 1.6;
  color: #423321;
  background: #F4ECE2;
}

@media (min-width: 1200px) { body { font-size: 1.125rem; } }

li, table, td, p { font-size: inherit; }

a, a:link { color: #0040aa; text-decoration: none; }

a:visited { color: #0040aa; text-decoration: none; }

a:hover { 
	color: #804099;
/*	text-decoration: underline; */
	background-color : #fff7ee;
	}

a:active { color: #0099ff; text-decoration: underline; }

/* Links: easy tap targets on touch screens */
/* a { color: #0b4f9c; } */
a:hover, a:focus { text-decoration: underline; }

p, li {
	padding: 2px;
}

li { margin-bottom: 0.4em; }

/* ---- Responsive additions for demococlock.css ---- */

/* Include padding/borders in element widths */
*, *::before, *::after { box-sizing: border-box; }

/* Headings scale smoothly between a floor and a ceiling */
h1 { font-size: clamp(1.75rem, 4vw + 0.5rem, 2.75rem); line-height: 1.2; margin: 0 0 0.5em; }
h2 { font-size: clamp(1.35rem, 2vw + 0.75rem, 1.75rem); line-height: 1.25; margin: 0 0 0.4em; }
p  { margin: 0 0 1em; }

/* Banner: full width, scales down, never overflows, keeps proportions */
.banner { width: 100%; background: #f2f2f2; }
.banner img {
  display: block;
  width: 100%;
  max-width: 1920px;   /* change to your graphic's native width */
  height: auto;
  margin: 0 auto;
}

/* Centered content column with comfortable line length */
.wrap {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}
/* .intro { max-width: 45rem; } */
.intro { max-width: 45rem; margin: 0 auto; }

/* Columns: side by side when there's room, stacked when there isn't.
   Each column wants at least 16rem, so phones in portrait get one column,
   landscape phones/tablets get two, desktops get three. No media query needed. */
.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.col { min-width: 0; }

.small { font-size: 0.875rem; color: #555; }



/* Small-screen tweaks */
@media (max-width: 600px) {
  .wrap { padding: 1rem 0.875rem; }
}