/* MOBILE VERSION — tuned sizing */
@media (max-width: 800px) {

  /* shrink background image so mobile isn't zoomed out */
  html.bg-default {
    background-size: 600px;
    background-repeat: repeat;
  }
  
  footer {
      font-size: 12px;
      padding: 10px 0;
      margin-top: 25px;
  }
  
  .container img {
      max-width: 100%;
      height: auto;
  }



  .container {
    width: 99%;
    max-width: 99%;
    margin: 25px auto;
    padding: 10px;
    box-sizing: border-box;
  }

  /* nav bar already perfect, just keep mobile spacing */
  .top-nav {
    padding: 6px 0;
    top: 40px;
  }

  .top-nav a {
    font-size: 14px;
    letter-spacing: 1px;
  }

  .top-nav ul {
    gap: 20px;
  }

  /* MOBILE GRID — 3 across */
  .grid {
    grid-template-columns: repeat(3, 105px);
    gap: 15px;
    justify-content: center;
  }

  .album {
    width: 105px;
    height: 105px;
  }

  .thumbnail {
    width: 105px;
    height: 105px;
  }

  .overlay-text {
    width: 105px;
    height: 105px;
  }

  .overlay-text h2 {
    font-size: 10px;
  }

  .overlay-text p {
    font-size: 8px;
  }

  body {
    padding-top: 70px;
  }
  

/* smaller nav text */
  .top-nav a {
    font-size: 12px !important;
    letter-spacing: 1px !important;
  }

  /* reduce spacing between nav items */
  .top-nav ul {
    gap: 10px !important;
  }

  /* shrink the little GIF icons */
  .top-nav .nav-gif {
    width: 12px !important;
    height: 12px !important;
  }

  /* tighten nav bar padding */
  .top-nav {
    padding: 6px 0 !important;
  }
}