@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap');


/** py-4 px-0 */
span {
    contain: paint;
}



/** */
span:nth-of-type(2) {
    color: hsl(64, 100%, 50%);
}

/** */
span:last-of-type {
    view-transition-name: last
}

/** */
::view-transition-new(swap),
::view-transition-old(swap) {
    height: 100%;
    object-fit: none;
    object-position: top left;
}

::view-transition-old(swap) {
    animation-name: slide-out;
    animation-duration: 0.75s;
    animation-timing-function: linear(
            0, 0.6832 7.89%, 0.9171 11.07%, 1.0251,
            1.1058 14.9%, 1.1619 16.86%,
            1.1945 18.91%, 1.2024 20.02%,
            1.2043 21.18%, 1.1907, 1.1598 26.27%,
            1.0604 32.59%, 1.0172 35.84%,
            0.9839 39.49%, 0.967 43.26%,
            0.9639 45.77%, 0.9661 48.59%,
            0.9963 60.54%, 1.0054 67.42%, 1
    );
}
::view-transition-new(swap) {
    animation-name: slide-in;
    animation-duration: 0.75s;
    animation-timing-function: linear(
            0, 0.6832 7.89%, 0.9171 11.07%, 1.0251,
            1.1058 14.9%, 1.1619 16.86%,
            1.1945 18.91%, 1.2024 20.02%,
            1.2043 21.18%, 1.1907, 1.1598 26.27%,
            1.0604 32.59%, 1.0172 35.84%,
            0.9839 39.49%, 0.967 43.26%,
            0.9639 45.77%, 0.9661 48.59%,
            0.9963 60.54%, 1.0054 67.42%, 1
    );
}

::view-transition-group(last) {
    animation-duration: 0.75s;
    animation-timing-function: linear(
            0, 0.6832 7.89%, 0.9171 11.07%, 1.0251,
            1.1058 14.9%, 1.1619 16.86%,
            1.1945 18.91%, 1.2024 20.02%,
            1.2043 21.18%, 1.1907, 1.1598 26.27%,
            1.0604 32.59%, 1.0172 35.84%,
            0.9839 39.49%, 0.967 43.26%,
            0.9639 45.77%, 0.9661 48.59%,
            0.9963 60.54%, 1.0054 67.42%, 1
    );
}

@keyframes slide-out {
    100% {
        opacity: 0;
        translate: 0 100%;
    }
}

@keyframes slide-in {
    0% {
        opacity: 0;
        translate: 0 -100%;
    }
}