/* Page 3 Shennanigans (I am so sorry, me) */

.p3walk {
    width: 40%;
    height: auto;
    float: right;
    position: absolute;
    right: 33%;
    z-index: 0;
    margin-top: 4vw;
    
}

.p3bg {
    height: auto;
    max-width: 100%;
}

div.dialoguebox {
    position: relative;
    background-color: black;
    color: ghostwhite;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
    height: calc(280px - 10vw);
    border-style: solid;
    border-color: white;
    border-width: 5px;
}

.progressbutton {
    position: absolute;
    bottom: 10px;
    right: 10px;
    border-style: none;
    padding: 10px;
    background-color: rgb(200,200,200);
    color: black;
    
}

.progressbutton:hover {
    cursor: pointer;
    background-color: white;
}

.nextarrow {
    height: auto;
    width: 35px;
    margin-top: -5px;
    margin-bottom: -10px;
}

.p3speechtail {
    position: absolute;
    width: 12.5%;
    height: auto;
    margin-left: 13%;
}

div.foregroundScroller {
    max-width: 48.15%;
    overflow: hidden;
    position: absolute;
    z-index: 100;
    height: 19.50vw; 
}

div.foregroundInner {
    display: flex;
    width: fit-content;
    height: 100%;
    animation: scroll 9s linear infinite reverse;
}

div.backgroundScroller {
    max-width: 48.15%;
    overflow: hidden;
    position: absolute;
    z-index: 0;
    height: 19.75vw; 
}

div.backgroundInner {
    display: flex;
    width: fit-content;
    height: 100%;
    animation: scroll 6s linear infinite reverse;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50%));
    }
}