/* Mobile CSS overrides */

@media screen and (max-width: 1300px) {

.person, .person a {font-size: 14px;}
.copyright {font-size: 12px; padding-top: 25px;}

}


@media screen and (max-width: 900px) {
    /* Reduce the logo width for smaller screens */
    .logo {
      width: 200px;
      margin: -3px auto 0;
    }

    body {background-position: center center;}
  
    /* Adjust footer height and grid spacing */
    footer {
      height: 80px; /* slightly smaller than desktop */
      grid-template-columns: repeat(1, 1fr); /* keep three columns, or adjust if needed */
      text-align: center; 
    }
  
    /* Adjust footer text sizes and spacing */
    .person {
      padding-top: 15px;
      padding-left: 0px;
      font-size: 14px;
    }

    .person a {font-size: 14px;}
    
    .copyright {
      padding-top: 5px;
      font-size: 11px;
    }
    
    /* Adjust text overlay positioning and font sizing */
    .text-overlay .top {
      top: 25vw;      /* slightly lower than on desktop */
      font-size: 7vw; /* adjust font size for mobile readability */
    }
    
    .text-overlay .btm {
      top: 35vw;  /* adjust spacing from the bottom */
      font-size: 7vw; /* adjust font size for mobile readability */
    }
  }