#dropArea {
    border: 2px dashed #007bff;
    padding: 20px; /* Adjust the padding to increase the size equally */
    text-align: center;
    cursor: pointer;
    transition: border 0.3s, background-color 0.3s;
    height: 250px; /* Customize the height if needed */
    max-width: 1000px; /* Set a maximum width for better responsiveness */
    background-color: #62C0FA;
    border-radius: 10px;
    margin: 0 auto; /* Center the drop area */
}

#dropArea:hover {
    background-color: #FFE5F8; /* light pink */
}

#fileName {
    margin-top: 10px;
}

#wordFile {
    display: none;
}

.btn-primary {
    background-color: #039BF9;
    border: none;
}

.btn-primary:hover {
    background-color: darkblue;
}

#successContainer {
    margin-top: 10px;
    display: none;
    text-align: center;
}

#emojiContainer {
    font-size: 2em;
    display: block;
}

#successMessage {
    display: block;
    margin-top: 5px;
    color: black;
    font-weight: bold;
}

#convertingContainer {
    display: none;
    font-size: 1.5em;
    margin-top: 20px;
    animation: blink-animation 1s infinite; /* Apply blink animation */
}

@keyframes blink-animation {
    0%, 50%, 100% {
        opacity: 0; /* Make the container invisible */
    }
    25%, 75% {
        opacity: 1; /* Make the container visible */
    }
}

#progressBar {
    transition: width 5s ease-in-out;
    width: 0%;
    background: linear-gradient(45deg, #50C878, #2E8B57, #32CD32);
    background-size: 200% 200%;
    animation: sparkle 5s infinite linear;
}

@keyframes sparkle {
    0%, 100% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
}

.progress {
    max-width: 1000px; /* Same as the dropArea max-width */
    margin: 0 auto; /* Center the progress bar */
    height: 30px;
}