@keyframes starMovement1 {
    0% {
        background-position: 215% 23%, 225% 78%, 237% 143%, 246% 67%, 189% 189%,
            278% 234%, 267% 12%;
    }
    100% {
        background-position: -85% 23%, -125% 78%, -137% 143%, -146% 67%,
            -89% 189%, -178% 234%, -167% 12%;
    }
}

@keyframes starMovement2 {
    0% {
        background-position: 167% 156%, 298% 45%, 212% 287%, 145% 312%, 256% 98%,
            189% 201%;
    }
    100% {
        background-position: -67% 156%, -98% 45%, -112% 287%, -45% 312%,
            -156% 98%, -89% 201%;
    }
}

#page-header {
    text-align: center;
    padding: 1.75rem 0 3.2rem 0;
    margin: 0 auto;
    position: relative;
    background: linear-gradient(
        135deg,
        rgba(122, 95, 150, 0.4) 0%,
        rgba(84, 58, 130, 0.7) 50%,
        rgba(122, 95, 150, 0.4) 100%
    );
    background-size: 100% 100%;
    overflow: hidden;
    box-shadow: inset 0 0 10px #000000;
}

#page-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    padding: 0 1rem 0 1rem;
    margin-bottom: 0.6rem;
    color: var(--white);
    position: relative;
    display: inline-block;
}

#page-header h1::after {
    content: "";
    position: absolute;
    width: 60px;
    height: 3px;
    background: var(--gradient);
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px;
}

#page-header p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0.75rem auto 0;
    opacity: 0.85;
    line-height: 1.5;
    padding: 0 2rem;
}

#page-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(white, transparent 2px),
        radial-gradient(white, transparent 1px),
        radial-gradient(white, transparent 3px),
        radial-gradient(white, transparent 1px),
        radial-gradient(white, transparent 2px),
        radial-gradient(white, transparent 1px),
        radial-gradient(white, transparent 1px);
    background-position: 15px 23px, 125px 78px, 237px 143px, 346px 67px,
        89px 189px, 178px 234px, 267px 12px;
    background-size: 403px 397px, 261px 257px, 357px 343px, 543px 541px,
        467px 463px, 321px 317px, 289px 283px;
    animation: starMovement1 90s linear infinite;
    opacity: 0.3;
    transform: rotate(7deg);
    pointer-events: none;
}

#page-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(white, transparent 3px),
        radial-gradient(white, transparent 1px),
        radial-gradient(white, transparent 2px),
        radial-gradient(white, transparent 1px),
        radial-gradient(white, transparent 2px),
        radial-gradient(white, transparent 1px);
    background-position: 67px 156px, 198px 45px, 312px 287px, 45px 312px,
        156px 98px, 289px 201px;
    background-size: 400px 380px, 600px 580px, 360px 340px, 520px 500px,
        440px 420px, 380px 360px;
    animation: starMovement2 120s linear infinite;
    opacity: 0.15;
    transform: rotate(-3deg);
    pointer-events: none;
}

@media (max-width: 1026px) {
    #page-header::before {
        animation: starMovement1 15s linear infinite;
    }

    #page-header::after {
        animation: starMovement2 20s linear infinite;
    }
}