.Paper-Section {
    position: absolute; /* Changed to fixed for consistent centering */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 20; /* Increased z-index to ensure visibility */
    width: auto; /* Matches the width of the image */
    height: auto; /* Matches the height of the image */
}

.Paper-Section img {
    display: block;
    max-width: 100%;
    height: auto;
}

.button-container {
    position: relative; /* Allows explicit positioning */
    top: 270px; /* Moves the buttons slightly up */
    margin-top: 5%; /* Adds spacing below the section */
    margin-bottom: 10px; /* Adds spacing between the buttons and the image */
    display: flex;
    justify-content: center;
    gap: 15px;
    z-index: 25; /* Ensures buttons are above the section */
}

.button-container button {
    height: 50px; /* Reset the height to its original value */
    width: 120px; /* Correctly increase the width of the buttons */
    padding: 0; /* Removes extra padding */
    font-size: 1em;
    font-family: 'MagicalNeverland', cursive; /* Fantasy-stijl lettertype */
    background: linear-gradient(150deg, #4b5320, #8b4513); /* Groene en bruine tinten */
    color: #ffffff; /* Witte tekst voor beter contrast */
    border: 2px solid #3f3e0856; /* Bruine rand */
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animatie voor hover-effect */
    box-shadow: 0 0 15px rgba(105, 50, 11, 0.8), 0 0 30px rgba(75, 83, 32, 0.5); /* Gloed in bruine en groene tinten */
}

.button-container button:hover {
    transform: scale(1.1); /* Vergroot de knop bij hover */
    box-shadow: 0 0 25px rgb(102, 51, 14), 0 0 50px rgba(75, 83, 32, 0.8); /* Intensere gloed bij hover */
}

.button-container button:nth-child(1) {
    position: relative;
    top: 5px; /* Slightly lower the first button */
}

.button-container button:nth-child(2),
.button-container button:nth-child(3) {
    position: relative;
    top: -5px; /* Raise the middle buttons slightly */
}

.button-container button:nth-child(4) {
    position: relative;
    top: 5px; /* Slightly lower the last button */
}

.text-section {
    font-size: 1.5rem; /* Slightly reduce the text size */
    position: absolute; /* Ensure the text is positioned independently */
    top: 57%; /* Center vertically within the viewport */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for perfect centering */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Arrange text vertically */
    z-index: 30; /* Ensure the text is above other elements */
    color: rgba(65, 54, 42, 0.842); /* Ensure text color is visible */
}

.text-section p {
    margin-top: 0; /* Remove additional margin */
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.typing-effect {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid;
    animation: typing 2s steps(30, end), blink-caret 0.5s step-end infinite;
}

@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: black;
    }
}

/* CSS voor de standaardtekst */
#default-text {
    font-family: 'MagicalNeverland', serif;
    font-size: 24px;
    color: #442b16e1;
    text-shadow: 2px 2px 5px #96533f;
    text-align: center;
}

/* Voeg schaduw toe aan de tekst die verschijnt na het klikken op de knoppen */
.dynamic-text {
    text-shadow: 2px 2px 5px #96533f;
    animation: text-move-down 1s ease-out forwards; /* Tekst beweegt naar beneden met een animatie */
}

/* Animatie voor het verplaatsen van de tekst naar beneden */
@keyframes text-move-down {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(20px);
    }
}

/* Animatie voor de knop die verschijnt na de tekst */
@keyframes button-appear {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.dynamic-button {
    animation: button-appear 1s ease-out forwards; /* Verlengde duur naar 1 seconde */
}

/* Nieuwe animatie voor de knop */
@keyframes button-slide-fade {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    50% {
        opacity: 0.5;
        transform: translateX(0);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.dynamic-button {
    animation: button-slide-fade 1s ease-out forwards; /* Nieuwe animatie met een slide en fade-in effect */
}

/* Stijl de knop zoals de navigatieknoppen */
.dynamic-button {
    height: 50px;
    width: 120px;
    padding: 0;
    font-size: 0.9em; /* Verklein de tekstgrootte van de knop */
    font-family: 'MagicalNeverland', cursive;
    background: linear-gradient(150deg, #4b5320, #8b4513);
    color: #ffffff;
    border: 2px solid #3f3e08;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0 15px rgba(105, 50, 11, 0.8), 0 0 30px rgba(75, 83, 32, 0.5);
}

.dynamic-button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgb(102, 51, 14), 0 0 50px rgba(75, 83, 32, 0.8);
}

/* Pas de breedte en padding van de knop aan om de tekst te laten passen */
.dynamic-button {
    width: auto; /* Zorg ervoor dat de breedte zich aanpast aan de tekst */
    padding: 0 15px; /* Voeg horizontale padding toe voor ruimte rondom de tekst */
}

/* Restore the original CSS edits for navigation paper styling */

/* Verplaats de knop iets naar beneden */
.dynamic-button {
    margin-top: 30px; /* Voeg extra marge boven de knop toe om deze naar beneden te verplaatsen */
}