body{
    padding:0;
    margin:0;
}
.container{
    min-height:100vh;
    min-width:100vw;
    display:flex;
    align-items:center;
    justify-content:center;
    background: url(./img/img1.png) no-repeat center center;
    background-size:cover;
}
.box{
    width:100%;
    max-width:500px;
    box-sizing:border-box;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(225, 225, 228, 0.2);
    border:2px solid rgb(248, 245, 245);
    border-radius:40%;
    padding:50px 70px;
    box-shadow:8px 8px 10px rgb(32, 32, 32);
}

    .box h1{
        max-width:80rem;
        background-color:rgb(77, 8, 71);
        border-radius:10px;
        padding:5px 20px;
        color:rgb(240, 204, 230);
        margin-bottom:20px;  
        text-align: center;
    }
    #text{
        margin-bottom:15px;
        font-size:22px;
        font-weight:bold;
        text-align:center;
    }
    section{
        display:flex;
        justify-items:center;
        align-items: center;
    }
    input{
        width:4rem;
        height:3rem;
        font-size:20px;
        margin-right:20px;
        margin-top:10px;
        box-sizing: border-box;
        border-radius: 5px;
        border:1px solid rgb(77, 8, 71); 
    }
    
    label{
        font-size:20px;
        margin-bottom:10px;
        margin-left:3rem;
        box-sizing: border-box;
    }
    .btns{
        display:flex;
        justify-content: center;
        gap:40px;
    }
  
   .calc,.clr{
    margin-top:40px;
    margin-right:20px;
    margin-bottom:20px;
    padding:20px 20px;
    font-size:18px;
    font-weight:bold;
    border-radius:15px;
    border:none;
    background-color:rgb(77, 8, 71);
    color:rgb(240, 204, 230);
    box-sizing: border-box;
    
   }
   .clr:hover,.calc:hover{
    background-color:rgb(240, 204, 230);
    color:rgb(77, 8, 71);
    border:4px solid rgb(77, 8, 71);
   }
   @keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#result h2 {
  animation: fadeIn 2s ease forwards;
  opacity: 0; 
  font-weight:bolder;
  color:black;
  text-align:center;
  text-shadow: 0 0 5px white;
}