body {
font-family: 'Roboto', sans-serif;
font-size: 18px;
}
.container {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.form-container {
flex: 1;
margin-right: 20px;
}
.image-container {
flex: 1;
text-align: center;
}
.image-container img {
max-width: 100%;
height: auto;
}
.form-group {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.label-box {
width: 150px;
text-align: left;
margin-right: 10px;
font-size: 18px;
}
.calc-input {
flex: 1;
font-size: 18px;
}
.result-box {
background-color: #f0f8ff;
padding: 10px;
border-radius: 5px;
font-size: 18px;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
align-items: center;
}
.image-container {
order: -1;
margin-bottom: 20px;
}
.label-box {
text-align: left;
margin-right: 0;
margin-bottom: 5px;
}
.form-group {
flex-direction: column;
align-items: flex-start;
}


}
        .tooltip-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            border: 1px solid #ccc;
            padding: 10px;
            z-index: 1;
        }
        .tooltip-content.show {
            display: block;
        }
        .info-icon {
            cursor: pointer;
            color: #007bff;
            margin-left: 5px;
        }
        .result-box {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .centered-equation {
            text-align: center;
            font-size: 1.3em;
            margin: 10px 0;
        }

        input[type="submit"].calc-input {
            background-color: #1d5632; /* Dark green from the image */
            color: white;
            border: none;
            border-radius: 5px;
            padding: 7px 14px; /* Reduced by 30% from 10px 20px */
            font-size: 16px;
            font-weight: bold; /* Changed to bold (700) for bolder text */
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            transition: background-color 0.3s ease;
            width: auto; /* Override any width constraints */
            display: inline-block;
        }
        input[type="submit"].calc-input:hover {
            background-color: #154527; /* Slightly darker green for hover effect */
        }