/* --- Import a pixel font from Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/* --- 1. Body & Canvas Styling --- */
body {
    /* The black background color */
    background-color: #000;
    
    /* * This is the subtle tiled background image from their site.
     * We'll link directly to it for this example.
     */
    background-image: url('https://static.wixstatic.com/media/0360d7_3c9710a999a348508e69e300ce65ad78~mv2.jpg/v1/fill/w_192,h_192,al_c,q_80,usm_0.66_1.00_0.01,blur_1,enc_auto/0360d7_3c9710a999a348508e69e300ce65ad78~mv2.jpg');
    
    /* This makes the image tile, just like theirs */
    background-repeat: repeat;
    
    margin: 0;
    padding: 40px; /* Give some breathing room */
}

/* * The "canvas" that holds all items.
 * position: relative; is the most important part.
*/
.garden-canvas {
    position: relative;
    width: 100%;
    min-height: 3000px; /* Give yourself plenty of vertical space */
}

/* --- 2. Item Styling (No "Paper" Look) --- */
.item {
    position: absolute; /* The "magic" to let us place it anywhere */
    
    /* * NO border, background, or shadow.
     * This makes it look like the image is floating
     * directly on the canvas, just like their site.
    */
    
    /* A smooth transition just in case you add rotations/hovers later */
    transition: transform 0.2s ease-in-out;
}

/* * 3. Text Styling (Pixel Font) 
 * We'll create a special class for text boxes
*/
.item.text-box {
    font-family: 'VT323', monospace; /* Use the pixel font */
    color: #FFFFFF; /* White text */
    font-size: 24px;  /* Pixel fonts look better a bit larger */
    line-height: 1.2;
    
    /* Optional: A very subtle shadow to help it stand out */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* Make sure all images fit inside their "item" container */
.item img {
    width: 100%;
    display: block;
}