.button-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: green;
    color: white;
    text-align: justify;
    text-decoration: none;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    position: absolute;
    border: 2px solid #333;  
    z-index: 3;
}

#button-link-next {
    right: 5vw;
}

#button-link-back {
    left: 5vw;
}

.button-link:hover {
    background-color: purple;
    box-shadow: 5px 5px 10px black;
}

.button-link:active {
    transform: scale(0.80);
    transition: transform 0.1s;
}

@keyframes tortoise-walk {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100vw);
    }
}

@keyframes jump-forward {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(25vw, -50px);
    }
    50% {
        transform: translate(50vw, 0);
    }
    75% {
        transform: translate(75vw, -50px);
    }
    100% {
        transform: translate(100vw, 0);
    }
}

#page-1 {
    background-image: url("images/forest_page_1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    overflow: hidden;
}

#page-1 h1 {
    height: 40vh;
    width: 70vw;
    font-size: 4rem;
    text-align: center;
    color: #4CAF50;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    margin-top: 50px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 10%;
    left: 15%;
    z-index: 2;
    text-shadow: 5px 5px 5px #592b0fdc;
    font-family: "Delius", cursive;
    font-weight: 800;
    font-style: normal;
}

#page-1 #title-sign {
    height: 30vh;
    width: 70vw;
    position: absolute;
    top: 2%;
    left: 15%;
    z-index: 1;
}

#page-1 #tortoise {
    height: 20vh;
    width: 20vw;
    position: absolute;
    top: 80%;
    left: 5%;
    animation: tortoise-walk 100s forwards normal;
    z-index: 1;
}

#page-1 #hare {
    height: 20vh;
    width: 20vw;
    position: absolute;
    top: 80%;
    left: 5%;
    animation: jump-forward 3s ease-in-out forwards normal;
    z-index: 1;
}

#page-1 #start-sign {
    height: 15vh;
    width: 10vw;
    position: absolute;
    top: 80%;
    left: 30%;
    z-index: 0;
}
@keyframes tortoise-walk-appear {
    0% {
        transform: translateX(0);
        opacity: 0%;
    }
    100% {
        transform: translateX(25vw);
        opacity: 100%;
    }
}

@keyframes jump-forward-appear {
    0% {
        transform: translate(110vw, 0) scaleX(-1);
    }
    50% {
        transform: translate(75vw, -50px) scaleX(-1);
    }
    100% {
        transform: translate(50vw, 0)scaleX(-1);
    }
}

#page-2 {
    background-image: url("images/forest_page_2.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    overflow: hidden;
}

#page-2 #text-page-2 {
    width: 99vw;
    background-color: #DED6D6;
    font-size: 2rem;
    justify-content: center;
    position: absolute;
    top: 10%;
    border-radius: 10px 10px 10px 10px;
    font-family: "Delius", cursive;
    font-weight: 400;
    font-style: normal;
}

#page-2 #tortoise {
    height: 20vh;
    width: 20vw;
    position: absolute;
    top: 80%;
    left: -10;
    animation: tortoise-walk-appear normal forwards 1s;
}

#page-2 #hare {
    height: 20vh;
    width: 20vw;
    position: absolute;
    top: 80%;
    right: -10;
    animation: jump-forward-appear normal forwards 1s;
}

#page-2 #text-bubble-hare {
    width: 15vw;
    height: 30vh;
    background-color: rgb(129, 171, 203);
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 84% 100%, 50% 75%, 0% 75%);
    text-align: center;
    font-size: 3rem;
    transform: translate(42vw,55vh);
    font-family: "Delius", cursive;
    font-weight: 400;
    font-style: normal;
}

@keyframes laughing-rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-25deg);
    }
    100% {
        transform:rotate(25deg);
    }
}

@keyframes tortoise-walk-page3 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(5vw);
    }
}



#page-3 {
    background-image: url("images/forest_page_3.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    overflow: hidden;

}

#page-3 #hare {
    height: 50vh;
    width: 40vw;
    position: absolute;
    top: 30%;
    right: 25%;
    animation: laughing-rotate alternate-reverse infinite 2s;
}

#page-3 #tortoise {
    height: 20vh;
    width: 20vw;
    position: absolute;
    top: 80%;
    left: -10;
    animation: tortoise-walk-page3 5s forwards;
}

#page-3 #text-page-3 {
    width: 99vw;
    background-color: #DED6D6;
    font-size: 2rem;
    justify-content: center;
    position: absolute;
    top: 10%;
    border-radius: 10px 10px 10px 10px;
    font-family: "Delius", cursive;
    font-weight: 400;
    font-style: normal;
}

#page-3 #text-bubble-hare {
    width: 15vw;
    height: 30vh;
    background-color: rgb(129, 171, 203);
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 84% 100%, 50% 75%, 0% 75%);
    text-align: center;
    font-size: 2rem;
    transform: translate(35vw,25vh);
    font-family: "Delius", cursive;
    font-weight: 400;
    font-style: normal;
}

#page-3 #text-bubble-tortoise {
    width: 15vw;
    height: 30vh;
    background-color: rgb(240, 32, 0);
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 25% 75%, 25% 100%, 50% 75%, 0% 75%);
    text-align: center;
    font-size: 2rem;
    transform: translate(20vw, 20vh);
    font-family: "Delius", cursive;
    font-weight: 400;
    font-style: normal;
}



@keyframes tortoise-walk {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100vw);
    }
}

@keyframes jump-forward {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(25vw, -50px);
    }
    50% {
        transform: translate(50vw, 0);
    }
    75% {
        transform: translate(75vw, -50px);
    }
    100% {
        transform: translate(100vw, 0);
    }
}


@keyframes gun-recoil {
    0% {
        transform: rotate(0deg) translateX(0);
    }
    50% {
        /* Snaps back aggressively */
        transform: rotate(10deg) translateX(-15px); 
    }
    100% {
        transform: rotate(-1deg) translateX(0);
    }
}

@keyframes screen-shake {
    0% { 
        transform: translate(1px, 1px) rotate(0deg); 
    }
    25% { 
        transform: translate(-1px, 0px) rotate(-0.5deg); 
    }
    50% { 
        transform: translate(1px, -1px) rotate(0.5deg); 
    }
    75% { 
        transform: translate(-1px, 1px) rotate(-0.2deg); 
    }
    100% { 
        transform: translate(0, 0) rotate(0deg); 
    } 
}

@keyframes crowd-jump {
    0% {
        transform: translateY(0); /* Start position */
    }
    50% {
        transform: translateY(-5px); /* Move 5 pixels up (the jump) */
    }
    100% {
        transform: translateY(0); /* Return to start position */
    }
}

#page-4 {
    background-image: url("images/forest_page_1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    overflow: hidden;

}

#shakable-container {
    width: 100vw; 
    min-height: 100vh;
    
    /* Apply the screen-shake animation to this wrapper DIV */
    animation: 
        screen-shake 0.3s cubic-bezier(.36,.07,.19,.97) both;
    
    /* Start after a 7.5s delay and run once */
    animation-delay: 7.5s; 
    animation-iteration-count: 1; 
}

#page-4 #tortoise {
    height: 20vh;
    width: 20vw;
    position: absolute;
    top: 80%;
    left: 5%;
    animation: tortoise-walk 100s forwards normal;
    animation-delay: 7.5s;
    z-index: 1;
}

#page-4 #hare {
    height: 20vh;
    width: 20vw;
    position: absolute;
    top: 80%;
    left: 5%;
    animation: jump-forward 3s ease-in-out forwards normal;
    animation-delay: 7.5s;
    z-index: 1;
}

#page-4 #start-sign {
    height: 15vh;
    width: 10vw;
    position: absolute;
    top: 80%;
    left: 30%;
    z-index: 0;
}


#page-4 #text-page-4 {
    width: 99vw;
    background-color: #DED6D6;
    font-size: 2rem;
    justify-content: center;
    position: absolute;
    top: 10%;
    border-radius: 10px 10px 10px 10px;
    font-family: "Delius", cursive;
    font-weight: 400;
    font-style: normal;
    
}

#page-4 #flare_gun {
    width: 5vw;
    height: 15vh;
    position: absolute;
    top: 60%;
    left: 39%; 
    
    /* CRUCIAL: Pivot point is set to the bottom handle for realistic recoil */
    transform-origin: 50% 100%; 
    
    /* Apply the gun recoil animation */
    animation: gun-recoil 0.15s ease-out 7.5s 1 forwards;
}

#page-4 #bear {
    height: 30vh;
    width: 20vw;
    position: absolute;
    top: 65%;
    left: 5%;
    z-index: 0;
    animation: crowd-jump 0.5s ease-in-out infinite alternate;

}

#page-4 #raccoon {
    height: 20vh;
    width: 10vw;
    position: absolute;
    top: 75%;
    left: 20%;
    z-index: 0;
    animation: crowd-jump 0.5s ease-in-out infinite alternate;

}


#page-4 #fox_referee {
    height: 35vh;
    width: 25vw;
    position: absolute;
    top: 65%;
    left: 35%;
}



#page-5 {
    background-image: url("images/forest_page_5.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    overflow: hidden;

}


/*This contains the div box which holds the tree*/
#page-5 #leftbox {
    top: 0;
    left: 0;
    width: 70vw;
    height: 100vh;
    clip-path:  polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 49%, 0% 0%);
    shape-outside: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 49%, 0% 0%);
    font-size: 100px;
    float: left;
    margin-right: -190px;
    transform: scale(1.09);
    
}
/*you can modify the background color of the textbox if you want*/
#page-5 #textboxstuff {
    font-size: 2rem;
    background-color: #DED6D6;
    border-radius: 10px 10px 10px 10px;
    width: 86vw;
    font-family: "Delius", cursive;
    font-weight: 400;
    font-style: normal;


    
}

/*This controls the tree image*/
#page-5 #page5tree {
    position: relative;
    top:  -40%;
    left: -39%;
    width: 100%;

}


@keyframes jump-forward-page-5 {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(20vw, -40px);
    }
    100% {
        transform: translate(40vw, 0);
}
}



@keyframes hare-fade-out {
    100% {
        opacity: 0;
        transform: translate(40vw, 0);
    }
}

@keyframes hare-fade-in {
    0% {
        opacity: 0; /* Start invisible */
    }
    100% {
        opacity: 1; /* End fully visible */
    }
}

#page-5 .hare-racer {
    height: 20vh;
    width: 20vw;
    position: absolute;
    top: 60%;
    left: 5%;
    z-index: 1;
}

#page-5 #hare-running {
    opacity: 1;
    animation: jump-forward-page-5 2s ease-in-out forwards normal, hare-fade-out 0.5s 2s forwards; /* Fades out after 2s (when movement ends) */
}

#page-5 #hare-sleeping {
    /* Sleeping hare starts invisible, positioned at the end of the jump */
    opacity: 0;
    transform: translate(40vw, 0); 
    animation: hare-fade-in 0.5s 2s forwards; 
}

#page-5 #zzz-bubble {
    width: 10vw;
    height: 20vh;
    position: absolute;
    z-index: 2; 
    
    top: 50%; 
    left: 43%; 

    opacity: 0; 
    
    animation: 
        /* 1. Bobbing Movement: 1.5s, infinite loop, alternates back and forth */
        zzz-bob-diagonal 1.5s ease-in-out infinite alternate,
        /* 2. Fade In: Makes the ZZZ appear quickly */
        zzz-fade-in 0.2s forwards;
        
    /* Delay the start of BOTH animations (2s movement + 0.5s fade) */
    animation-delay: 2.5s; 
}

@keyframes zzz-fade-in {
    100% {
        opacity: 1; 
    }
}

@keyframes zzz-bob-diagonal {
    0% { 
        transform: translate(0, 0);
        opacity: 1;
    }
    50% { 
        transform: translate(-10px, -10px); 
        opacity: 1;
    }
    100% { 
        transform: translate(2px, 2px); 
        opacity: 1;
    }
}



#page-6 {
    background-image: url("images/forest_page_5.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    overflow: hidden;

}


/*This contains the div box which holds the tree*/
#page-6 #leftbox {
    top: 0;
    left: 0;
    width: 70vw;
    height: 100vh;
    clip-path:  polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 49%, 0% 0%);
    shape-outside: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 49%, 0% 0%);
    font-size: 100px;
    float: left;
    margin-right: -190px;
    transform: scale(1.09);
    
}
/*you can modify the background color of the textbox if you want*/
#page-6 #textboxstuff {
    font-size: 2rem;
    background-color: #DED6D6;
    border-radius: 10px 10px 10px 10px;
    width: 86vw;
    font-family: "Delius", cursive;
    font-weight: 400;
    font-style: normal;


    
}

/*This controls the tree image*/
#page-6 #page6tree {
    position: relative;
    top:  -40%;
    left: -39%;
    width: 100%;

}





#page-6 .hare-racer {
    height: 20vh;
    width: 20vw;
    position: absolute;
    top: 60%;
    left: 5%;
    z-index: 1;
}



#page-6 #hare-sleeping {
    opacity: 1;
    transform: translate(40vw, 0); 
    z-index: -2;

}


#page-6 #zzz-bubble {
    width: 10vw;
    height: 20vh;
    position: absolute;
    z-index: 2; 
    top: 50%; 
    left: 43%;
    opacity: 1; 
    animation: 
        zzz-bob-diagonal 1.5s ease-in-out infinite alternate;
        

}

#page-6 #tortoise {
    height: 20vh;
    width: 20vw;
    position: absolute;
    top: 75%;
    left: 0%;
    animation: tortoise-walk 30s forwards normal;
    z-index: -1;
}


#page-7 {
    background-image: url("images/forest_page_5.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    overflow: hidden;

}


/*This contains the div box which holds the tree*/
#page-7 #leftbox {
    top: 0;
    left: 0;
    width: 70vw;
    height: 100vh;
    clip-path:  polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 49%, 0% 0%);
    shape-outside: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 49%, 0% 0%);
    font-size: 100px;
    float: left;
    margin-right: -190px;
    transform: scale(1.09);
    
}
/*you can modify the background color of the textbox if you want*/
#page-7 #textboxstuff {
    font-size: 2rem;
    background-color: #DED6D6;
    border-radius: 10px 10px 10px 10px;
    width: 86vw;
    font-family: "Delius", cursive;
    font-weight: 400;
    font-style: normal;


    
}

/*This controls the tree image*/
#page-7 #page7tree {
    position: relative;
    top:  -40%;
    left: -39%;
    width: 100%;

}





#page-7 .hare-racer {
    height: 20vh;
    width: 20vw;
    position: absolute;
    top: 60%;
    left: 5%;
    z-index: 1;
}



#page-7 #hare-sleeping {
    opacity: 1;
    transform: translate(40vw, 0); 
    z-index: -2;
    animation: hare-fade-out-p7 0.5s 7.5s forwards;

}

#page-7 #hare-running { 
    opacity: 0;
    transform: translate(40vw, 0); 
    /* Chained animation separated by comma */
    animation: 
        hare-fade-in-p7 0.5s 7.5s forwards,
        hare-jump-to-tortoise 2s 9.5s ease-out forwards;

}

#page-7 #zzz-bubble {
    width: 10vw;
    height: 20vh;
    position: absolute;
    z-index: 2; 
    top: 50%; 
    left: 43%;
    opacity: 1; 
    animation: 
        /* 1. The bobbing animation (for 7.5s total) */
        zzz-bob-diagonal 1.5s ease-in-out alternate infinite,
        /* 2. The fade out (0.2s duration, starting at 7.5s) */
        hare-fade-out-p7 0.2s 7.5s forwards; 
    animation-iteration-count: 5s;

        

}

#page-7 #supprised-exclamation {
    width: 10vw;
    height: 10vh;
    transform: rotate(30deg);
    position: absolute;
    top: 53%;
    left: 55%;
    animation: supprised-exclamation 2s forwards 7.5s ;

    opacity: 0;

}

@keyframes hare-fade-out-p7 {
    100% {
        opacity: 0;
    }
}

@keyframes hare-fade-in-p7 {
    0% {
        opacity: 0; 
    }
    100% {
        opacity: 1;
    }
}

@keyframes supprised-exclamation {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes hare-jump-to-tortoise {
    0% {
        transform: translate(40vw, 0); 
    }
    
    25% {
        transform: translate(55vw, -40px);
    }
    

    50% {
        transform: translate(70vw, 0); 
    }
    
    /* 83% Peak of Jump 2 (Final section 70vw + 30vw = 100vw) */
    83% {
        /* Moves from 70vw to 85vw and arches up */
        transform: translate(85vw, -40px); 
    }
    
    /* 100% End: Hare moves completely off-screen (100vw) */
    100% {
        transform: translate(100vw, 0); 
    }
}

#page-8 {
    background-image: url("images/forest_page_8.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    overflow: hidden;

}



#page-8 #tortoise {
    height: 20vh;
    width: 20vw;
    position: absolute;
    top: 55%;
    left: 5%;
    z-index: 1;
    opacity: 1;
    animation: tortoise-walk-finish 10s forwards,
               tortoise-fade-out 0.5s 10s forwards; 
}


#page-8 #tortoise-new {
    height: 20vh;
    width: 20vw;
    position: absolute;
    top: 75%;
    right: 34%;
    z-index: 1;
    opacity: 0;
    animation: tortoise-fade-in 0.5s 10s forwards; 
}


#page-8 #hare {
    height: 20vh;
    width: 20vw;
    position: absolute;
    top: 55%; 
    left: 5%; 
    z-index: 1;
    opacity: 0;
    animation: 
        /* 1. The main jump-in animation */
        hare-jump-onto-scene 1s ease-out forwards, 
        
        /* 2. The chained fade-out animation: 0.5s duration, starting at 5s */
        hare-fade-out 5s 2s forwards; 
    animation-delay: 4s; 
}

#page-8 #hare-new {
    height: 20vh;
    width: 20vw;
    position: absolute;
    top: 55%;
    left: 5%;
    z-index: 1; 
    opacity: 0;
    
    /* apply the fade-in animation, starting at 5s */
    animation: hare-fade-in 0.5s 5s forwards; 
}

#page-8 #text-page-8 {
    width: 99vw;
    background-color: #DED6D6;
    font-size: 2rem;
    justify-content: center;
    position: absolute;
    top: 10%;
    border-radius: 10px 10px 10px 10px;
    font-family: "Delius", cursive;
    font-weight: 400;
    font-style: normal;
    
}

#page-8 #bear {
    height: 30vh;
    width: 20vw;
    position: absolute;
    top: 65%;
    right: 5%;
    z-index: 0;
    animation: crowd-jump 0.5s ease-in-out infinite alternate;

}

#page-8 #raccoon {
    height: 20vh;
    width: 10vw;
    position: absolute;
    top: 75%;
    right: 20%;
    z-index: 0;
    animation: crowd-jump 0.5s ease-in-out infinite alternate;

}

#page-8 #finish {
    width: 30vw;
    height: 50vh;
    position: absolute;
    top: 45%;
    right: 35%;
    transform: scale(1.75);
    z-index: 30;
}


@keyframes tortoise-walk-finish {
    0% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(2%, 30%);
    }
    50% {
        transform: translateX(5%, 50%);
    }
    100% {
        transform: translate(37vw, 20vh);
    }
}

@keyframes hare-jump-onto-scene {
    0% {
        /* Start position: Off-screen to the left, slightly below the final height */
        transform: translate(-20vw, 10px); 
        opacity: 1;
    }
    50% {
        /* Mid-jump: Arching up as it enters the viewport */
        transform: translate(-5vw, -20px); 
        opacity: 1;
    }
    100% {
        /* Final position: The element's defined position (left: 5%; top: 55%) */
        transform: translate(0, 0); 
        opacity:1
    }
}

@keyframes tortoise-fade-out {
    100% {
        opacity: 0; 
    }
}


@keyframes tortoise-fade-in {
    0% {
        opacity: 0; 
    }
    100% {
        opacity: 1; 
    }
}


@keyframes hare-fade-out {
    100% {
        opacity: 0; 
    }
}

@keyframes hare-fade-in {
    0% {
        opacity: 0; 
    }
    100% {
        opacity: 1; 
    }
}

#page-9 {
    background-image: url("images/forest_page_9.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    overflow: hidden;

}
 

/* Transparent Box */
.content-wrapper {
    height: 50vh;
    width: 60vw;
    position: absolute;
    top: 10%;
    left: 18%;

    text-align: center;
    padding: 40px; 
    
    background-color: black; 
    opacity: 0.7;
    
    border-radius: 15px; 
    
}

/*Text Appearance*/
.fade-in-text {
    font-family: "Quicksand", sans-serif;
    color: #f0f0f0;
    opacity: 0;
}

#the-end-page h1 {
    font-size: 7rem;
    letter-spacing: 0.5rem; 
    margin-bottom: 0.5rem;
    animation: simple-fade-in 3s ease-out forwards;
    animation-delay: 1s; 
    font-family: "Delius", cursive;
    font-weight: 400;
    font-style: normal;
}

#the-end-page p {
    font-size: 3rem;
    margin-top: 0;
    animation: simple-fade-in 3s ease-out forwards;
    animation-delay: 3s; 
    font-family: "Delius", cursive;
    font-weight: 400;
    font-style: normal;
}

#page-9 #tortoise-end {
    height: 20vh;
    width: 20vw;
    position: absolute;
    top: 80%;
    left: -10;
    animation: tortoise-walk-appear normal forwards 1s;
}

#page-9 #hare-end {
    height: 20vh;
    width: 20vw;
    position: absolute;
    top: 80%;
    right: -10;
    animation: jump-forward-appear normal forwards 1s;
}

@keyframes simple-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}