* { box-sizing: border-box; }

body {
  max-width: 84rem;
  margin: auto;
  padding: 1.25rem;
  background: #e3e3e3 url("images/marble.png") repeat;
  color: #111;
  font: 1rem/1.45 Arial, sans-serif;
}

a { color: #0000be; }
a:visited { color: #601080; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #000080;
  outline-offset: 3px;
}
img, video { max-width: 100%; height: auto; }
nav { line-height: 1.9; }
footer, .center { text-align: center; }

.rainbow {
  border: 0;
  height: 4px;
  margin: 1.5rem auto;
  width: 90%;
  background: linear-gradient(to right, red, magenta, blue, cyan, lime, yellow, red);
}

/* Homepage columns */
.homepage {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr) minmax(14rem, 19rem);
  grid-template-areas: "links welcome music" "links projects projects";
  gap: 0 1.25rem;
  align-items: start;
}
.gif-links {
  grid-area: links;
  display: grid;
  justify-items: start;
  gap: 1.25rem;
  padding-top: 1rem;
}
.gif-links img, #resume img, .interior a img { vertical-align: middle; }
.welcome { grid-area: welcome; text-align: center; }
.welcome h1 { margin-top: 0; }
.music { grid-area: music; width: 100%; height: 17rem; border: 0; }
.projects { grid-area: projects; min-width: 0; }
.intro { font-size: 1.3rem; }

.paper {
  background: white;
  border: 4px ridge #d5d5d5;
  padding: clamp(.85rem, 2.5vw, 2rem);
  font: 1.125rem/1.45 "Times New Roman", serif;
}
.project {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}
.project + .project { border-top: 1px solid #777; margin-top: 1.5rem; padding-top: 1.5rem; }
.project h2 { font-size: clamp(1.45rem, 3vw, 2.1rem); line-height: 1.13; margin: 0 0 .5rem; }
.project p { margin: 0 0 .65rem; }
.placeholder { display: grid; place-items: center; min-height: 7rem; aspect-ratio: 16/9; background: #ddd; text-align: center; }

.interior, .case-study { max-width: 54rem; margin: 0 auto; }
.dog-banner { width: 36rem; }
.favorites > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 1rem; margin: .65rem 0; font-weight: bold; }
.favorites dt { text-transform: uppercase; color: #0000b6; }
.favorites dd { margin: 0; color: #a70000; }
.case-study figure { margin: 1.5rem auto; text-align: center; }
.case-study video { max-height: 36rem; }
.guest-form { background: silver; border: 4px outset #ddd; padding: 1rem; max-width: 32rem; }
.guest-form label { display: block; margin-bottom: .75rem; }
.guest-form input, .guest-form textarea { display: block; width: 100%; }

@media (max-width: 760px) {
  .homepage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "welcome" "links" "music" "projects"; gap: 1rem; }
  .gif-links { display: flex; flex-wrap: wrap; align-items: center; padding-top: 0; }
  .music { max-width: 21rem; justify-self: center; }
}
@media (max-width: 480px) {
  body { padding: .75rem; }
  .project { grid-template-columns: minmax(0, 1fr); }
}