form {
margin: 0 auto;
width: 50%;
}
fieldset {
border: 2px solid black; 
margin-bottom: 20px;
}
legend {
font-weight: bold;
}
label {
display: inline-block;
width: 170px;
font-weight: bold;
}
input[type="number"],
select {
width: 215px;
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
button:hover {
opacity: 0.8;
}
#voltage-type, #power-factor {
display: none;
}
button[type="button"] {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}
button[type="reset"] {
background-color: #f44336;
color: white;
border: none;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 4px;
}
.button-container {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
#output {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
color: red;
} @media (max-width: 600px) {
body {
font-size: 14px;
}
form {
width: 90%;
margin: 0 auto;
}
input[type="number"], select {
width: 100%;
margin: 10px 0;
}
label {
font-size: 16px;
}
button[type="button"], button[type="reset"] {
margin-top: 20px;
width: 100%;
padding: 10px 20px;
}
} @media (min-width: 600px) and (max-width: 900px) {
body {
font-size: 16px;
}
form {
width: 80%;
margin: 0 auto;
}
label {
font-size: 18px;
}
} @media (min-width: 900px) {
body {
font-size: 18px;
}
form {
width: 60%;
margin: 0 auto;
}
label {
font-size: 20px;
}
}