/* A sober page in the style of the late 90s web. */

html {
  background: #2a1350 url("images/bg-tile.svg") repeat;
}

body {
  margin: 0;
  padding: 16px;
  font-family: "Times New Roman", Times, serif;
  font-size: 17px;
  line-height: 1.45;
  color: #000;
}

#page {
  max-width: 940px;
  margin: 0 auto;
  background: #fffff4;
  border: 3px ridge #c9a8ff;
  outline: 2px solid #1a0b33;
  box-shadow: 6px 6px 0 rgba(10, 0, 30, 0.6);
  padding: 0 20px 8px;
}

a { color: #0000ee; }
a:visited { color: #551a8b; }
a:active { color: #ee0000; }

h1, h2, h3 {
  font-weight: bold;
  margin: 0.6em 0 0.3em;
}

h2 {
  font-size: 1.25em;
  color: #5a1f8f;
  border-bottom: 2px solid #e0662f;
  padding-bottom: 2px;
}

hr {
  height: 3px;
  border: 0;
  background: linear-gradient(90deg, #2fa39a, #e3b23c, #e0662f, #9b7fe0);
  margin: 1.6em 0;
  opacity: 0.8;
}

.small { font-size: 0.82em; color: #444; }

/* Masthead */

#masthead {
  text-align: center;
  padding: 14px 0 10px;
  border-bottom: 3px double #5a1f8f;
}

#masthead h1 {
  margin: 0;
  font-size: 2.4em;
  letter-spacing: 0.04em;
  color: #5a1f8f;
  text-shadow: 2px 2px 0 #e3b23c, 4px 4px 0 #2fa39a;
}

#masthead h1 a { color: inherit; text-decoration: none; }

.tagline {
  margin: 4px 0 0;
  font-style: italic;
}

/* Two-column layout */

#layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

#sidebar {
  flex: 0 0 210px;
  font-size: 0.93em;
  background: #f3ecff;
  border: 2px inset #c9a8ff;
  padding: 4px 14px 10px;
  margin-top: 14px;
}

#sidebar h3 {
  font-size: 1em;
  margin-top: 1.2em;
  color: #b84a1c;
}

#sidebar hr { margin: 1.2em 0; }

#sidebar ul {
  margin: 0;
  padding-left: 1.2em;
}

.portrait {
  display: block;
  border: 2px inset #c9a8ff;
  background: #e8e8e8;
}

#wall {
  flex: 1;
  min-width: 0;
  margin-top: 8px;
}

/* Projects */

.project h3 {
  font-size: 1.15em;
  margin-bottom: 0;
}

.project .meta {
  margin: 2px 0 8px;
  font-size: 0.85em;
  color: #1f7a72;
  font-family: "Courier New", Courier, monospace;
}

.project .shot img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 3px ridge #c9a8ff;
}

.project .shot a { display: inline-block; }

.project .where {
  font-size: 0.85em;
  font-family: "Courier New", Courier, monospace;
}

/* Project sub-pages */

.article {
  max-width: 680px;
  margin: 0 auto;
}

.article img {
  max-width: 100%;
  height: auto;
  border: 2px inset #c0c0c0;
}

/* Footer */

#footer {
  text-align: center;
}

/* Small screens: stack the sidebar on top */

@media (max-width: 680px) {
  body { padding: 0; }
  #page { border: 0; padding: 0 12px 8px; }
  #layout { flex-direction: column; gap: 0; }
  #sidebar {
    flex: none;
    width: auto;
  }
}