/* Styling for the drag and drop area */
#drag_drop_area {
    border: 2px dashed rgba(0, 115, 170, 0.8); /* Semi-transparent blue border */
    padding: 20px;
    text-align: center;
    font-size: 18px;
    font-weight: bold; /* Make text stand out */
    border-radius: 8px; /* Rounded corners */
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black background for contrast */
    color: #ffffff; /* White text for visibility */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); /* Soft shadow for contrast */
    transition: background-color 0.3s ease, border 0.3s ease; /* Smooth transitions */
    width: 100%; /* Full width */
    max-width: 500px; /* Max width */
    margin: 20px auto; /* Center horizontally */
}

/* Styling for the drag-over effect */
#drag_drop_area.drag-over {
    background-color: rgba(30, 41, 59, 0.8); /* Slightly brighter overlay on drag-over */
    border-color: #1d4ed8; /* Brighter blue border when dragging over */
}

/* Style for the select button */
#select_image_button {
    padding: 12px 20px;
    background-color: #1d4ed8; /* Bright blue background */
    color: white; /* White text */
    border: none;
    border-radius: 5px; /* Rounded corners */
    font-size: 16px;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth effects */
}

#select_image_button:hover {
    background-color: #2563eb; /* Slightly lighter blue on hover */
    transform: scale(1.05); /* Slight zoom effect */
}

/* Styling for the short URL and copy button */
#response_message {
    margin-top: 20px;
    font-size: 16px;
    color: #e2e8f0; /* Light gray for contrast */
}

/* Copy URL button style */
#copy_url_button {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #1d4ed8; /* Bright blue */
    color: white;
    border: none;
    border-radius: 5px; /* Rounded button */
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth effects */
}

#copy_url_button:hover {
    background-color: #2563eb; /* Slightly lighter blue on hover */
    transform: scale(1.05); /* Zoom effect */
}

/* Styling for links */
#drag_drop_area a {
    color: #3b82f6; /* Light blue link */
    text-decoration: none;
    font-weight: bold; /* Bold for emphasis */
}

#drag_drop_area a:hover {
    text-decoration: underline; /* Underline on hover */
    color: #60a5fa; /* Brighter blue on hover */
}

/* Styling for the text inside drag-and-drop area */
#drag_drop_area p {
    font-size: 18px; /* Slightly larger font */
    font-weight: bold; /* Bold text for emphasis */
    color: #ffffff; /* White for high contrast */
    margin: 10px 0; /* Add spacing */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Subtle shadow for better visibility */
}