/* Media query adjustments for mobile devices */
@media (max-width: 768px) {
  html, body {
    background-position: center;
  }
  .fade-in,
  .content {
    font-size: 15px;
    margin: 0 2px;
  }

  .section {
    padding: 5rem;
  }
    
  /* Adjust intro paragraph for a more fluid layout */
  .intro-paragraph {
    width: 90%;
    height: auto;
    padding: 1rem;
  }
  .logo {
    font-size: 2rem;
    margin: 1.5rem auto;
  }
  table {
    font-size: 11px;
  }

  th, td {
      padding: 6px;
  }
  .popup {
    width: 95vw;
    height: auto;
    max-height: 90vh;
    padding: 15px;
    font-size: 14px;
  }

}

    
@media (max-width: 600px) {

  .content {
    font-size: 14px;
    padding: 1rem;
  }
  
  /* Further shrink the logo text on very small screens */
  .logo {
    font-size: 1.5rem;
    margin: 1rem auto;
  }
}