/* Keep the original desktop design. Add native navigation, keyboard support,
   readable narrow layouts and styles for the two requested new projects. */
html { scroll-behavior: smooth; }
.navbar a { color: inherit; text-decoration: none; }
.projects-anchor { margin-bottom: 90px; }
#about, #projects, #contact, #pipehex, #last-endure { scroll-margin-top: 92px; }
a:focus-visible { outline: 2px solid #c07a6e; outline-offset: 6px; }
.skip-link { position: fixed; left: 16px; top: 8px; z-index: 1001; transform: translateY(-160%); padding: 12px 20px; background: #fefefe; color: #302929; font: 16px Tahoma, Arial, sans-serif; }
.skip-link:focus { transform: none; }
.project-technologies, .project-play { min-width: 0; }
.project-technologies p { overflow-wrap: anywhere; }
.project-card-new .project-image { height: auto; aspect-ratio: 920 / 430; }
.project-card-new .project-image img { display: block; height: 100%; }
.project-details { margin: auto 12px 20px; color: #d5a399; font: 14px Tahoma, Arial, sans-serif; text-underline-offset: 4px; }
.project-details:hover { color: #fefefe; }
.footer .footer-up-arrow { min-width: 28px; }
.footer .footer-icons { min-width: 192px; }
@media (max-width: 1024px) {
  .project-technologies .project-heading { overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  .project-card:hover { transform: none; }
  .project-details { margin-top: 8px; }
}
@media (max-width: 319px) {
  .navbar { padding: 20px 8px 8px; }
  .navbar .navbar-menu { width: 100%; }
  .navbar .navbar-menu ul { padding: 0; }
  .navbar .navbar-menu ul li { font-size: 13px; letter-spacing: 0; margin: 0 4px; }
  .App { width: 100%; }
  .about { flex-direction: column; padding: 20px; gap: 20px; }
  .about .about-image { max-width: 65%; }
  .about .about-title, .about .about-title p, .about .about-title .resume-link { width: 100%; }
  .project-card { max-width: 100%; }
  .project-card .project-info { flex-direction: column; align-items: center; }
  .project-card .project-image { height: auto; }
  .contact .contact-title .contact-link { width: 100%; padding: 15px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .project-card:hover, .about .about-image img:hover { transform: none; }
}