*{
    margin:0;
    padding:0;
    font-family:'Times New Roman', Times, serif;
    box-sizing: border-box;

  }
  body, html {
    height: 100%;
  }
  .container{
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
    min-height: 100vh;
    color:white;
    padding:10px;
    text-align:center;
    
    background-color: black;
    /* background: rgb(172,250,250);
background: radial-gradient(circle,  rgba(114, 103, 231, 0.699) 0%,rgba(120, 200, 220, 0.689) 100%); */

    
    
  }
  .input-box1{
    margin:13px 0;
    padding:35px;
    border-radius: 10px;

    background: rgb(31,19,222);
background: linear-gradient(90deg, rgba(79, 70, 214, 0.721) 0%, rgba(103, 115, 223, 0.881) 39%, rgba(139,232,248,1) 99%);
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    height:auto;
    max-width:600px;
    width:100%;
    align-items:left;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);


  }


    .input-box1 input{
    flex: 1;
      background-color: black;
    margin-right:20px;
    padding:14px 20px;
    border:0;
    font-size:18px;
    border-radius: 5px;
    position: relative;
    width:100%;
    margin-bottom:20px;
    text-align:center;
    font-weight: bold;
    font-size: 20px;
    color: black;
    background-color: #fff;
    outline: none;
    border-color: black;
    border: 0 none;
    border-radius: 0;
    }

    input[type=number]{
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     
    }
    .input-box1 button{
    background-color: #fff;
    padding: 15px 30px;
    border-radius: 5px;
    font-weight: 500;
    font-size: large;
    text-align: center;
      outline: none;
    color: black;
    cursor: pointer;
    box-shadow: 0 9px black;
    border: none;
      border-radius: 15px;
    }
    .input-box{
      display: flexbox;
      
    }
    .ib2{
      margin-bottom:10px;
    }
   
    .input-box1 .ib2 button:hover{
      background: rgb(108,248,250);
background: linear-gradient(0deg, rgba(108,248,250,1) 0%, rgba(61,167,255,1) 100%);
    }
    
    
    .input-box1 .ib2 button:active {
      background-color: #3e8e41;
      box-shadow: 0 5px #666;
      transform: translateY(4px);
    }
   
    #result{
    font-size: 30px;
    }
    #result span{
    margin-top: 20px;
    font-size: 20px;
    font-weight: 500;
    }
    