/* About page mobile fixes only */
@media only screen and (max-width: 900px) {
  /* Safety: prevent horizontal overflow on this page */
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  #main-content {
    width: 100%;
  }

  #main-content > * {
    max-width: 100%;
  }

  /* Neutralize any inline floats/aligns for the avatar */
  #main-content img.end,
  #main-content img[align="right"],
  #main-content img[align="left"],
  #main-content img[style*="float:right"],
  #main-content img[style*="float: right"],
  #main-content img[style*="float:left"],
  #main-content img[style*="float: left"] {
    float: none !important;
    clear: both !important;
    display: block !important;
    position: static !important;
    margin: 1rem auto !important;
    width: min(100%, 280px) !important;
    height: auto !important;
    max-width: 100% !important;
  }

  /* Keep tiny heading emoji/gif inline */
  #main-content h1 img,
  #main-content h2 img,
  #main-content h3 img,
  #main-content h4 img {
    display: inline-block !important;
    vertical-align: text-bottom;
    margin: 0 0 0 0.25rem !important;
    box-shadow: none !important;
    background: none !important;
    border-radius: 0 !important;
  }

  /* Ensure the tech table can scroll horizontally on narrow screens */
  #main-content table {
    display: block;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  /* Icons inside the table should behave like simple inline images */
  #main-content table img {
    box-shadow: none;
    background: none;
    border-radius: 0;
    margin: 0 auto;
  }

  /* Optional: transform the tech table into a responsive grid instead of a wide row */
  @media (max-width: 600px) {
    #main-content table {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.75rem;
      overflow: visible;
      white-space: normal;
      box-shadow: none;
      background: transparent;
    }

    #main-content table thead,
    #main-content table tbody,
    #main-content table tfoot,
    #main-content table tr {
      display: contents !important;
    }

    #main-content table th,
    #main-content table td {
      display: flex !important;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: auto !important;
      padding: 0.5rem !important;
      background: transparent !important;
    }

    #main-content table br { display: none; }
  }
}