As a newcomer to HTML, please excuse my lack of knowledge. I am struggling to keep my current design at the top of my page, similar to a fixed header that follows the user down the page. Currently, the design takes over the entire page, obscuring the body of text below my "Welcome to my Site" header. I want to limit the darkness and moving moon effect to only the top 10% of the page. However, the design currently chops up the background multiple times, rather than leaving the rest of the page blank. Below is the code, thank you in advance.
setTimeout(function(){
$('.moon').css("animation-play-state", "paused");
}, 20000
@keyframes moon {
0% {
box-shadow: -150px 0px 0px 0px white;
transform: rotate(-10deg);
}
50% {
box-shadow: 0px 0px 0px 0px white;
}
100% {
box-shadow: 150px 0px 0px 0px white;
transform: rotate(10deg);
}
z-index: -1;
position: relative;
}
html {
z-index: -1;
position: relative;
background-image: linear-gradient(black 60%, #041931);
height: 45%;
}
body {
font-family: 'Manrope', sans-serif;
background: none;
}
div {
background: none;
z-index: 1;
}
center{
margin-bottom:-80px;
margin-top:80px;
}
#text {
color: #DAA520;
z-index: -1;
}
.moon {
z-index: -1;
position: relative;
width: 10rem;
height: 10rem;
background: #0a0a0a;
margin: 1rem auto;
animation: moon 20s linear infinite alternate;
border-radius: 50%;
box-shadow: inset -10rem 0 whitesmoke;
transform: rotate(-10deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
div {
margin: 10%;
}
</style>
<h1 id="text"><center> Welcome to my Site! </center></h1>
<div class="moon"></div>
<div>Hi! In this site you will find information regarding the phases of the moon. Please look at the links attached below to gain a better understanding of items specific to the phases. </div>
</body>