I got this code through a CSS animated gradient and I was wondering if there’s a way to make sure only the top 15% of the page has the animated gradient, while the rest of the page stays black? Thanks! I’m new to CSS, and I’m working on a third-party Notion customization platform that’s pretty complicated, so the less HTML I work with for this problem, I would appreciate it!

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: #000; /* Black background for the entire body */
}

.page {
    width: 100%;
    height: 15%; /* Upper 15% of the page */
    color: #fff;
    background: linear-gradient(270deg, #eb5666, #e4c545, #ff8c4c, #0b1215);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 55s ease infinite;
    -moz-animation: AnimationName 55s ease infinite;
    animation: AnimationName 55s ease infinite;
}

@-webkit-keyframes AnimationName {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@-moz-keyframes AnimationName {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes AnimationName {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

I asked ChatGPT for help, and it gave me this but it didn’t work. I was wondering if there’s any way to do the 15:85 situation.

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: #000; /* Black background for the entire body */
    display: flex;
    flex-direction: column;
}

.page-container {
    width: 100%;
    height: 15vh; /* Upper 15% of the page */
    position: relative;
}

.page {
    width: 100%;
    height: 100%;
    color: #fff;
    background: linear-gradient(270deg, #eb5666, #e4c545, #ff8c4c, #0b1215);
    background-size: 800% 800%;
    -webkit-animation: AnimationName 55s ease infinite;
    -moz-animation: AnimationName 55s ease infinite;
    animation: AnimationName 55s ease infinite;
}

@-webkit-keyframes AnimationName {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@-moz-keyframes AnimationName {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes AnimationName {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* The remaining part of the page */
.black-section {
    flex: 1;
    background-color: #000;
}