How to make css gradient full screen ? It does not show behind styled divs

Question

I just started learning HTML & CSS like 3 days ago. Need some help about background gradients.

HTML basically has 2 headings , one is h1 and second is div.

I used css to style it like this-

`body{
    margin:0;
    background: linear-gradient(to bottom,black,blue);
    background-repeat:no-repeat;
    background-size:100%;
    text-align:center;
}

#heading2{
    display:flex;
    align-items:center;
    justify-content:center;
    background: #040926;
    height: 500px;
    width: 500px;
    margin: -250px 0 0 -250px;
    border-radius: 50%;
    box-shadow: -2px -2px 10px #66C3FF,5px 5px 20px #424874;
    position:absolute;
    top:40%;
    left:50%;
}`

My problem is - the background gradient applies only behind heading 1 and it’s blank behind heading 2 (image for reference)csstest

How to make the background full screen ?

This issue does not happen with images, image appears full screen with background-size:100%