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;
}


}