@keyframes header-shrink {
    to {
        background-color: rgb(19, 48, 97);
        height: 2rem;
    }
}

@keyframes bg-color-brightness {
    to {
        background-color: rgb(19, 48, 97);
    }
}

@keyframes sub-brand-shrink {
    to {
        transform: scaleY(0.01);
    }
}

@keyframes scroll-progress {
    to {
        width: 100%;
    }
}

.pr-brand-subtitle {
    display: grid;
    background-color: rgb(0% 30% 80% / .2);
    border-radius: 1rem;
    border: 2px solid rgb(0% 30% 80% / .5);
    padding: .5rem;
    margin: 0;
    transform: scaleY(1.001);  /* if "1", the end result will be blurry */
    transform-origin: top;
    max-width: max-content;
    animation: sub-brand-shrink 1s linear;
}

.progress {
    height: 3px;
    width: 0%;
    /*background-color: rgb(0% 30% 80% / 1);*/
    background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(0, 31, 111, 1) 89%, rgba(31, 175, 255, 1) 100%);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
    animation: scroll-progress 1s linear;
}

header {
    background-color: rgb(0% 10% 20% / .98);
    border-bottom: 2px solid rgb(0% 30% 80% / .5);
    position: sticky;
    top: 0;
    height: 6rem;
    min-height: 2rem;
    max-height: fit-content;
    padding: .5rem 1rem;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    align-items: start;
    animation: header-shrink 1s linear;

    h1 {
        color: rgb(100% 100% 100% / 1);
        font-size: 2rem;
        margin: 0;
    }

    ul {
        list-style: none;
        font-size: 1.25rem;
        margin-block-start: .5rem;
        padding-inline-start: 2rem;
        margin-block-end: 0;
    }
}

footer {
    background-color: rgb(0% 10% 20% / .98);
    border-top: 2px solid rgb(0% 30% 80% / .5);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: fit-content;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    padding: .5rem;
    z-index: 2;
    animation: bg-color-brightness 1s linear;

    div {
        background-color: rgb(0% 10% 20% / .98);
        border-radius: 1rem;
        padding: .5rem;
    }

    p {
        margin: 0;
        font-size: 1.125rem;
        font-weight: bolder;
        border-bottom: 1px solid rgb(0% 30% 80% / .5);
    }

    dl {
        display: grid;
        grid-template-columns: 5rem 2fr;
        margin-block-start: .25rem;

        dt,dd {
            margin: 0;
            margin-bottom: 0.225rem;
            padding: 0;
        }
    }

    div.pr-copy-policies {
        display: grid;
        grid-template-rows: auto 1fr;
        justify-items: start;
        align-items: start;
    }
}

a {
    color: rgb(50% 70% 100% / 1);
    &:visited {
        color: rgb(50% 70% 100% / 1);
    }
}

body {
    --scroll: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/park-ranger-raptor-truck-lg.jpeg');
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: black;
    background-origin: border-box;
    background-size: cover;

    font-size: 12pt;
    color: rgb(50% 70% 100% / 1);

    padding-block-end: 10vh;
    /*animation: body 1s linear;*/
}

html {
    margin: 0;
    padding: 0;


    article {
        width: calc(100vw - 3rem);
        box-sizing: border-box;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
        gap: 1rem;
        justify-content: center;
        justify-items: center;
        margin: 2rem auto 8rem auto;

        section {
            position: relative;
            width: 20rem;
            border: 2px solid rgb(0% 30% 80% / .5);
            border-radius: 1rem;
            background-color: rgb(0% 10% 20% / .95);
            padding: .5rem 1rem .25rem 1rem;

            ul {
                padding-inline-start: 1rem;

                li {
                    margin-block-end: .5rem;

                    &:last-child {
                        margin-block-end: 0;
                    }
                }
            }

            dl {
                dt {
                    text-decoration: underline;
                    margin-block-start: .5rem;

                    &:first-child {
                        margin-block-start: 0;
                    }
                }

                dd {
                    margin-inline-start: 1rem;
                }
            }
        }
    }

}

.policy-block {
    margin: 2rem;
    padding: 2rem;
    background-color: rgb(0% 10% 30% / .95);
    color: rgb(0% 50% 80% / 1);
}

:root * {
    /* Pause the animation */
    animation-play-state: paused;
    /* Bind the animation to scroll */
    animation-delay: calc(var(--scroll) * -1s);
    /* These last 2 properites clean up overshoot weirdness */
    animation-iteration-count: 1;
    animation-fill-mode: both;
}