body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background: #f5f5f5;
}

.container {
  max-width: 1200px;
  margin: auto;
  background: white;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

header h1, section h2 {
  color: #333;
}

header p, section ol {
  color: #666;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

thead {
  background-color: #f2f2f2;
}

input[type="file"] {
  margin-top: 20px;
}

#map, canvas#altitudeChart {
  width: 100%; /* Full width to be responsive */
  height: 400px; /* Height as per the original graph container */
  margin-top: 20px;
  background-color: #f5f5f5; /* Light gray background */
}

canvas {
  display: block; /* Ensures canvas takes the full width */
  max-width: 600px; /* Limits the chart width to 600px for better readability */
  margin: auto; /* Centers the chart in its section */
  height: auto !important; /* Adjusts height automatically based on aspect ratio */
}

/* Additional styling for responsiveness and aesthetics */
@media (max-width: 768px) {
  .container {
      padding: 10px;
  }

  header h1, section h2 {
      font-size: 1.5em;
  }
}
.exif-data-container {
  max-height: 400px; /* Adjust based on your preference */
  overflow-y: auto; /* Enables vertical scrolling */
  overflow-x: hidden; /* Hides horizontal scrollbar */
  border: 1px solid #ddd; /* Optional: adds a border around the scrollable area */
}

/* Ensures the table fully occupies the scrollable container */
.exif-data-container table {
  width: 100%;
  border-collapse: collapse; /* Optional: for styling */
}

.exif-data-container th, .exif-data-container td {
  border: 1px solid black; /* Optional: for styling */
  padding: 8px; /* Optional: for styling */
  text-align: left; /* Optional: for styling */
}