Buonagiorno/buonasera.

Sono qui per chiedervi una mano per un progetto di esame che sto portando. Il titolo dice già tutto. In pratica quando vado a ridimensionare la finestra, il footer della pagine si sovrappone ad una scritta, e ciò non è gradevole da vedere. Qui di seguito vi lascio i codici html e css e relativa immagine che descrive meglio la mia situazione. Grazie per la vostra attenzione.

codice html:
codice HTML:
<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <h1>TES s.p.a</h1>
     <form name = "login" method = "GET" action="test.php">
     <p><input type="text" placeholder="username o email" name = "email" size = 20></br></br>
     <input type="password" placeholder="password" name = "password" ssize = 20></br></br>
    <button class = "button" type="submit">login</button></p></form>
    <h2>non hai un account? registrati ora.</h2>
    <div class="footer">
        dashboard &copy.
    </div>
</body>
</html>
codice CSS:
codice:
    h1{color:#66b3ff; text-align:center; font-size: 60px;}
    
    h2{text-align: center; font-size: 30px }
    
    /*body {
                background: url('sfondo1.png');
                background-repeat: no-repeat;
                background-position: 0 0;
                -moz-background-size: cover;
                -webkit-background-size: cover;
                background-size: cover;
         }*/
    
    html {
    background: url('sfondo1.png') no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
        
    p {text-align: center;}
    
    input[type=text] {
    width: 20%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;}

    input[type=password] {
    width: 20%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;}

    .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 13px;
}

.footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
immagine:
errore1.png