/* Screen size specific overrides for mobile devices */

/* iPhone SE and similar small screens */
@media screen and (max-width: 375px) and (max-height: 667px) {
  h1, h2, h3, h4, h5, h6 {
    color: rgb(100, 200, 255) !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9) !important;
    background: rgba(0,0,0,0.7) !important;
    padding: 8px 12px !important;
    border-radius: 5px !important;
    border-bottom: 2px solid rgb(100, 200, 255) !important;
  }
}

/* iPhone 12/13/14 standard */
@media screen and (max-width: 390px) and (max-height: 844px) {
  h1, h2, h3, h4, h5, h6 {
    color: rgb(100, 200, 255) !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9) !important;
    background: rgba(0,0,0,0.7) !important;
    padding: 8px 12px !important;
    border-radius: 5px !important;
    border-bottom: 2px solid rgb(100, 200, 255) !important;
  }
}

/* iPhone Pro Max and similar large phones */
@media screen and (max-width: 428px) and (max-height: 926px) {
  h1, h2, h3, h4, h5, h6 {
    color: rgb(100, 200, 255) !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9) !important;
    background: rgba(0,0,0,0.7) !important;
    padding: 8px 12px !important;
    border-radius: 5px !important;
    border-bottom: 2px solid rgb(100, 200, 255) !important;
  }
}

/* Android phones and general mobile */
@media screen and (max-width: 480px) {
  h1, h2, h3, h4, h5, h6 {
    color: rgb(100, 200, 255) !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9) !important;
    background: rgba(0,0,0,0.7) !important;
    padding: 8px 12px !important;
    border-radius: 5px !important;
    border-bottom: 2px solid rgb(100, 200, 255) !important;
  }
}

/* Portrait orientation catch-all */
@media screen and (orientation: portrait) and (max-width: 768px) {
  h1, h2, h3, h4, h5, h6 {
    color: rgb(100, 200, 255) !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9) !important;
    background: rgba(0,0,0,0.7) !important;
    padding: 8px 12px !important;
    border-radius: 5px !important;
    border-bottom: 2px solid rgb(100, 200, 255) !important;
  }
}

/* Touch device detection */
@media (pointer: coarse) {
  h1, h2, h3, h4, h5, h6 {
    color: rgb(100, 200, 255) !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.9) !important;
    background: rgba(0,0,0,0.7) !important;
    padding: 8px 12px !important;
    border-radius: 5px !important;
    border-bottom: 2px solid rgb(100, 200, 255) !important;
  }
}