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

select,
input[type="text"],
input[type="number"],
button,
section {
    width: 100%; /* Makes elements full width */
    padding: 10px; /* Adds padding inside elements */
    margin-bottom: 10px; /* Adds margin below elements */
    border: 1px solid #ccc; /* Adds a border around elements */
    border-radius: 5px; /* Rounds corners of elements */
    box-sizing: border-box; /* Ensures padding is included in width */
}

section {
    background-color: #eee; /* Light grey background */
    font-weight: bold; /* Makes text bold */
}

.offset {
    background-color: white; /* White background */
    border-left: 4px solid #ddd; /* Adds a left border for visual hierarchy */
}

.map-container {
    height: 300px; /* Sets a fixed height for the map container */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
    position: relative; /* Ensure it doesn't interfere with modal z-index */
}

button {
    background-color: #007bff; /* Sets the button color to blue */
    color: white; /* Text color within the button is white */
    border: none; /* Removes the default border */
    cursor: pointer; /* Changes cursor to pointer on hover */
}

button:hover {
    background-color: #0056b3; /* Darkens button color on hover */
}

/* Adjusts styles when the screen width is 900px or less */
@media (max-width: 900px) {
    body {
        padding: 10px; /* Reduces padding on smaller screens */
    }
    
    .coordinates {
        display: block; /* Stacks input elements vertically */
    }
}

.coordinates {
    display: flex; /* Use flexbox for positioning */
    align-items: center; /* Center items vertically */
    justify-content: space-between; /* Space out items */
}

.coordinates input[type="number"] {
    flex-grow: 1; /* Allows inputs to grow to fill space */
    margin-right: 5px; /* Adds space between input and emoji/icon */
}

.coordinates .emoji-icon {
    margin-left: 5px; /* Adds space before emoji/icon */
}

.offset1 { border-left-color: red; }
.offset2 { border-left-color: blue; }
/* Add more as needed */

.files {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* space between images */
}

.image-container {
    width: 150px; /* size of the image thumbnails */
    height: 150px;
    overflow: hidden;
    position: relative;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ensure the images cover the space without distorting */
    transition: transform 0.3s ease;
    cursor: pointer;
}

.image-container img:hover {
    transform: scale(1.1); /* subtle zoom on hover */
}

#modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Ensure modal is above all other elements */
}

#modal img {
    max-width: 80%;
    max-height: 80%;
}