body {
    background: url('green.jpg') no-repeat center center fixed;
    background-size: cover;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
}

#health-form {
    
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.metric-card {
    transition: transform 0.3s;
    border: none;
    border-radius: 15px;
    overflow: hidden;
	color: #aaaaaa;
}

.metric-card:hover {
    transform: translateY(-5px);
}

.metric-card .fa-4x {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

#body-type-image {
    max-height: 300px;
    object-fit: contain;
    border-radius: 15px;
    height: 90%;
}

[dir="rtl"] {
    text-align: right;
}

/* Color gradients for values */
.bmi-low {
    color: #2ecc71; /* Green */
}

.bmi-normal {
    color: #3498db; /* Blue */
}

.bmi-high {
    color: #e74c3c; /* Red */
}

.bmi-very-high {
    color: #c0392b; /* Dark Red */
}

/* Background gradients for cards based on value quality */
.card-good {
    background: linear-gradient(135deg, #2ecc71, #27ae60) !important;
    color: white;
}

.card-average {
    background: linear-gradient(135deg, #f39c12, #e67e22) !important;
    color: white;
}

.card-poor {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
    color: white;
}

.funny-comment {
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    border-radius: 15px;
    padding: 20px;
    margin-top: 20px;
    display: none;
}

.comment-icon {
    font-size: 2rem;
    margin-right: 10px;
}