Is there a way to automatically scroll my page when the window is at a small height, instead of adjusting it to the height by squeezing it? I've tried using overflow in different ways, but haven't been successful in getting the entire page to scroll no matter where I place it. The codepen link can be found here: CODEPEN. Thank you for any help!

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oleo+Script&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-y: scroll;
}

a {
    color: #8524C6;
    text-decoration: none;
}

section {
    width: 100%;
    height: 100vh;
    color: #fff;
    background: linear-gradient(-45deg, #F5D0E4, #F6D5F2, #EAD5F6, #D9D5F6, #D5E1F6, #D5ECF6);
    background-size: 400% 400%;
    position: relative;
    animation: change 10s ease-in-out infinite;
    overflow: hidden;
    align-items: center;
    justify-content: center;
} 

h1 {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 1.3em;
    font-family: 'Oleo Script', cursive, 'Helvetica', sans-serif;
    letter-spacing: .07rem;
    transform: translateY(15vh);
}

h1 span {
    display: flex;
    text-align: center;
    vertical-align: middle;
}

h1:hover span {
    animation: animate .5s infinite;
}

@keyframes animate {
    0% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-30px)
    }
    100% {
        transform: translateY(0)
    }
}

h1 span:nth-child(1) {
    animation-delay: 0s;
}
h1 span:nth-child(2) {
    animation-delay: .1s;
}
h1 span:nth-child(3) {
    animation-delay: .2s;
}

h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    vertical-align: top;
    color: #000;
    font-size: .4rem;
    font-family: 'Press Start 2P', cursive, serif;
    text-transform: uppercase;
    transform: translateY(15.5vh)
}

.dancing-hamsters {
    display: flex;
    position: relative;
    margin: auto;
    align-content: center;
    width: 100%;
    height: 1.3rem;
    width: 5.1rem;
    transform: translateY(18vh);
    z-index: 1;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #d3d3d3;
    align-content: center;
    position: absolute;
    top: 50%;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    padding: 5px;
    padding-right: 3%;
    box-shadow: inset 0 0 10px #000;
}


.top-note {
    /* display: flex; */
    display: none;
    font-family: 'Helvetica', sans-serif;
    font-size: .65rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: #000;
    transform: translate(4%, -5%);
}



.box {
    display: flex;
    flex-direction: column;
    background-color: #d3d3d3;
    text-align: center;
    justify-content: center;
    align-items: center;
    text-align: center;
    transform: translateX(50%);
    width: 1rem;
    height: 1rem;
    font-family: 'Press Start 2P', cursive, serif;
    font-size: .5rem;
    margin: 2rem;
}

img {   
    display: flex;
    width: 85%;
    height: 75%;
}

.container img {
    cursor: url('https://i.postimg.cc/6338xsj2/oie-nr-M8-Ct-Mr-SPb-H.png'), auto;
}

.box-text {
    margin-top: 10%;
    cursor: url('https://i.postimg.cc/6338xsj2/oie-nr-M8-Ct-Mr-SPb-H.png'), auto;
}

.nav {
    margin: auto;
    text-align: center;
    transform: translateY(70vh);
    font-size: .5rem;
    text-transform: uppercase;
    line-height: .8rem;
}

.nav a {
    color: #000;
    font-family: 'Press Start 2P', cursive, serif;
    text-shadow: 2px 2px 7px #8524C6;
}


footer {
    margin: auto;
    width: 100%;
    height: 1rem;
    font-family: Helvetica, sans-serif;
    font-size: .75rem;
    background-color: transparent;
    border-top: 1px solid #fff;
    text-align: center;
    padding-top: 1rem;
    bottom: 0;
    transform: translateY(80vh);
}

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

/* Media Queries */

@media screen and (min-width: 740px) {

    h1 {
        font-size: 3em;
        transform: translateY(8vh);
        word-spacing: 2em;
    }

    h2 {
        font-size: 1rem;
        transform: translateY(8vh);
    }

    .dancing-hamsters {
        height: 2rem;
        width: 9rem;
        transform: translateY(10.5vh);
    }

    .container {
        display: flex;
        flex-direction: row;
        }

    .top-note {
        display: none;
    }

    .box {
        width: 15rem;
        height: 15rem;
        transform: translateX(15%);
        font-size: .75rem;
       }
    
    .img {
         width: 100%;
         height: 100%;
        }

    .nav li {
            margin: .5em;
            display: inline;
            text-align: center;
            align-items: center;
            justify-content: center;
            font-size: .85rem;
            }
    .nav {
        transform: translateY(64vh);
    }

    footer {
        transform: translateY(75vh);
    }
}