.subpage{
    min-height: 40vh;
    margin: 0;
    background: linear-gradient(80deg, var(--light-wash), var(--light-wash));
    overflow: hidden;
    position: relative;
}

.subpage h1{
    position: absolute; /* position relative to .subpage */
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%); /* center perfectly */
    text-align: center;
    z-index: 10;
    margin-top: 3rem;
}

@media (max-width: 768px) {
    .subpage h1{
        top: 50%;
    }
}

#up{
    z-index: 1;
    position: absolute;
    height: 500px;
    width: 500px;
    border-radius: 50%;
    background-image: linear-gradient(80deg, var(--light-wash), var(--light-wash-two));
    filter: blur(80px);
    animation: down 40s infinite;
}

#down{
    z-index: 1;
    position: absolute;
    right: 0;
    height: 300px;
    width: 300px;
    border-radius: 50%;
    background-image: linear-gradient(80deg, var(--light-wash), var(--light-wash-two));
    filter: blur(80px);
    animation: up 30s infinite;
}

#left{
    z-index: 1;
    position: absolute;
    height: 300px;
    width: 300px;
    border-radius: 50%;
    background-image: linear-gradient(80deg, var(--light-wash), var(--light-wash-two));
    filter: blur(80px);
    animation: left 30s 1s infinite;
}

#right{
    z-index: 1;
    position: absolute;
    height: 300px;
    width: 300px;
    border-radius: 50%;
    background-image: linear-gradient(80deg, var(--light-wash), var(--light-wash-two));
    filter: blur(80px);
    animation: right 40s .5s infinite;
}

@keyframes down{
    0%, 100%{
        top: -100px;
    }
    70%{
        top: 700px
    }
}

@keyframes up{
    0%, 100%{
        bottom: -100px;
    }
    70%{
        bottom: 700px
    }
}

@keyframes left{
    0%, 100%{
        left: -100px;
    }
    70%{
        left: 1300px
    }
}


@keyframes right{
    0%, 100%{
        right: -100px;
    }
    70%{
        right: 1300px
    }
}