:root { color-scheme: light dark; }

.avatar {
  overflow: hidden;
  background: #d9d9d4;
}

.avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-color-scheme: dark) {
  body { background: #11110f; color: #f2f2ec; }
  .site-header { border-color: #33332f; }
  .site-header {
    background: rgb(17 17 15 / 68%);
  }
  .site-header::after {
    background: linear-gradient(to bottom, rgb(17 17 15 / 34%), transparent);
  }
  .brand { border-color: #f2f2ec; }
  .hero-orbit, .hero-orbit::before, .hero-orbit::after { border-color: #3d3d38; }
  .hero-footer p { color: #b5b5ad; }
  .section { border-color: #33332f; }
  .project { background: #232320; color: #f2f2ec; }
  .project:hover { background: #30302c; }
  .project-featured { background: #d8ff45; color: #151515; }
  .project-dark { background: #080807; }
  .about-section { background: #1b1b18; }
  .about-copy p, .site-footer { color: #b5b5ad; }
}