.bailey-path,
.patricia-path {
    height: 100%;
    width: 100%;
    background-image: linear-gradient(var(--light-pink), #FCDAF1,
            #F49FD8, var(--dark-pink));
    background-position: center;
    background-size: auto 100%;
}

.line54 .continue {
    animation: FadeIn 8s;
    font-size: x-large;
    color: white;
    top: 550px;
    left: 0;
    width: fit-content;
    margin: auto;
}

@keyframes FadeIn {
    0% {
        opacity: 0;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}

.line54 .pause {
    animation: type2 4.8s steps(55);
    position: relative;
    top: 300px;
    left: 400px;
    color: white;
    overflow: hidden;
    white-space: nowrap;
    border-right: 8px solid;
    width: fit-content;
    align-items: flex-end;
}

.pause span {
    margin: auto 25px;
}


.pause .dot {
    font-size: 50px;
}

.pause .exclamation {
    font-size: 180px;
}

/*  Type animation tutorial:
    https://www.youtube.com/watch?v=6vOJoAmbza0&ab_channel=Codingflag */
@keyframes type2 {
    0% {
        width: 0ch;
    }

    24% {
        width: 0ch;
    }

    25% {
        width: 13ch;
    }

    49% {
        width: 13ch;
    }

    50% {
        width: 27ch;
    }

    74% {
        width: 27ch;
    }

    75% {
        width: 40ch;
    }

    99% {
        width: 40ch;
    }

    100% {
        width: 55ch;
    }
}

.text-marty-wait {
    animation: colorChange 3s infinite;
}

.text-marty-wait .dot1 {
    animation: dotChange1 3s infinite;
}

.text-marty-wait .dot2 {
    animation: dotChange2 3s infinite;
}

@keyframes colorChange {
    0% {
        background-color: var(--pale-purple);
    }

    25% {
        background-color: var(--pink-purple);
    }

    50% {
        background-color: var(--pale-purple);
    }

    75% {
        background-color: var(--pink-purple);
    }

    100% {
        background-color: var(--pale-purple);
    }

}

@keyframes dotChange1 {
    0% {
        color: white;
    }

    25% {
        color: var(--pale-purple);
    }

    50% {
        color: white;
    }

    75% {
        color: var(--pale-purple);
    }

    100% {
        color: white;
    }

}

@keyframes dotChange2 {
    0% {
        color: var(--pink-purple);
    }

    25% {
        color: white;
    }

    50% {
        color: var(--pink-purple);
    }

    75% {
        color: white;
    }

    100% {
        color: var(--pink-purple);
    }

}

.line56 .speechbubble,
.line57 .speechbubble,
.line58 .speechbubble,
.line59 .speechbubble,
.line60 .speechbubble,
.line61 .speechbubble {
    position: relative;
    bottom: 350px;
    left: 300px;
}

.line56 .position-phone,
.line57 .position-phone,
.line58 .position-phone,
.line59 .position-phone,
.line60 .position-phone,
.line61 .position-phone {
    position: relative;
    left: 375px;
}

.park-choice,
.restaurant-choice {
    position: relative;
    width: 150px;
    height: 150px;
}

.park-choice {
    bottom: 300px;
    left: 450px;
}

.restaurant-choice {
    bottom: 450px;
    left: 685px;
}

.park-choice .park-icon,
.restaurant-choice .restaurant-icon {
    transition: opacity 0.5s;
    position: relative;
    width: 100%;
    height: auto;
    z-index: 2;

}

.park-choice .park-icon:hover,
.restaurant-choice .restaurant-icon:hover {
    transition: opacity 0.5s;
    opacity: 0;
}

.park-choice .park-text,
.restaurant-choice .restaurant-text {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 95%;
    height: 95%;
    background-color: white;
    text-align: center;
    align-items: center;
    justify-content: center;
    color: var(--pink-purple);
    z-index: 1;
    border-radius: 100px;
    border: 15px solid var(--pink-purple);
    bottom: 164px;
    right: 11px;
}

.line61 .pick-activity {
    position: relative;
    color: var(--pink-purple);
    width: max-content;
    margin: auto;
    bottom: 375px;
}