/* Decorative image on the right side (rakka) - enlarged variant */
.decor-right {
    position: fixed;
    right: 24px;               /* move slightly closer to the edge */
    bottom: 0;                 /* always flush to the viewport bottom */
    transform: none;           /* keep element at the specified bottom */
    z-index: 1;                /* keep behind .content (which is z-index:2) */
    pointer-events: none;      /* decorative only, don't block clicks */
    display: block;
    max-height: 100vh;         /* allow the element to use full viewport height if needed */
    width: auto;
}

.decor-right img {
    display: block;
    max-height: calc(100vh - 24px); /* keep the whole image visible above the bottom gutter */
    height: auto;
    width: auto;
    object-fit: contain; /* ensure aspect ratio is preserved */
    pointer-events: none;
    /* Make each image positioned absolutely so multiple images overlap instead of stacking vertically */
    position: absolute;
    right: 0;
    bottom: 0;
}

/* Optional helper: add class "layer-offset" to images you want slightly offset for a layered look.
   By default images placed later in the DOM will paint on top of earlier images. */
.decor-right img.layer-offset:nth-of-type(1) { transform: translate(0,0); z-index: 1; }
.decor-right img.layer-offset:nth-of-type(2) { transform: translate(-12px,-12px); z-index: 2; }
.decor-right img.layer-offset:nth-of-type(3) { transform: translate(-24px,-24px); z-index: 3; }

/* If you prefer every image to be centered above the previous one, keep them all at same position
   (no transform) — the later element will appear on top automatically. */

/* Target the specific decorative image file and make it a bit smaller without changing its class */
.decor-right img[src$="rakka.png"] {
    max-height: 65vh;
    width: auto;
}


.decor-left {
    position: fixed;
    left: 24px;               /* move slightly closer to the edge */
    bottom: 0;                 /* always flush to the viewport bottom */
    transform: none;           /* keep element at the specified bottom */
    z-index: 1;                /* keep behind .content (which is z-index:2) */
    pointer-events: none;      /* decorative only, don't block clicks */
    display: block;
    max-height: 100vh;         /* allow the element to use full viewport height if needed */
    width: auto;
}
.decor-left img {
    display: block;
    max-height: calc(100vh - 24px); /* keep the whole image visible above the bottom gutter */
    height: auto;
    width: auto;
    object-fit: contain; /* ensure aspect ratio is preserved */
    pointer-events: none;
    /* Make each image positioned absolutely so multiple images overlap instead of stacking vertically */
    position: absolute;
    left: 0;
    bottom: 0;
}
.decor-left img.layer-offset:nth-of-type(1) { transform: translate(0,0); z-index: 1; }
.decor-left img.layer-offset:nth-of-type(2) { transform: translate(-12px,-12px); z-index: 2; }
.decor-left img.layer-offset:nth-of-type(3) { transform: translate(-24px,-24px); z-index: 3; }