#content {
    --base-size-unit: 1em;

    height: calc(200vh - calc(calc(var(--base-size-unit)*4) + calc(var(--base-size-unit)*3)));
    min-height: max-content;
    width: 100vw;

    margin: 0;

    position: absolute;
    top: calc(var(--base-size-unit)*4);
}

.contentItem {
    width: max-content;
    height: max-content;

    padding-top: calc(var(--base-size-unit)/4);
    padding-bottom: calc(var(--base-size-unit)/4);
    padding-left: calc(var(--base-size-unit)/2);
    padding-right: calc(var(--base-size-unit)/2);

    margin: calc(var(--base-size-unit)/2);

    background-color: rgba(0, 0, 0, 0.5);
    border-radius: calc(var(--base-size-unit)/2);
}

.contentItem p {
    width: max-content;
    height: max-content;

    color: transparent;

    background: linear-gradient(to right, lightblue 0%, lightblue 20%, pink 20%, pink 40%, white 40%, white 60%, pink 60%, pink 80%, lightblue 80%, lightblue 100%);

    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;

    background-size: 200% 100%;

    animation-name: mainSectionPScroll_anim;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes mainSectionPScroll_anim {
    0% {
        background-position: 200%, 0;
    }

    100% {
        background-position: 0%, 0;
    }
}