/* ===========================================================
   Matthew's Home Page -- style.css
   Plain CSS, no frameworks. Colors live in :root so they're
   easy to change in one place.
   =========================================================== */

:root {
  --ink: #1a1a1a;
  --paper: #fffdf2;      /* cream page */
  --navy: #000080;
  --sky: #1084d0;
  --link: #0000ee;       /* classic browser blue */
  --visited: #551a8b;    /* classic browser purple */
  --hot: #cc0000;
  --silver: #c0c0c0;
  --night: #0b1240;      /* background behind the page */
}

/* ---------- the starry tiled background ---------- */
html {
  background-color: var(--night);
  background-image:
    radial-gradient(circle, #ffffff 1px, transparent 1.6px),
    radial-gradient(circle, #ffe66b 1px, transparent 1.6px),
    radial-gradient(circle, #9fd3ff 0.8px, transparent 1.4px);
  background-size: 52px 52px, 86px 86px, 37px 37px;
  background-position: 0 0, 26px 31px, 11px 19px;
}

body {
  margin: 0;
  padding: 28px 12px 40px;
  color: var(--ink);
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  line-height: 1.45;
}

::selection { background: var(--navy); color: #fff; }

/* ---------- the "window" the content sits in ---------- */
#page {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 30px 26px;
  background: var(--paper);
  border: 6px ridge var(--silver);
  box-shadow: 8px 8px 0 #000;
}

/* ---------- header ---------- */
header { text-align: center; }

h1 {
  margin: 6px 0 0;
  font-size: 46px;
  line-height: 1.1;
  color: var(--navy);
  text-shadow: 2px 2px 0 var(--silver);
}

/* the name links home, but keeps the heading's look */
h1 a, h1 a:visited { color: inherit; text-decoration: none; }
h1 a:hover, h1 a:focus { text-decoration: underline; }

.subtitle {
  margin: 4px 0 14px;
  font-style: italic;
  color: #444;
}

/* ---------- nav ---------- */
nav {
  margin: 16px 0 6px;
  text-align: center;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
}

hr {
  border: 0;
  border-top: 3px groove var(--silver);
  margin: 12px 0;
}

/* ---------- links: the old defaults, on purpose ---------- */
a { color: var(--link); }
a:visited { color: var(--visited); }
a:hover, a:focus { color: var(--hot); }
a:active { color: #ff0000; }

/* ---------- section headers look like old title bars ---------- */
h2 {
  margin: 30px 0 12px;
  padding: 4px 10px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, var(--navy), var(--sky));
}
h2::before { content: "\25AA\00A0"; }

section p { margin: 0 0 12px; }

/* ---------- photo of me in the about section ---------- */
#about::after { content: ""; display: block; clear: both; }   /* keep the floated photo inside the section */
img.me {
  float: right;
  width: 160px;
  height: 160px;
  margin: 2px 0 8px 20px;
  border: 1px solid #888;
}

/* ---------- projects ---------- */
ul.stars.projects li { margin: 0 0 12px; }
ul.projects .pname { display: block; font-weight: bold; color: var(--navy); }
ul.projects .pdesc { display: block; }

/* ---------- interests ---------- */
ul.stars {
  margin: 0;
  padding-left: 1.6em;
  list-style: none;
}
ul.stars li { margin: 4px 0; position: relative; }
/* bullets are tiny clusters of dots, like the starry background; three patterns rotate */
ul.stars li::before {
  content: "";
  position: absolute;
  left: -1.5em;
  top: 0.12em;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
}
ul.stars li:nth-child(3n+1)::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='6' cy='12' r='2.3' fill='%23d4a017'/><circle cx='12' cy='6' r='1.7' fill='%231084d0'/><circle cx='15' cy='14' r='1.4' fill='%23000080'/><circle cx='4' cy='5' r='1.0' fill='%23000080'/><circle cx='11' cy='17' r='0.9' fill='%231084d0'/></svg>"); }
ul.stars li:nth-child(3n+2)::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='13' cy='11' r='2.3' fill='%23d4a017'/><circle cx='6' cy='7' r='1.7' fill='%231084d0'/><circle cx='5' cy='15' r='1.4' fill='%23000080'/><circle cx='15' cy='4' r='1.0' fill='%23000080'/><circle cx='10' cy='2.5' r='0.9' fill='%231084d0'/></svg>"); }
ul.stars li:nth-child(3n+3)::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><circle cx='9' cy='6' r='2.3' fill='%23d4a017'/><circle cx='15' cy='13' r='1.7' fill='%231084d0'/><circle cx='4' cy='12' r='1.4' fill='%23000080'/><circle cx='9' cy='16' r='1.0' fill='%23000080'/><circle cx='16' cy='4' r='0.9' fill='%231084d0'/></svg>"); }

/* ---------- links table ---------- */
table.links {
  width: 60%;
  margin: 0 auto;
  border: 3px outset var(--silver);
  border-spacing: 3px;
  background: #fff;
}
table.links td {
  border: 2px inset var(--silver);
  padding: 6px 10px;
  text-align: center;
  font-weight: bold;
}

/* ---------- photo album ---------- */
.hint {
  text-align: center;
  font-style: italic;
  font-size: 15px;
  color: #555;
}

/* one photo per row, each in a white "print" frame */
.album {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.photo {
  margin: 0;
  text-align: center;
}

/* the one row with two photos side by side */
.pair {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.pair .photo {
  flex: 1 1 0;
  min-width: 0;
}

.album img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 80vh;   /* keep tall photos from filling the whole screen */
  margin: 0 auto;
  box-sizing: border-box;
}
.pair img { width: 100%; max-height: none; }
/* linked images used to get a blue (or purple) border -- keep it */
.album a img { border: 2px solid var(--link); }
.album a:visited img { border-color: var(--visited); }
.album a:hover img { border-color: var(--hot); }


/* ---------- footer ---------- */
footer {
  margin-top: 34px;
  padding-top: 10px;
  border-top: 3px groove var(--silver);
  text-align: center;
}

.small {
  margin: 4px 0;
  font-size: 14px;
  color: #444;
}

/* ---------- small screens ---------- */
@media (max-width: 560px) {
  img.me { float: none; display: block; margin: 0 auto 14px; }
  body { padding: 14px 8px 28px; font-size: 17px; }
  #page { padding: 14px 16px 22px; box-shadow: 5px 5px 0 #000; }
  h1 { font-size: 36px; }
  .album { gap: 20px; }
  .pair { gap: 10px; }
  table.links { width: 100%; }
}