:root {
  --bg: #FFFFFF;
  --text: #000080;
  --link: #0000CC;
  --alink: #0000FF;
  --vlink: #000080;
  --nav-width: 180px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 7px;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

a:link    { color: var(--link); }
a:visited { color: var(--vlink); }
a:active  { color: var(--alink); }

img { display: block; border: 0; }

/* Header: logo right-aligned */
.site-header {
  display: flex;
  justify-content: flex-end;
}

/* Two columns: nav | content */
.layout {
  display: flex;
  gap: var(--gutter);
  margin-top: 6px;
}

/* Nav buttons: each link stacks its normal and hover images; hover fades the hover image in */
.site-nav {
  flex: 0 0 var(--nav-width);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7.5px;
}

.site-nav a {
  display: grid;
}

.site-nav img {
  grid-area: 1 / 1;
}

.site-nav .hover { opacity: 0; }

.site-nav a:hover .hover,
.site-nav a:focus-visible .hover { opacity: 1; }

/* Content */
main {
  flex: 1;
  min-width: 0;
  font-size: 0.875rem;
}

main h1 {
  margin: 0;
  font-size: 1rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1.6;
}

main h2 {
  margin: 0;
  font-size: inherit;
  font-weight: 700;
}

main p { margin: 0.875rem 0; }

main article p:first-of-type { margin-top: 0; }

main article { margin: 0.875rem 0; }

/* Screenshot thumbnails */
.screenshots h2 { margin-top: 0.875rem; font-weight: 400; }

.screenshots ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}