Backface filter blur is not applying to fullscreen.

333BlackOut — Mon, 13 Dec 2021 14:21:59 +0000

I am trying to give my backgroung blur effect using backdrop filter, but it is not applying to the whole screen. It leaves the bottom part of the screen.

I don't know why, but the screenshot is not uploading so I am sharing the link to screenshot:
link

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Contact.css"/>
    <script defer src="Contact.js"></script>
    <title>Document</title>
</head>
<body>
    <main id="main">
        <section>
            <h1 id="heading">
                CONTACT US
            </h1>
            <form id="contact" onsubmit="NextPage();return false">
                <input type="text" name="name" placeholder="Name" id="name" required/>
                <input type="email" name="email" placeholder="E-mail" id="email" required/>
                <input type="text" name="sub" placeholder="Subject" id="subject" required/>
                <input type="text" name="mess" placeholder="Your Message" id="message" required/>
                <textarea rows="5" maxlength="300" placeholder="Type your queries here" name="query" id="query"></textarea>
                <button type="submit" name="submit" onclick="NextPage()" id="submit">Submit</button>
            </form>
        </section>
    </main>
</body>
</html>

CSS

body{
    height: 100%;
    margin: 0;
    display: grid;
    align-items: center;
    justify-items: center;
    background-image: url("Background4.jpg");
    background-size: cover;
    backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
main{
    padding-top: 10%;
    display: grid;
    align-items: center;
    justify-items: center;
}
section{
    position: relative;
    width: 50%;
    height: 100%;
    display: grid;
    text-align: center;
    align-items: center;
    justify-items: center;
    border: 3px solid red;
    border-radius: 7px;
    background-color: aquamarine;
    padding-bottom: 3%;
}
#heading{
    color: red;
    text-shadow: 50px;
    margin-bottom: 20%;
    font-size: 30px;
    text-decoration: underline;
    font-style: italic;
}
#name, #email{
    width: 42%;
    margin: 1%;
}
#subject{
    width: 90%;
    margin-bottom: 1%;
}
#message{
    width: 90%;
    margin-bottom: 1%;
}
#query{
    width: 90%;
}
#submit{
    width: 30%;
    padding: 2%;
    margin-top: 10%;
    border: 1px dashed red;
    border-radius: 7px;
}
input{
    border: 1px dashed red;
    border-radius: 7px;
}
textarea{
    border: 1px dashed red;
    border-radius: 7px;
    resize: none;
}

DEV Community: 333BlackOut

Backface filter blur is not applying to fullscreen.