style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
height: 100vh;
/* background: linear-gradient(to right, #BD3F32, #CB356B); W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(235deg, #FFFFFF 0%, #000F25 100%), linear-gradient(180deg, #6100FF 0%, #000000 100%), linear-gradient(235deg, #FFA3AC 0%, #FFA3AC 40%, #00043C calc(40% + 1px), #00043C 60%, #005D6C calc(60% + 1px), #005D6C 70%, #00C9B1 calc(70% + 1px), #00C9B1 100%), linear-gradient(125deg, #FFA3AC 0%, #FFA3AC 40%, #00043C calc(40% + 1px), #00043C 60%, #005D6C calc(60% + 1px), #005D6C 70%, #00C9B1 calc(70% + 1px), #00C9B1 100%);
background-blend-mode: soft-light, screen, darken, normal;

}
.main{
    /* border: 1px solid black; */
    /* background-color: #3498db; */
    margin: auto;
    text-align: center;
    width: 300px;
    /* height: 370px; */
    padding: 50px 10px;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    box-shadow:         -2px 4px 12px 0px rgba(50, 50, 50, 0.87);
}
input{
    width: 61px;
    height: 40px;
    border-radius: 10px;
    font-size: 22px;

}
input:hover{
    background-color: rgb(194, 188, 188);
}
#clear{
    width: 200px;
    padding: 5px;
    font-size: 22px;
}
input{
    /* border: 5px solid gray; */
    outline: none;
    border: none;
    cursor: pointer;
}
#clear{
    width: 200px;
    padding: 5px;
    font-size: 22px;
}
#clearr{
    width: 200px;
    padding: 5px;
    font-size: 22px;
    text-align: right;
}