:root {
    --bg-image: url('https://i.pinimg.com/736x/23/dc/d2/23dcd2e0faebc5222f0e998b3087a61b.jpg');
    --cursor: url('https://64.media.tumblr.com/9671a1cafb3f61b15bd51f21a005b80e/12682c3cd7f7aac0-29/s75x75_c1/1420af199c3c068e49b4f15dc93e4070ef1eaccf.pnj');
}

body {
    /* 1. Use the image from your variables */
    background-image: var(--bg-image);

    /* 2. 'auto' keeps the image at its original width and height */
    background-size: auto !important;

    /* 3. 'repeat' tiles it horizontally and vertically */
    background-repeat: repeat !important;

    /* 4. Keeps the background from scrolling with the page */
    background-attachment: fixed;

    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

body {
    background: var(--bg-image) fixed;
    background-size: cover;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    cursor: var(--cursor), auto;
    overflow-x: hidden;
}

/* --- THE LACE (FIXED FOR RUFFLES) --- */
.cute-divider {
    width: 100%;
    /* We make the height bigger (120px) so the ruffles aren't cut off */
    height: 120px; 
    background-image: url('https://64.media.tumblr.com/8d2ddc5f09dbf54383b8dedea19f7d82/829d8f12da12264d-9d/s1280x1920/458836c59174870475490a5d318515ca7e5ff2f3.pnj');
    background-repeat: repeat-x;
    
    /* This makes the lace smaller but keeps its ruffled shape */
    background-size: auto 100px; 
    
    position: fixed;
    left: 0;
    z-index: 999999;
    pointer-events: none;
}

.top {
    top: -20px; /* Pulls it slightly off-screen to hide the flat top edge */

}

/* --- NOTEBOOK --- */
.notebook-wrapper {
    width: 1100px;
    position: relative;
    z-index: 10;
}

.notebook-bg {
    width: 100%;
    display: block;
}

area {
    cursor: var(--cursor), pointer;
}