<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- from source -->
    <title>PRECIOUS ONEZ</title>
    <!--  -->

    <!-- style -->
    <link rel="stylesheet" href="wordfire.css">
    <style>
        #precious {
            --neutral-blue: #ccf;
            --purple: #63f;

            --background-image: url(img/preciousmkg_countrybreeze_1.gif);
        }

        body { background-color: var(--neutral-blue); background-image: var(--background-image); }

        a, a:active, a:visited { color: black; }

        #page {
            display: grid;
            gap: 0; grid-gap: 0;

            grid-template-columns: [c1] 10px [c2] 383px [c3] 381px [c4];
            grid-template-rows: [r1] 53px [r2] 42px [r3] 37px [r4] 89px [r5] 38px [r6] 49px [r7]
			27px [r8] 34px [r9] 40px [r10] 27px [r11] 35px [r12] 27px [r13] 32px [r14] 26px [r15]
			27px [r16] 28px [r17] 85px [r18] 49px [r19] 28px [r20] 269px [r21] 14px [r22];

            text-align: center;
            align-items: start;
            justify-items: start;
        }

        .js-center { justify-self: center; }

        h1 { padding: 0; margin: 0; }

        #current {
            font-weight: 700;
            text-decoration: none;
        }

        h2 {
            color: var(--purple);
            font-weight: 700;
            font-size: 32px;
            padding: 0; margin: 0;
        }
    </style>

    <!-- archive menu -->
    <script src="/menu.js" type="module"></script>
</head>
<body id="precious">
<div id="page">
    <!-- header -->
    <div class="js-center" style="grid-column: c2/c4; grid-row: r1/r2;">
        <h1>petz** WORDFIRE'S**petz</h1>
    </div>

    <!-- nav -->
    <div class="js-center" style="grid-column: c2/c4; grid-row: r2/r3; padding-top: 5px;">
        <a href="index.html">Home</a> |
        <a href="play1.html">PETZ PLAYSCENZ</a> |
        <a href="play2.html">MORE PLAYSCENZ</a> |
        <a href="play3.html">AND>>>>MORE PETZ PLAYSCENZ</a> |
        <a href="possums.html">'POSSUMS</a> |
        <a href="play4.html">COMPLETED PLAYSCENZ</a> |
        <a href="sound.html">Sound Files</a> |
        <a href="precious.html" id="current">PRECIOUS ONEZ</a>
    </div>

    <!-- header 2 -->
    <div style="grid-column: c2/c3; grid-row: r3/r4;">
        <h2>PRECIOUS ONEZ</h2>
    </div>

    <!-- divider -->
    <div class="js-center" style="grid-column: c2/c4; grid-row: r4/r5; padding-top: 5px;">
        <img src="img/precious_mkg_countrybreeze_2.gif">
    </div>

    <div style="grid-column: c2/c4; grid-row: r5/r6; padding-left: 5px;">
        <i class="big" style="font-weight: 700; background-color: #cfc; color: #039;">
            BABY!!! YOUR ALL THAT AND A BAG OF CHIPS!
        </i>
    </div>

    <div class="js-center georgia medium" title="missing" style="grid-column: c2/c4; grid-row:
		r6/r7;">
        love_007.gif
    </div>

    <!-- left col -->
    <div class="small arial js-center center" style="grid-column: c2/c3; grid-row: r7/r10;">
        SHHHH
        <div style="background-image: url(img/precious_frame_dkblue_canvas.gif); padding:
			15px; height: 20px; width: 80px; margin: 0 auto;">
				<span class="georgia medium" title="missing" style="background-image:
				url(img/preciousmkg_countrybreeze_1.gif);">
					sleeper.jpg
				</span>
        </div>
        DON'T Even THINK About Touchin Those<br>Cheeks!!!
    </div>

    <div class="js-center small arial" style="grid-column: c2/c3; grid-row: r10/r13;">
        ANOTHER SAMPSON?????
        <div style="background-image: url(img/precious_frame_blue_pinstripe.gif); padding:
			15px; height: 20px; width: 100px; margin: 0 auto;">
            <u class="georgia medium" title="missing" style="background-image:
				url(img/preciousmkg_countrybreeze_1.gif);">
                kristoffer.jpg
            </u>
        </div>
        HEY GUYS>>>ARE THESE TREES STRAIGHT YET? click to enlarge
    </div>

    <div style="grid-column: c2/c3; grid-row: r14/r15; margin-left: 5px; margin-right: 10px;
		border-bottom: 2px solid #c30; justify-self: stretch; align-self: stretch;"></div>

    <div class="arial" style="grid-column: c2/c3; grid-row: r16/r17; margin-left: 10px;">
        coming soon!1
    </div>

    <!-- right col -->
    <div class="js-center small arial" style="grid-column: c3/c4; grid-row: r7/r10;">
        FEED ME!!!!
        <div style="background-image: url(img/precious_frame_wood2.gif); padding: 15px; height:
			20px; width: 70px; margin: 0 auto;">
				<span class="georgia medium" title="missing" style="background-image:
				url(img/preciousmkg_countrybreeze_1.gif);">
					halie.jpg
				</span>
        </div>
        MOM.. YOU NEED SOME COOKING<br>
        LESSONS!!
    </div>

    <div class="small arial js-center" style="grid-column: c3/c4; grid-row: r10/r13;">
        THE WHOLE ENCHELADA!!!<br>
        <u class="georgia medium" title="missing" style="border: 15px solid #000; display:
			block;">
            dewfamily.jpg
        </u>
        click to enlarge
    </div>

    <div class="arial" style="grid-column: c3/c4; grid-row: r13/r14; padding-left: 10px;">
        Enter images and other content here
    </div>

    <div class="georgia medium" title="missing" style="grid-column: c3/c4; grid-row: r14/r15;
		margin-left: 10px; justify-self: stretch; align-self: stretch; text-align: right;
		border-bottom: 2px solid #c30;">
        baby_walking.gif
    </div>

    <div class="arial" style="grid-column: c3/c4; grid-row: r16/17; padding-left: 15px;">
        more coming soon>>
    </div>

    <!-- divider -->
    <div class="js-center" style="grid-column: c2/c4; grid-row: r17/r18;">
        <img src="img/precious_mkg_countrybreeze_2.gif">
    </div>

    <div class="courier" style="grid-column: c2/c4; grid-row: r18/r19; font-style: italic;
		text-align: left;">
        <b style="color: #c0c;">
            ALL PRECIOUS ONEZ NEED A PLACE OF HONOR>>THIS MOM IS TRULY Blessed
        </b>
        <a href="mailto:wordfire@earthlink.net" style="color: #000;">wordfire@earthlink.net</a>
        <span style="background-color: #ffc;">
				<b class="medium" style="color: #03f;">Arbery>>Arianna>>Rebekah>>Jennifer>> call
				home!!!!</b>
				&nbsp;
				<b class="small" style="color: #939;">lol</b>
			</span>
    </div>

    <div class="georgia medium js-center" style="grid-column: c2/c4; grid-row: r19/r20;">
        sitedogs.jpg
    </div>

    <!-- god -->
    <div class="small arial center" style="grid-column: c3/c4; grid-row: r20/r21;
			justify-self: end; align-self: end; color: #000; font-weight: 700;">
        The Life,Truth and Power<br>
        Of GOD<br>
        <img src="img/index_animation.gif" width="130" alt="animation.gif"><br>
        WORDFIRE

        <br><br>

        Lots Of KEWL Stuff Here<br>
        <a href="http://pineconecattery.com" target="tlx_new">
            <img src="img/index_judysbanner.jpg" width="130">
        </a><br>
        Edited Versions Also<br>
        Available Of These<br>
        Playscenz
    </div>
</div>
</body>
</html>