/* Reset the body's background to a dark purple theme and use a subtle gradient */
body {
    background: linear-gradient(135deg, #0e0724, #1d1c3d, #2e2a48);
}

.card .text-color {
    color: #e0d1f9 !important; /* Increased specificity and !important for override */
}

/* Apply the glassmorphism effect */
.card {
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent white */
    backdrop-filter: blur(10px); /* Blur effect for the background */
    border-radius: 20px; /* Rounded corners for the card */
    border: 1px solid rgba(255, 255, 255, 0.18); /* Light border for the frosted glass effect */
}

/* Update media query for smaller devices */
@media (max-width: 600px) {
    .card {
        margin: 20px;
        padding: 10px;
        border: none !important;
        background: rgba(255, 255, 255, 0.1); /* Ensure glass effect persists */
        backdrop-filter: blur(10px);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.18);
    }
}

.full-window {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.container {
    max-width: 500px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

#upload {
    position: relative;
    overflow: hidden;
    width: 200px;
    border-radius: 10px; /* Rounded corners for buttons */
    background: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
    color: #ffffff; /* White text */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Light border */
}

#upload:hover {
    background: rgba(255, 255, 255, 0.25); /* Slightly more visible on hover */
}

#upload input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    height: 100%;
    cursor: pointer; /* Change cursor to indicate clickable area */
}