#apple-warning {
    position: fixed;
    bottom: 0;
    width: 100vw;
    background-color: var(--deep-green);
    z-index: 9;
    padding: 1rem 2rem;
    font-weight: bold;
    color: white;
    text-align: center;
    box-sizing: border-box;
    animation: 3s forwards linear fade-out;
    animation-play-state: paused;

    &:not(.apple) {
        display: none;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
        user-select: auto;
    }

    100% {
        opacity: 0;
        user-select: none;
    }
}

.slides-container {
    display: flex;
    flex-direction: column;
    isolation: isolate;
    /* gap: 10vh; */

    & > .slide {
        --slide-height: calc(100vh - var(--header-height) + 2lh);
        height: var(--slide-height);
        top: -1lh;
        overflow: hidden;
        font-weight: 100;
        animation: slide linear forwards;
        animation-timeline: view();
        isolation: isolate;
        font-family: Inter, Arial, Helvetica, sans-serif;
        font-size: 2rem;

        img {
            user-select: none;
            pointer-events: none;
        }

        div:has(p) {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: fit-content;
        }

        p {
            font-weight: bold;
            margin-block: 0.5rem;
            width: max-content;
            max-width: 90vw;
        }

        .text-shadow,
        &.text-shadow,
        &.text-shadow p {
            text-shadow:
                0.1em 0.1em 0px var(--white),
                0.1em -0.1em 0px var(--white),
                -0.1em 0.1em 0px var(--white),
                -0.1em -0.1em 0px var(--white),
                0px 0.1em 0px var(--white),
                0px -0.1em 0px var(--white),
                0.1em 0px 0px var(--white),
                -0.1em 0px 0px var(--white);
        }

        .bold {
            font-weight: bolder;
        }

        .green {
            color: #768748;
        }

        .orange {
            color: #e69745;
        }

        .red {
            color: #c40800;
        }

        .underline {
            text-decoration: underline;
            text-underline-offset: 0.2em;
        }

        .big {
            font-size: 4rem;
        }

        & * {
            animation-duration: 100s;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
            animation-play-state: paused;
            --additional-animation-delay: 0s;
            animation-delay: calc(var(--animation-delay) + var(--additional-animation-delay));
        }

        & > * {
            --exp-ease-in: cubic-bezier(0, 0, 0.1, 1);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transform-origin: top left;
        }

        &.anchored,
        &.apple {
            position: relative;

            & > * {
                position: absolute;
            }
        }

        &.fixed:not(.apple) > * {
            position: fixed;
        }

        &#s1 {
            background: linear-gradient(to bottom, var(--white) 80%, transparent 100%);
            backdrop-filter: blur(20px);
            z-index: 1;

            painted-title-card {
                height: 100% !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: center !important;
                align-items: center !important;
                padding: 0 !important;

                & > .title-card-container {
                    --card-rotate-degrees: 0deg !important;
                    height: 70% !important;
                    width: 100% !important;
                    display: flex !important;
                    flex-direction: column !important;
                    justify-content: center !important;
                    align-items: center !important;
                    --buffer-space: 8rem !important;
                    padding-top: var(--buffer-space) !important;
                    margin-bottom: calc(var(--buffer-space) / 2) !important;

                    #title-name {
                        --parallax-amount-x: 4rem !important;
                        --parallax-amount-y: 22rem !important;
                    }

                    #title-name-shadow {
                        --parallax-amount-x: 5rem !important;
                        --parallax-amount-y: 22.5rem !important;
                    }

                    #title-name-box {
                        --parallax-amount-x: -4rem !important;
                        --parallax-amount-y: 18rem !important;
                    }

                    & > .background-box {
                        height: calc(100% - var(--buffer-space)) !important;
                        bottom: initial !important;
                        border-radius: 4rem;
                    }

                    & .page-title {
                        font-size: 3.5rem !important;
                        height: 4rem !important;
                        font-weight: 700 !important;
                        font-family: Montserrat, Arial, Helvetica, sans-serif !important;
                    }

                    & .row-1 {
                        transform: translateY(-0.2em);
                        height: 5.2rem !important;
                        font-size: 6rem !important;
                    }

                    & .row-2 {
                        transform: translateY(1.2em);
                    }

                    & .row-3 {
                        transform: translateY(2.2em);
                    }

                    & > #sticker-container {
                        & > * {
                            /* For easier modification: */
                            --blue-pills-parallax-amount: 40% !important;
                            --globe-parallax-amount: 120% !important;
                            --orange-pills-parallax-amount: 50% !important;
                            --gurney-parallax-amount: 80% !important;
                            --hold-pills-parallax-amount: 200% !important;
                            --colourful-pills-parallax-amount: -100% !important;
                        }

                        & > #blue-pills {
                            rotate: -100deg !important;
                            scale: 1.8 !important;
                            left: 10% !important;
                            top: 0% !important;
                        }

                        & > #globe {
                            scale: 2.8 !important;
                            left: 16% !important;
                            top: 50% !important;
                        }

                        & > #orange-pills {
                            rotate: 100deg !important;
                            scale: 1.6 !important;
                            left: 28% !important;
                            top: 70% !important;
                        }

                        & > #gurney {
                            scale: 2.8 !important;
                            left: 52% !important;
                            top: 70% !important;
                            z-index: 1 !important;
                        }

                        & > #hold-pills {
                            rotate: 50deg !important;
                            scale: 3 !important;
                            left: 78% !important;
                            top: 55% !important;
                            z-index: 1 !important;
                        }

                        & > #colourful-pills {
                            rotate: 120deg !important;
                            scale: 1.8 !important;
                            left: 85% !important;
                            top: 5% !important;
                        }
                    }
                }
            }
        }

        &#s2 {
            /* background-color: rgba(0, 0, 255, 0.2); */
            /* height: calc(var(--slide-height) * 3); */

            #earth-f {
                animation-name: earth-m, earth-r, exist;
            }

            #earth-b {
                animation-name: earth-m, exist;
            }

            #gurney {
                animation-name: gurney, exist;
            }

            #meds {
                animation-name: meds, exist;
            }

            #deaths {
                transform: translate(0, 0);
                animation-name: deaths, exist;
                animation-timing-function: var(--exp-ease-in);
            }

            #lmic {
                transform: translate(-100%, -100%);
                text-align: right;
                animation-name: lmic, exist;
                animation-timing-function: var(--exp-ease-in);
                align-items: flex-end;
            }
        }

        &#s3 {
            /* background-color: green; */
            background: linear-gradient(to bottom, transparent 0, var(--white) 15%, var(--white) 85%, transparent 100%);
            backdrop-filter: blur(20px);
            z-index: 1;

            img {
                scale: 0.8;
            }

            #successful {
                top: 20%;
                text-align: center;
                z-index: 1;
            }

            #resurface {
                top: 80%;
                text-align: center;
                z-index: 1;
            }

            #tr-meds-1 {
                rotate: 5deg;
                left: 0%;
                animation: bob 11s infinite ease-in-out;
                animation-delay: -1s;
            }

            #tr-meds-2 {
                left: 100%;
                top: 60%;
                animation: bob 12s infinite ease-in-out;
                animation-delay: -6s;
            }

            #vial {
                left: 38%;
                top: 52%;
                animation: bob 17s infinite ease-in-out;
                animation-delay: -3s;
                scale: 0.9;
            }

            #ampoule {
                left: 68%;
                top: 48%;
                rotate: 20deg;
                scale: 1;
                animation: bob 13s infinite ease-in-out;
                animation-delay: -2s;
            }

            #orange-meds-1 {
                rotate: 100deg;
                left: 25%;
                top: 40%;
                animation: bob 7s infinite ease-in-out;
                animation-delay: -2s;
            }

            #orange-meds-2 {
                rotate: -30deg;
                left: 55%;
                top: 60%;
                animation: bob 9s infinite ease-in-out;
                animation-delay: -8s;
            }

            #orange-meds-3 {
                scale: -1 1;
                rotate: -90deg;
                left: 80%;
                top: 40%;
                animation: bob 8s infinite ease-in-out;
                animation-delay: -5s;
            }
        }

        &#s4 {
            height: calc(var(--slide-height) * 3);

            &.apple {
                height: calc(var(--slide-height) * 1);

                #res-dev {
                    transform: translate(-70%, -80%);
                    height: 30%;

                    & > * {
                        --additional-animation-delay: 3s;
                    }
                }
            }

            #misuse {
                animation-name: exist, misuse;
                animation-timing-function: var(--exp-ease-in);
                transform: translate(0, 0);
            }

            #petri-container {
                animation-name: petri-container, exist;
                animation-timing-function: var(--exp-ease-in);
            }

            #petri-container-2 {
                animation: breathe 10s infinite ease-in-out;
                display: flex;
                justify-content: center;
                align-items: center;
                position: relative;
                height: 60vh;
                width: 60vh;

                & > * {
                    position: absolute;
                }

                .petri-g,
                .petri-r {
                    width: 25%;
                }

                .petri-r {
                    --glow-blur: 0.8rem;
                    --glow-colour: red;
                    filter: drop-shadow(0 0 var(--glow-blur) var(--glow-colour));

                    &:not(#petri-r0) {
                        animation-name: petri-r;
                    }

                    &#petri-r0 {
                        left: 10%;
                        top: 35%;
                        rotate: -10deg;
                    }

                    &#petri-r1 {
                        left: 30%;
                        top: 15%;
                        rotate: -110deg;
                        --additional-animation-delay: 2s;
                    }

                    &#petri-r2 {
                        left: 62%;
                        top: 28%;
                        rotate: -70deg;
                        --additional-animation-delay: 0.4s;
                    }

                    &#petri-r3 {
                        left: 42%;
                        top: 43%;
                        rotate: 100deg;
                        --additional-animation-delay: -0.4s;
                    }

                    &#petri-r4 {
                        left: 65%;
                        top: 58%;
                        rotate: -32deg;
                        --additional-animation-delay: 1.6s;
                    }

                    &#petri-r5 {
                        left: 18%;
                        top: 58%;
                        rotate: 180deg;
                        --additional-animation-delay: 2.4s;
                    }

                    &#petri-r6 {
                        left: 38%;
                        top: 75%;
                        rotate: 10deg;
                        --additional-animation-delay: 1s;
                    }
                }

                .petri-g {
                    animation-name: petri-g;

                    &#petri-g1 {
                        left: 26%;
                        top: 16%;
                        rotate: -30deg;
                        --additional-animation-delay: 1s;
                    }

                    &#petri-g2 {
                        left: 49%;
                        top: 21%;
                        rotate: -98deg;
                        --additional-animation-delay: 2s;
                    }

                    &#petri-g3 {
                        left: 66%;
                        top: 36%;
                        rotate: -55deg;
                        --additional-animation-delay: 1.6s;
                    }

                    &#petri-g4 {
                        left: 60%;
                        top: 62%;
                        rotate: -120deg;
                        --additional-animation-delay: 0.4s;
                    }

                    &#petri-g5 {
                        rotate: 60deg;
                        --additional-animation-delay: 3s;
                    }

                    &#petri-g6 {
                        left: 36%;
                        top: 70%;
                        rotate: -92deg;
                        --additional-animation-delay: 1.2s;
                    }

                    &#petri-g7 {
                        left: 12%;
                        top: 57%;
                        rotate: -50deg;
                        --additional-animation-delay: -0.4s;
                    }
                }
            }

            #res-dev {
                background-color: var(--white);
                border-radius: 2rem;
                border: 10px dotted #6b6b6b;
                height: 12%;
                width: 42%;
                padding: 2rem 5rem;
                display: flex;
                justify-content: center;
                align-items: center;
                animation-name: res-dev;
                animation-timing-function: var(--exp-ease-in);
                overflow: hidden;

                & > * {
                    text-align: center;
                    position: absolute;
                    width: 0;
                    height: 0;
                    overflow: visible;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                #res-dev-1 {
                    animation-name: res-dev-1;
                }

                #res-dev-2 {
                    animation-name: res-dev-2;
                }

                #res-dev-3 {
                    animation-name: res-dev-3;
                }
            }
        }

        &#s5 {
            /* height: calc(var(--slide-height) * 0.8); */
            background-color: rgba(var(--bright-brown-rgb), 0.6);
            backdrop-filter: blur(20px);
            z-index: 1;

            #detection {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 2rem 4rem;
                max-width: 80vw;
                isolation: isolate;
                box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
                background-image: url(/assets/backgrounds/paper.jpg);

                &::before {
                    content: '';
                    user-select: none;
                    pointer-events: none;
                    position: absolute;
                    border: 20px dotted var(--saturated-orange);
                    filter: drop-shadow(0 0 0.5rem var(--saturated-orange));
                    animation: blink 1.5s infinite steps(1);
                    animation-play-state: running;
                    width: 100%;
                    height: 100%;
                }
            }
        }

        &#s6 {
            height: calc(var(--slide-height) * 3);
            z-index: 0;

            &.apple {
                height: calc(var(--slide-height) * 1.5);
            }

            #technology {
                animation-name: exist, technology;
                transform: translate(0, 0);
                animation-timing-function: var(--exp-ease-in);
            }

            #tech-grid {
                left: 98%;
                top: 55%;
                width: 40%;
                height: calc(var(--slide-height) * 0.9);
                translate: -50% 0;
                animation-name: exist;
                animation-timing-function: var(--exp-ease-in);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                gap: 2rem;

                & > div {
                    background-color: var(--bright-brown);
                    border-radius: 1rem;
                    width: 100%;
                    padding: 1rem 1rem;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: start;
                    align-items: start;
                    overflow: hidden;
                    position: relative;
                    isolation: isolate;

                    & > img {
                        z-index: -1;
                        position: absolute;
                        transform: translateX(-50%);
                    }
                }

                #mic-title,
                #pcr-title {
                    top: 0;

                    p {
                        margin: -1px 0;
                        padding: 1px 1rem;
                        background-color: var(--white);
                    }
                }

                #mic {
                    animation-name: mic;

                    #petri-streak {
                        animation-name: petri-streak;
                    }

                    #flask {
                        animation-name: flask;
                    }

                    #well-plate {
                        animation-name: well-plate;
                    }

                    #mic-bad {
                        position: absolute;
                        align-self: center;
                        text-align: center;
                        animation-name: mic-bad;
                        animation-timing-function: var(--exp-ease-in);
                    }
                }

                #pcr {
                    animation-name: pcr;

                    #pipette {
                        animation-name: pipette;
                        animation-timing-function: var(--exp-ease-in);
                    }

                    #thermocycler {
                        animation-name: thermocycler;
                        animation-timing-function: var(--exp-ease-in);
                    }

                    #pcr-bad {
                        position: absolute;
                        align-self: center;
                        text-align: center;
                        animation-name: pcr-bad;
                        animation-timing-function: var(--exp-ease-in);
                    }
                }
            }
        }

        &#s7 {
            /* height: calc(var(--slide-height) * 2); */
            background: linear-gradient(
                to bottom,
                transparent 0,
                rgba(var(--desaturated-orange-rgb), 0.8) 40%,
                rgba(var(--desaturated-orange-rgb), 0.8) 60%,
                transparent 100%
            );
            backdrop-filter: blur(20px);
            isolation: isolate;
            z-index: 1;

            #cheaper {
                z-index: 1;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 3rem;

                .tag {
                    &#r1::before {
                        translate: 0.8rem 0;
                    }

                    &#r2::before {
                        translate: -2rem -1rem;
                    }

                    &::before {
                        content: '';
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 100%;
                        height: 1em;
                        background-color: var(--white);
                        z-index: -1;
                        rotate: -2deg;
                        box-shadow:
                            rgba(0, 0, 0, 0.09) 0px 2px 1px,
                            rgba(0, 0, 0, 0.09) 0px 4px 2px,
                            rgba(0, 0, 0, 0.09) 0px 8px 4px,
                            rgba(0, 0, 0, 0.09) 0px 16px 8px,
                            rgba(0, 0, 0, 0.09) 0px 32px 16px;
                    }
                }
            }

            #microscope {
                scale: 0.9;
                animation-name: microscope;
            }

            #tr-meds-- {
                scale: 0.9;
                rotate: 20deg;
                animation-name: tr-meds--;
            }

            #needles {
                scale: 0.9;
                animation-name: needles;
            }

            #orange-meds-- {
                rotate: 180deg;
                animation-name: orange-meds--;
            }
        }

        &#s8 {
            height: calc(var(--slide-height) * 3);
            z-index: 0;

            &.apple {
                height: calc(var(--slide-height) * 1.2);
            }

            #poc {
                animation-name: exist;
                text-align: center;
                top: 20%;
            }

            #poc-grid {
                width: 90vw;
                height: calc(var(--slide-height) * 0.75);
                translate: 0 15%;
                animation-name: exist;
                animation-timing-function: var(--exp-ease-in);
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                gap: 2rem;

                & > div {
                    background-color: var(--bright-brown);
                    border-radius: 1rem;
                    height: 100%;
                    padding: 1rem 1rem;
                    box-sizing: border-box;
                    display: flex;
                    justify-content: start;
                    align-items: start;
                    overflow: hidden;
                    position: relative;
                    isolation: isolate;
                    width: 15%;

                    & > img {
                        position: absolute;
                        z-index: -1;
                        transform: translateX(-50%);
                    }

                    & > div {
                        position: absolute;
                    }
                }

                #choose {
                    animation-name: choose;
                    animation-timing-function: ease-in-out;

                    #choose-text {
                        animation-name: choose-text;
                        animation-timing-function: ease-in-out;
                    }

                    #orange-bottle {
                        animation-name: orange-bottle;
                        animation-timing-function: ease-in-out;
                    }

                    #hold-meds {
                        animation-name: hold-meds;
                        animation-timing-function: ease-in-out;
                    }
                }

                #spread {
                    animation-name: spread;
                    animation-timing-function: ease-in-out;

                    #spread-text {
                        animation-name: spread-text;
                        animation-timing-function: ease-in-out;
                    }

                    #stethoscope {
                        animation-name: stethoscope;
                        animation-timing-function: ease-in-out;
                    }
                }

                #accessibility {
                    animation-name: accessibility;
                    animation-timing-function: ease-in-out;

                    #accessibility-text {
                        animation-name: accessibility-text;
                        animation-timing-function: ease-in-out;
                    }

                    #ambulance {
                        animation-name: ambulance;
                        animation-timing-function: ease-in-out;
                    }

                    #globe- {
                        animation-name: globe-;
                        animation-timing-function: ease-in-out;
                    }
                }
            }
        }

        &#s9 {
            backdrop-filter: blur(20px);
            height: calc(var(--slide-height) * 2);

            #learn-container {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 2rem;
            }

            #video-container {
                #also {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    p {
                        font-weight: normal;
                        font-size: 1rem;
                        text-align: center;

                        a {
                            color: var(--dark-green);
                            text-decoration: underline;
                        }
                    }
                }

                #video {
                    border-radius: 1rem;
                    padding: 0;
                    margin: 0;
                    width: fit-content;
                    height: fit-content;
                    overflow: hidden;
                    border: none;
                    height: 50vh;
                    aspect-ratio: 16/9;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    background-color: rgba(240, 46, 170, 0.5);
                    box-shadow:
                        rgba(240, 46, 170, 0.4) -1rem 1rem,
                        rgba(240, 46, 170, 0.3) -2rem 2rem,
                        rgba(240, 46, 170, 0.2) -3rem 3rem,
                        rgba(240, 46, 170, 0.1) -4rem 4rem,
                        rgba(240, 46, 170, 0.05) -5rem 5rem;

                    iframe {
                        height: 100%;
                        width: 100%;
                        margin: 0;
                        padding: 0;
                        border: none;
                        z-index: 1;
                    }

                    #buffer {
                        position: absolute;
                        height: 50vh;
                        width: calc(50vh * 16 / 9);
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        p {
                            padding: 1rem;
                            box-sizing: border-box;
                            height: 50vh;
                            width: calc(50vh * 16 / 9);

                            a {
                                color: var(--dark-green);
                                text-decoration: underline;
                            }
                        }
                    }
                }
            }
        }
    }
}

painted-footer {
    & .footer-banner {
        margin-bottom: 0 !important;
    }

    & .footer-persistent {
        position: initial !important;
    }
}

@keyframes exist {
    5%,
    95% {
        /* opacity: 1; */
        visibility: visible;
        scale: 0.9;
    }

    0%,
    100% {
        /* opacity: 0; */
        visibility: hidden;
        scale: 0;
    }
}

@keyframes slide {
    0% {
        font-weight: 100;
    }

    100% {
        font-weight: 1000;
    }
}

@keyframes earth-r {
    0% {
        rotate: 0deg;
    }

    100% {
        rotate: 360deg;
    }
}

@keyframes earth-m {
    0% {
        translate: 0 80%;
    }

    100% {
        translate: 0 -120%;
    }
}

@keyframes gurney {
    0% {
        left: -30%;
        top: 110%;
    }

    100% {
        left: 80%;
        top: 60%;
    }
}

@keyframes meds {
    0% {
        left: 120%;
        top: 60%;
    }

    100% {
        left: 80%;
        top: 10%;
    }
}

@keyframes deaths {
    0% {
        left: -20%;
        top: 18%;
    }

    40%,
    100% {
        left: 6%;
        top: 18%;
    }
}

@keyframes lmic {
    0%,
    30% {
        left: 150%;
        top: 90%;
    }

    70%,
    100% {
        left: 95%;
        top: 90%;
    }
}

@keyframes bob {
    0% {
        translate: 0 1rem;
    }

    50% {
        translate: 0 -1rem;
    }

    100% {
        translate: 0 1rem;
    }
}

@keyframes breathe {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes petri-container {
    0% {
        left: 120%;
        top: 60%;
        rotate: 90deg;
    }

    32.14285714%,
    100% {
        left: 80%;
        top: 60%;
        rotate: 0deg;
    }
}

@keyframes misuse {
    0% {
        left: -20%;
        top: 18%;
    }

    32.14285714%,
    100% {
        left: 6%;
        top: 18%;
    }
}

@keyframes res-dev {
    0%,
    21.42857143% {
        left: 45%;
        top: 110%;
    }

    32.14285714%,
    100% {
        left: 45%;
        top: 80%;
    }

    32.14285714%,
    70% {
        /* opacity: 1; */
        visibility: visible;
        scale: 1;
    }

    95% {
        scale: 1;
    }

    0%,
    70% {
        translate: 0 0;
    }

    100% {
        translate: 0 -10%;
    }

    0%,
    21.42857143%,
    100% {
        /* opacity: 0; */
        visibility: hidden;
        scale: 0;
    }
}

@keyframes res-dev-1 {
    0%,
    20% {
        top: 150%;
    }

    31.64285714% {
        top: 50%;
    }

    52.57142857%,
    100% {
        top: -50%;
    }
}

@keyframes res-dev-2 {
    0%,
    31.64285714% {
        top: 150%;
    }

    52.57142857% {
        top: 50%;
    }

    70%,
    100% {
        top: -50%;
    }
}

@keyframes res-dev-3 {
    0%,
    52.57142857% {
        top: 150%;
    }

    70%,
    100% {
        top: 50%;
    }
}

@keyframes petri-g {
    0%,
    47.14285714% {
        filter: grayscale(0%);
        opacity: 1;
    }

    48%,
    100% {
        filter: grayscale(100%);
        opacity: 0.9;
    }

    0%,
    48% {
        scale: 1;
    }

    55%,
    100% {
        scale: 0;
        opacity: 0;
    }
}

@keyframes petri-r {
    0%,
    65% {
        scale: 0;
    }

    67%,
    100% {
        scale: 1;
    }
}

@keyframes blink {
    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@keyframes technology {
    0% {
        left: -20%;
        top: 18%;
    }

    40%,
    100% {
        left: 6%;
        top: 18%;
    }
}

@keyframes mic {
    0%,
    45% {
        flex-grow: 1;
    }

    55%,
    100% {
        flex-grow: 0;
    }
}

@keyframes pcr {
    0%,
    45% {
        flex-grow: 0;
    }

    55%,
    100% {
        flex-grow: 1;
    }
}

@keyframes petri-streak {
    0% {
        left: -40%;
        top: 30%;
        rotate: 0deg;
    }

    55%,
    100% {
        left: 20%;
        top: 20%;
        rotate: -50deg;
    }
}

@keyframes flask {
    0% {
        left: 60%;
        top: 120%;
    }

    55%,
    100% {
        left: 60%;
        top: 20%;
    }
}

@keyframes well-plate {
    0% {
        left: 130%;
        top: 30%;
    }

    55%,
    100% {
        left: 100%;
        top: 30%;
    }
}

@keyframes mic-bad {
    0%,
    30% {
        translate: 0 30rem;
    }

    45%,
    100% {
        translate: 0 10rem;
    }
}

@keyframes pipette {
    0%,
    45% {
        left: 0%;
        top: 25%;
    }

    100% {
        left: 25%;
        top: 15%;
    }
}

@keyframes thermocycler {
    0%,
    45% {
        left: 120%;
        top: 40%;
    }

    100% {
        left: 80%;
        top: 20%;
    }
}

@keyframes pcr-bad {
    0%,
    55% {
        translate: 0 30rem;
    }

    70%,
    100% {
        translate: 0 10rem;
    }
}

@keyframes microscope {
    0% {
        left: 0%;
        top: 45%;
    }

    100% {
        left: 6%;
        top: 45%;
    }
}

@keyframes tr-meds-- {
    0% {
        left: 20%;
        top: 110%;
    }

    100% {
        left: 20%;
        top: 70%;
    }
}

@keyframes needles {
    0% {
        left: 110%;
        top: 65%;
    }

    100% {
        left: 70%;
        top: 65%;
    }
}

@keyframes orange-meds-- {
    0% {
        left: 80%;
        top: 20%;
    }

    100% {
        left: 80%;
        top: 40%;
    }
}

@keyframes choose {
    0%,
    37.5% {
        flex-grow: 1;
    }

    50%,
    100% {
        flex-grow: 0;
    }
}

@keyframes spread {
    0%,
    37.5% {
        flex-grow: 0;
    }

    50% {
        flex-grow: 1;
    }

    62.5%,
    100% {
        flex-grow: 0;
    }
}

@keyframes accessibility {
    0%,
    50% {
        flex-grow: 0;
    }

    62.5%,
    100% {
        flex-grow: 1;
    }
}

@keyframes choose-text {
    0%,
    37.5% {
        translate: 10% 10%;
    }

    50%,
    100% {
        translate: 50% 10%;
    }
}

@keyframes spread-text {
    0%,
    37.5% {
        translate: 50% 10%;
    }

    50% {
        translate: 10% 10%;
    }

    62.5%,
    100% {
        translate: 50% 10%;
    }
}

@keyframes accessibility-text {
    0%,
    50% {
        translate: 50% 10%;
    }

    62.5%,
    100% {
        translate: 10% 10%;
    }
}

@keyframes orange-bottle {
    0% {
        left: 0%;
        top: 30%;
    }

    0%,
    37.5% {
        scale: 0.8;
    }

    50%,
    100% {
        left: 10%;
        top: 30%;
        scale: 0.7;
    }
}

@keyframes hold-meds {
    0% {
        left: 120%;
        top: -10%;
    }

    37.5% {
        left: 90%;
        top: -10%;
        scale: 1.1;
    }

    50%,
    100% {
        left: 250%;
        top: -10%;
        scale: 0.9;
    }
}

@keyframes stethoscope {
    0%,
    37.5%,
    62.5%,
    100% {
        left: 60%;
        top: 50%;
        scale: 0.9;
    }

    50% {
        left: 75%;
        top: 50%;
        scale: 1.1;
    }
}

@keyframes globe- {
    0%,
    50% {
        scale: 0.7;
        left: 50%;
        top: 30%;
    }

    62.5% {
        left: 90%;
        top: 20%;
        scale: 0.9;
    }

    100% {
        left: 110%;
        top: 20%;
        scale: 0.9;
    }
}

@keyframes ambulance {
    0%,
    50% {
        scale: 0.7;
        left: -50%;
        top: 60%;
    }

    62.5% {
        left: 20%;
        top: 55%;
        scale: 0.9;
    }

    100% {
        left: 30%;
        top: 55%;
        scale: 0.9;
    }
}