body {
    background:
        linear-gradient(112deg, transparent 0 69%, rgba(209,40,56,.24) 69% 77%, transparent 77%),
        linear-gradient(112deg, transparent 0 73%, rgba(203,211,218,.13) 73% 77%, rgba(244,255,0,.055) 77% 78%, transparent 78%) 0 25rem / 100% 40rem no-repeat,
        linear-gradient(68deg, transparent 0 8%, rgba(209,40,56,.14) 8% 15%, transparent 15%) 0 62rem / 100% 45rem no-repeat,
        linear-gradient(180deg, var(--navy), var(--navy-deep));
    background-attachment: fixed;
}

.page-main {
    position: relative;
    isolation: isolate;
}

.page-main::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 18rem;
    right: 0;
    width: min(34rem, 52vw);
    height: 64rem;
    background: linear-gradient(135deg, transparent 10%, rgba(209, 40, 56, .08) 46%, rgba(203, 211, 218, .035) 47% 50%, transparent 51%);
    pointer-events: none;
}

.youth-page {
    background:
        radial-gradient(circle at 88% 7%, rgba(114, 189, 219, .49), transparent 34rem),
        radial-gradient(circle at -5% 31%, rgba(242, 106, 33, .37), transparent 29rem),
        radial-gradient(circle at 86% 68%, rgba(23, 63, 103, .72), transparent 37rem),
        linear-gradient(115deg, transparent 0 62%, rgba(242, 106, 33, .13) 62% 67%, rgba(216, 224, 229, .11) 67% 71%, rgba(114, 189, 219, .15) 71% 78%, transparent 78%);
}

.youth-page::before {
    border-color: rgba(114, 189, 219, .14);
    box-shadow: 0 0 0 2.5rem rgba(242, 106, 33, .11);
}

@media (max-width: 700px) {
    body {
        background-attachment: scroll;
        background:
            linear-gradient(112deg, transparent 0 67%, rgba(209,40,56,.24) 67% 79%, transparent 79%),
            linear-gradient(112deg, transparent 0 72%, rgba(203,211,218,.13) 72% 78%, transparent 78%) 0 18rem / 100% 34rem no-repeat,
            linear-gradient(180deg, var(--navy), var(--navy-deep));
    }
}