@import url(https://fonts.googleapis.com/css?family=Poppins);

@keyframes blurIn {
    0% {
        opacity: 0;
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}

body {
    /* The animation will take 0.6 seconds. Adjust this number to make it faster or slower. */
    animation: blurIn 0.3s ease-out forwards;
}

a {
    color: inherit;
    text-decoration: none;
}

.page-back {
    line-height: 1;
    overflow: hidden;
    /* position: absolute;  <-- REMOVE THIS LINE */
    position: relative; /* optional, only if you need positioning context */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: fit-content; /* changed from auto to fit-content to keep it compact */
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    box-sizing: border-box;
    text-decoration: none;
    border-radius: 999px;
    background: #d2d2d78f;
    font-family: 'Poppins', serif;
    color: #5f5f5f;
    transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
    margin-bottom: 20px; /* Now this margin will push the title down properly */
}

.page-back img {
    display: block;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.page-back::after {
    content: attr(aria-label);
    display: inline-block;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-width 0.3s ease, margin-left 0.3s ease;
}

.page-back:hover::after,
.page-back:focus-visible::after {
    opacity: 1;
    max-width: 30ch;
    margin-left: 10px;
}

.zoom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
    z-index: 9999;
}


.page-back-full {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Center content horizontally */
    gap: 10px;               /* Space between icon (if present) and text */
    
    /* Sizing & Shape */
    padding: 25px 50px;      /* Generous padding creates a balanced oval shape */
    border-radius: 999px;    /* Perfect pill/oval edges */
    box-sizing: border-box;
    width: fit-content;
    
    /* Colors matching .page-back */
    background: #d2d2d78f;
    color: #5f5f5f;
    font-family: 'Poppins', serif;
    font-size: 1rem;
    text-decoration: none;
    line-height: 1;
    transition: filter 0.2s ease;
}

.page-back-full:hover {
    filter: brightness(0.85); /* Darkens whatever background color is applied by 15% */
    cursor: pointer;
}

footer {
    display: flex;
    flex-direction: column; /* Stacks items vertically; remove if you want them side-by-side */
    align-items: center;    /* Centers items horizontally */
    justify-content: center;/* Centers items vertically if footer has explicit height */
    text-align: center;     /* Centers inline text content */
}