body{
font-family:Arial,sans-serif;
margin:0px;
padding:0px;
min-height:90vh;
background-image:url(https://static.vecteezy.com/system/resources/previews/000/962/809/original/abstract-gradient-background-with-colorful-and-modern-style-vector.jpg);
background-size:cover;
}
#calculator{
max-width:400px;
margin:100px auto;
padding:20px;
border-radius:10px;
background:linear-gradient(to bottom,pink,#f2f2f2);
box-shadow:0 4px 6px rgba(0,0,0,0.1);
transition:all 0.3s ease-in-out;
}
#calculator:hover{
transform:translateY(-5px);
}
h2{
text-align:center;
margin-bottom:20px;
color:#333;
}
label{
display:block;
color:#333;
margin-bottom:5px;
}
input[type="number"],select{
width:100%;
padding:10px;
margin-boottom:10px;
box-sizing:border-box;
border:1px  solid #ccc;
border-radius:5px;
}
input[type="number"]:focus,select:focus{
outline:none;
border-color:#007bff;
}
button{
width:30%;
padding:10px ;
background:linear-gradient(to right,hotpink,pink,hotpink);
color:black;
border:none;
border-radius:5px;
cursor:pointer;
font-weight:bold;
transition:background 0.3s ease-in-out;
}
button:hover{
background:linear-gradient(to right,palevioletred,lightpink,palevioletred);
}
#result{
margin-top:20px;
font-weight:bold;
text-align:center;
}