
body {
	margin: 0;
	width: 100%;
	height: 100vh;
	font-family: "Exo", sans-serif;
	color: #fff;
	background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
#inputForm input[type="number"]{
    position: relative;
    margin-top:1px;
    width:32px;
    height: 26px;
    border-radius: 4px;
    border-style: solid;
    border-color: rgba(8, 10, 12, 0.7);
    border-width:1.5px;
    text-align: center; 
    
}

.submit{
    transition:all .18s ease-in-out;
  
    
    color:black;
    margin-top:2px;
    font-size: 120%;
    width:100%;
    height:34px;
    border-radius:4px;
    border-style: solid;
    background: radial-gradient( #bbbbbbff, #eeeeeeef);
	background-size: 200% 200%;
	
    
}
.submit:hover{
    border-radius:7px;
    cursor: pointer;
    color: #2fa2ff;
    
}
#inputForm{
    text-align: center;
    width:250px;
    position: absolute;
    right: 50%;
    top: 45%;
    transform: translate(50%,50%);
}


#inputArea{
    width: 100%;
    height: 50%;
    position: absolute;
    right: 50%;
    top: 25%;
    transform: translate(50%,-50%);
}
h2{
    text-align: center;
    position: absolute;
    width:100%;
    right: 50%;
    top: 50%;
    transform: translate(50%,-50%);
}
h3{
    position: absolute;
    right: 50%;
    top: 80%;
    transform: translate(50%,-50%);
}
#solutionsArea{
    position: absolute;
    width:100%;
    right: 50%;
    top: 80%;
    transform: translate(50%,40px);
    padding: 0;
    margin:0;
    text-align: center;
}
#solutions{
    position: absolute;
    width:100%;
    right: 50%;
    top: 42%;
    transform: translate(50%,40px);
    padding: 0;
    margin:0;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

@media only screen and (max-width: 600px) {
    #inputForm{
        text-align: center;
        width:75%;
        position: absolute;
        right: 50%;
        top: 45%;
        transform: translate(50%,50%);
    }
    #solutions{
        position: absolute;
        width:100%;
        right: 50%;
        top: 47%;
        transform: translate(50%,40px);
        padding: 0;
        margin:0;
    }
}