/* responsive.css */

@media screen and (max-width: 768px) {
  /* Tiles stacked vertically */
  .tiles-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* Input and output tiles full width */
  .tile {
    width: 100%;
    padding: 15px;
  }

  /* Buttons full width */
  button {
    width: 100%;
    font-size: 1rem;
    padding: 12px 0;
  }

  /* Input fields full width */
  select,
  input[type="file"] {
    width: 100%;
    font-size: 1rem;
    margin-bottom: 15px;
  }

  /* Tips section font size */
  .tips-section {
    font-size: 0.9rem;
  }

  /* Header text adjustment */
  header h1 {
    font-size: 1.8rem;
  }

  header p {
    font-size: 1rem;
  }
}