/* Shared accent styling for the whole site */

:root {
  --accent: #4A2C5E;
  --accent-dark: #341f42;
  --accent-tint: #f2edf5;
}

h2, h3, h4 { color: var(--accent); }

a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

.w3-bottombar { border-bottom: 3px solid var(--accent) !important; }

/* Thin colored border on content sections, in place of plain white boxes */
.content-card { border-left: 4px solid var(--accent); }

/* Footer, in place of plain w3-dark-grey */
.site-footer { background-color: var(--accent) !important; color: var(--accent-tint); }
.site-footer a { color: var(--accent-tint); }

/* Grayscale thesis-figure motif behind the header */
header#portfolio { position: relative; overflow: hidden; }
header#portfolio > a,
header#portfolio > span,
header#portfolio > div.w3-container { position: relative; z-index: 1; }

.bg-motif {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: 420px;
  object-fit: contain;
  object-position: right center;
  opacity: 0.35;
  filter: grayscale(1);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 600px) {
  .bg-motif { max-width: 200px; opacity: 0.25; }
}