*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}
body {
    background-image: linear-gradient(to right, #ff6e7f, #bfe9ff);

}
.form {
    background-image: radial-gradient( circle farthest-corner at 22.4% 21.7%, rgba(4,189,228,1) 0%, rgba(2,83,185,1) 100.2% );
    width: 30%;
    height: 40vh;
    justify-content: space-around;
}
form {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;
    width: 70%;
    position: relative;
    left: 20%;
}
.container {
    margin-left: 30%;
    margin-top: 10%;
}
.result {
    font-weight: bolder;
    font-size: x-large;
    color: white;
}

/* media queries */
@media screen and (max-width: 900px){
   

    .form {
        margin-left: 20%;
    }
    .container{
        margin-left: 10%;
    }
}