Jak řešit deformaci stránky po resize prohlížeče? Css

Mám web:

Kde mám:

body{
    background: lightcoral;
    background: url('../img/bg.png');
}

.inputForm{
    margin: auto;
    width: 500px;
    background: khaki;
    border:3px solid black;
    padding: 10px;
}

.footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: khaki; 
    text-align: center;
    height: 5px;
    font-size: 12px;    
    border-top: 1px solid #000;
    margin: auto;
    vertical-align: middle;
}

Když resiznu prohlížeč stane se tohle:

Jak to fixnout? Třeba aby vždy mezi footerem a formulářem zůstalo vždy místo? Třeba minimálně 100px?

Díky za rady.