body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #ffe6e6; /* خلفية وردية فاتحة */
    padding: 20px;
    color: #880000; /* لون نص داكن */
}

.container {
    background-color: #ffffff; /* خلفية بيضاء للحاوية */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* ظل خفيف */
    display: inline-block;
}

h1 {
    color: #cc0000; /* لون العنوان */
}

img {
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
    border: 2px solid #cc0000; /* إطار للصورة */
}

.input-container {
    margin: 20px 0;
}

input {
    padding: 10px;
    margin: 10px;
    width: calc(50% - 40px);
    border: 1px solid #cc0000; /* إطار داكن */
    border-radius: 5px;
    background-color: #ffe6e6; /* خلفية الإدخال فاتحة */
    color: #880000; /* لون النص داخل الإدخال */
}

button {
    padding: 10px 20px;
    background-color: #cc0000; /* لون زر */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #a30000; /* لون أغمق عند التمرير */
}

.progress-container {
    width: 100%;
    background-color: #ffcccc; /* لون خلفية لشريط التقدم */
    border-radius: 5px;
    overflow: hidden;
    margin-top: 20px;
    display: none; /* يتم إخفاء شريط التقدم بشكل افتراضي */
}

.progress-bar {
    height: 20px;
    background-color: #cc0000; /* لون لشريط التقدم */
    width: 0%;
    border-radius: 5px;
}

#progress-percentage {
    margin-top: 10px;
    font-size: 18px;
    color: #cc0000; /* لون النص للنسبة المئوية */
}

#result {
    margin-top: 20px;
    font-size: 20px;
    color: #cc0000; /* لون النص */
}