/* Button styling */
button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 40px;
    font-size: 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

/* Set up the body */
html, body {
    margin: 0;
    min-height: 100vh; /* Ensures at least full viewport height */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Content moves to the bottom */
    align-items: center;
    box-sizing: border-box; /* Helps with padding and border calculations */
    height: 100%; /* Prevent recalculation during animations */
    width: 100%; 
    overflow-x: hidden; /* Prevent snapping due to horizontal overflow */
}
@viewport {
    viewport-fit: cover;
}


/* Walking animation */
@keyframes walk {
    0% {
        left: -100px; /* Start at the left edge of the screen */
    }
    100% {
        left: calc(50vw - 100px); /* Stop before moving completely off-screen */
    }
}

/* Ant image (updated to play animation once) */
img {
    position: absolute;
    bottom: 10px;
    left: -100px; /* Start from off-screen */
    width: 250px;
    height: auto;
    animation: walk 10s linear 1, wobble 0.5s ease-in-out infinite; /* Only wobble infinitely */
}


/* Wobble animation */
@keyframes wobble {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px); /* Slight upward wobble in the middle */
    }
}

/* Hidden text (initially hidden) */
.hidden-text {
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    top: -50px; /* Hidden above the screen initially */
    transform: translate(-50%, 0); /* Perfect centering */
    opacity: 0;
    transition: top 0.8s ease-in-out, opacity 0.8s ease-in-out;
}
.hidden-text-new {
    font-family: 'Fredoka One', sans-serif;
    display: block;
    white-space: normal; /* Allows text to wrap */
    overflow-y: auto; /* Scrollable if text is too long */
    font-size: calc(12px + (12 - 8) * ((100vw - 300px) / (1600 - 300))); /* Responsively adjusted font size */
    max-height: 75vh; /* Limit height to 50% of the viewport height */
    line-height: 1.2; /* Maintain readability */
    padding: 20px; /* Adjust padding around the text */
    background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent background */
    border-radius: 0 0 8px 8px; /* Only round the bottom corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    position: fixed; /* Keeps text inside the visible viewport */
    top: 0; /* Start at the very top */
    left: 0; /* Align with the left edge */
    right: 0; /* Align with the right edge */
    transform: none; /* Remove centering transform */
    text-align: center; /* Center the text inside the box */
    z-index: 1000; /* Ensure it appears on top of other elements */
    will-change: transform, clip-path;
}


.container {
    position: relative; /* Noodzakelijk voor het centreren van het kindelement */
    height: 100vh; /* De container vult het volledige scherm */
    width: 100%; /* Breedte van de container */
    display: flex; /* Flexbox kan ook worden gebruikt als alternatief */
    align-items: center; /* Verticale uitlijning */
    justify-content: center; /* Horizontale uitlijning */
}


/* Text when visible with a slight hang */
.show {
    top: 100px; /* Position where it drops down */
    opacity: 1;
    animation: hang 0.5s ease-in-out 0.8s; /* Add a slight hanging effect */
}

/* Slight hanging effect after the drop */
@keyframes hang {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}