:root {
  color-scheme: light;
  --bg: #f7f4ee;
  --text: #1e1e1e;
  --muted: #4a4a4a;
  --muted-2: #767676;
  --link: #1b45c7;
  --link-hover: #1238a5;
  --accent-blue: #2a52be;
  --accent-green: #2f8f4a;
  --accent-red: #a01822;
}

body {
  background: var(--bg);
  color: var(--text);
}

a {
  color: var(--link);
}

a:hover {
  color: var(--link-hover);
}

#quarto-header.headroom--unpinned,
#quarto-header.headroom--pinned {
  transform: translateY(0) !important;
}

#background,
#experience {
  scroll-margin-top: 5.5rem;
}

.navbar .nav-link {
  font-weight: 500;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  opacity: 1;
}

@media (max-width: 768px) {
  main.content .columns {
    flex-direction: column;
    gap: 0.75rem;
  }

  main.content .columns > .column {
    width: 100% !important;
  }

  main.content .columns img {
    display: block;
    margin: 0 auto;
    max-width: min(85vw, 420px);
    height: auto;
  }
}