body {
    margin: 0;
    display: flex;
    justify-content: center; /* افقی در مرکز */
    align-items: center; /* عمودی در مرکز */
    min-height: 100vh; /* حداقل ارتفاع صفحه به اندازه viewport */
    background-color: #f0f0f0; /* رنگ پس‌زمینه ملایم */
    overflow: hidden; /* جلوگیری از اسکرول احتمالی */
}

.image-container {
    padding: 20px; /* فاصله داخلی برای کادر */
    background-color: #ffffff; /* رنگ پس‌زمینه کادر */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* سایه زیبا برای کادر */
    border-radius: 8px; /* گوشه‌های گرد برای کادر */
    max-width: 90%; /* حداکثر عرض کانتینر تصویر */
    box-sizing: border-box; /* padding و border جزو width و height حساب شوند */
}

.image-container img {
    max-width: 100%; /* تصویر از کانتینر خود بیرون نمی‌زند */
    height: auto; /* ارتفاع خودکار برای حفظ نسبت ابعاد */
    display: block; /* حذف فضای اضافی زیر تصویر */
    border-radius: 4px; /* گوشه‌های کمی گرد برای خود تصویر */
}

/* برای نمایش بهتر در موبایل */
@media (max-width: 768px) {
    .image-container {
        padding: 15px;
        border-radius: 5px;
    }
}