/* ============================================================
   base.css — shared across every page on the site
   (index.html, projects.html, and all individual project pages)
   ============================================================ */
 
:root {
  --ink: #000000;
  --paper: #ffffff;
  --accent: #1506f9;
  --grey: #888888;
}
 
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--ink);
  background-color: var(--paper);
  margin: 0;
  padding: 20px 20px 70px;
}
 
p { max-width: 400px; }
 
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-style: dotted; }
 
ul { margin: 0; padding: 0; list-style-type: none; }
 
img {
  width: 400px;
  max-width: 100%;
  height: auto;
  /* white 6px border, with a 1px blue border just outside it —
     outline sits right on the edge of the border without adding to
     the box's layout size, so this reads as two nested borders */
  border: 6px solid var(--paper);
  outline: 1px solid var(--accent);
  box-sizing: border-box;
}
 
/* ---- footer: fixed to the bottom of the screen ---- */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5; /* stays above any floating image/player */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background-color: var(--paper);
  border-top: 1px solid #eeeeee;
  font-size: 12px;
}
 
.footer-time {
  color: var(--grey);
}