/* Reset some common browser defaults */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures padding and border are included in element width/height */
}

html, body {
    height: 100%; /* Ensures the body takes up the full height of the viewport */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6; /* Improves readability */
    background-color: #ffffff; /* Set a default background color */
    color: #333; /* Set a default text color */
}

img, svg {
    max-width: 100%; /* Ensures images and SVGs are responsive */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Removes inline spacing below images */
}

button, input, textarea, select {
    font-family: inherit; /* Ensures form elements use the same font as the rest of the document */
    font-size: inherit; /* Matches the font size of the parent */
    border: none; /* Removes default borders */
    outline: none; /* Removes focus outlines (add custom focus styles if needed) */
}

ul, ol {
    list-style: none; /* Removes default list styles */
}

a {
    text-decoration: none; /* Removes default underline from links */
    color: inherit; /* Makes links inherit the text color */
}

table {
    border-collapse: collapse; /* Ensures tables don't have extra spacing between cells */
    width: 100%; /* Makes tables responsive */
}

/* Your existing styles */
#map-container {
    position: relative; /* Ensures child elements with absolute positioning are relative to this container */
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#us-map {
    max-width: 100%;
    overflow: hidden;
}

header {
    text-align: center;
    margin-bottom: 20px;
}

header h1 {
    font-size: 2rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

h2 {
    font-size: 1.5rem;
    font-weight: normal;
    color: #666;
    margin: 5px 0 0;
    text-align: center;
}


.info-window {
    position: absolute; /* Position it relative to #map-container */
    width: 300px;
    top: 20px; /* Distance from the top of #map-container */
    right: 20px; /* Distance from the right of #map-container */
    background-color: #fff; /* White background for readability */
    color: #333; /* Default text color */
    padding: 15px; /* Add some padding for spacing */
    border: 1px solid #ccc; /* Subtle border for separation */
    border-radius: 8px; /* Rounded corners for a modern look */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    z-index: 1000; /* Ensure it sits above other elements */
    max-width: 300px; /* Limit the width for readability */
    font-size: 0.9rem; /* Slightly smaller font size */
    line-height: 1.4; /* Improve readability */
    display: none;
}

#zoom-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#zoom-controls button {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    font-size: 1.2rem;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#zoom-controls button:hover {
    background-color: #f0f0f0;
}

#data-container {
    width: 100%; /* Ensure the container takes up the full width */
    max-width: 1024px; /* Match the max-width of #map-container */
    margin: 0 auto; /* Center the container */
    padding: 20px; /* Add padding for spacing */
    border: 1px solid #ccc; /* Add a border for consistency */
    border-radius: 8px; /* Match the rounded corners of #map-container */
    background-color: #f9f9f9; /* Match the background color of #map-container */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for depth */
}

#data-table {
    width: 100%; /* Make the table take up the full width of its container */
    border-collapse: collapse; /* Remove spacing between table cells */
    margin: 0; /* Remove extra margin */
    font-size: 1rem; /* Set a readable font size */
    text-align: left; /* Align text to the left */
    background-color: #f9f9f9; /* Light background for the table */
    border: 1px solid #ccc; /* Add a border around the table */
    border-radius: 8px; /* Add rounded corners */
    overflow: hidden; /* Ensure rounded corners work properly */
}

#data-table th, #data-table td {
    padding: 12px 15px; /* Add padding inside cells */
    border: 1px solid #ddd; /* Add a subtle border between cells */
}

#data-table th {
    background-color: #f4f4f4; /* Light gray background for header */
    font-weight: bold; /* Make header text bold */
    color: #333; /* Darker text color for header */
    text-transform: uppercase; /* Capitalize header text */
}

#data-table tr:nth-child(even) {
    background-color: #f2f2f2; /* Add a subtle zebra-striping effect */
}

#data-table tr:hover {
    background-color: #e9e9e9; /* Highlight row on hover */
    cursor: pointer; /* Change cursor to pointer on hover */
}

.footer-container {
    width: 100%; /* Ensure the container takes up the full width */
    max-width: 1024px; /* Match the max-width of #data-container */
    margin: 20px auto; /* Center the footer and add spacing above */
    padding: 20px; /* Add padding for spacing */
    text-align: center; /* Center-align the text */
    font-size: 0.9rem; /* Slightly smaller font size for footer text */
    line-height: 1.6; /* Improve readability */
}