style.css

.container{
    border:1px solid black;
    margin:200px auto;
    padding:10px;
    display: flex;
    flex-direction: column;
    justify-content:center;
    width:350px;
    background-color: rgb(205, 209, 214);
}
.head
{
    /* border:1px solid black */
    height:40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:10px;
    padding: 5px;
    background-color:rgb(158, 160, 163)
}
.box
{
    margin:10px;
}
.row
{
    display: flex;
    margin-bottom:20px;
}
label{
    width:150px;
    font-size: 18px;
    margin-right:15px;
    
}
input[type="number"]
{
    width:200px;
    height:20px;
   
}
input[type="range"]
{
    width:180px;
    height:20px;
}
span{
    
    padding:3px;
    height:15px;
    
}
.result
{
    display:none;
}
.btn
{
    width:100px;
    height:40px;
    border-radius:10px;
    font-size: 18px;
}
@media screen and (max-width:400px)
{
    .container
    {
        width:320px;
    }
}