        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
        }
        .calculator {
            max-width: 600px;
            margin: auto;
            padding: 20px;
            background: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        label {
            display: block;
            margin: 10px 0 5px;
            color: #333;
        }
        input, select {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        button {
            width: 100%;
            padding: 10px;
            background-color: #333;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #555;
        }
        .result, .info, .tips {
            text-align: center;
            margin-top: 20px;
            color: #333;
        }
        .tips {
            font-size: 0.9em;
            color: #555;
        }
        .dod {
            margin: 10px 0;
        }
        .dod .percentage {
            font-weight: bold;
            color: #333;
        }
        .dod .percentage.green {
            color: green;
        }
        .dod .percentage.yellow {
            color: yellowgreen;
        }
        .dod .percentage.orange {
            color: orange;
        }
        .dod .percentage.red {
            color: red;
        }
/* Styles for the image */
.responsive-image {
    max-width: 50%; /* Set the image to 50% of its container */
    height: auto;
    display: block;
    margin: 0 auto; /* Center the image horizontally */
}

/* Responsive styles */
@media (max-width: 600px) {
    .responsive-image {
        width: 50%; /* Ensure it remains at 50% for small devices */
        max-width: 300px; /* Optionally set a maximum width for very small devices */
    }
}