/* Default light mode styles */
body {
  background: #ffffff;
  color: #1a1a1a;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  body {
    background: #1a1a1a;
    color: #ffffff;
  }
}

h1, h2, h3, p, ol, ul { max-width: 280pt; }

ul { list-style-type: none; }

a { color: inherit; }
a:link { text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: #4444cc;
} 
a:visited { text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: #7777aa;
} 
a:hover { text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: #772255;
} 
a:active { text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: #cc7799;
} 

/* Navigation grid */
div.gps { display: grid; gap: 3px;
  grid-template-columns: repeat(3, 36px);
  grid-template-rows: repeat(3, 36px); }
div.gpsft { display: grid; gap: 6px;
  grid-template-columns: repeat(3, 144px);
  grid-template-rows: repeat(3, 144px); }

/* stretch images to fit cell size */
div.gps div a img, div.gpsft  div a img,
div.gps div img, div.gpsft div img {
  width: 100%; height: 100%; object-fit: cover; }