From d61cb2df51e25aac68b09f25a89e248db3134a1b Mon Sep 17 00:00:00 2001
From: marleyrae <marleyrae@protonmail.com>
Date: Fri, 9 Jun 2023 13:55:00 -0700
Subject: [PATCH] php -> html: wordfire + fix menu

---
 .idea/git_toolbox_prj.xml                    |   1 -
 .idea/inspectionProfiles/Project_Default.xml |  25 +-
 index.html                                   |   2 +-
 menu.js                                      |  10 +-
 package.json                                 |   5 +
 vite.config.js                               |  38 +-
 wordfire/TODO.txt                            |   2 +-
 wordfire/config.js                           |  41 ++
 wordfire/{index.php => index.html}           | 546 ++++++++++---------
 wordfire/play1.html                          | 161 ++++++
 wordfire/play1.php                           | 153 ------
 wordfire/play2.html                          | 226 ++++++++
 wordfire/play2.php                           | 224 --------
 wordfire/play3.html                          | 204 +++++++
 wordfire/play3.php                           | 199 -------
 wordfire/play4.html                          | 243 +++++++++
 wordfire/play4.php                           | 238 --------
 wordfire/possums.html                        | 185 +++++++
 wordfire/possums.php                         | 180 ------
 wordfire/precious.html                       | 205 +++++++
 wordfire/precious.php                        | 201 -------
 wordfire/sound.html                          | 181 ++++++
 wordfire/sound.php                           | 182 -------
 wordfire/vars.php                            |  39 --
 24 files changed, 1797 insertions(+), 1694 deletions(-)
 create mode 100644 wordfire/config.js
 rename wordfire/{index.php => index.html} (82%)
 create mode 100644 wordfire/play1.html
 delete mode 100644 wordfire/play1.php
 create mode 100644 wordfire/play2.html
 delete mode 100644 wordfire/play2.php
 create mode 100644 wordfire/play3.html
 delete mode 100644 wordfire/play3.php
 create mode 100644 wordfire/play4.html
 delete mode 100644 wordfire/play4.php
 create mode 100644 wordfire/possums.html
 delete mode 100644 wordfire/possums.php
 create mode 100644 wordfire/precious.html
 delete mode 100644 wordfire/precious.php
 create mode 100644 wordfire/sound.html
 delete mode 100644 wordfire/sound.php
 delete mode 100644 wordfire/vars.php

diff --git a/.idea/git_toolbox_prj.xml b/.idea/git_toolbox_prj.xml
index 4e57990..02b915b 100644
--- a/.idea/git_toolbox_prj.xml
+++ b/.idea/git_toolbox_prj.xml
@@ -9,7 +9,6 @@
     <option name="commitMessageValidationEnabledOverride">
       <BoolValueOverride>
         <option name="enabled" value="true" />
-        <option name="value" value="true" />
       </BoolValueOverride>
     </option>
   </component>
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 285046d..3720826 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -1,8 +1,31 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <option name="scopesOrder">
+      <list>
+        <option value="All Changed Files" />
+        <option value="Open Files" />
+        <option value="Project Files" />
+        <option value="Root Only" />
+        <option value="Scratches and Consoles" />
+        <option value="Tests" />
+      </list>
+    </option>
+    <inspection_tool class="CheckImageSize" enabled="false" level="WARNING" enabled_by_default="false" />
+    <inspection_tool class="GrazieInspection" enabled="true" level="GRAMMAR_ERROR" enabled_by_default="false">
+      <scope name="Root Only" level="GRAMMAR_ERROR" enabled="true" />
+    </inspection_tool>
+    <inspection_tool class="HtmlRequiredAltAttribute" enabled="false" level="WARNING" enabled_by_default="false" />
     <inspection_tool class="HttpUrlsUsage" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
-    <inspection_tool class="SpellCheckingInspection" enabled="true" level="TYPO" enabled_by_default="true">
+    <inspection_tool class="LanguageDetectionInspection" enabled="true" level="WARNING" enabled_by_default="false">
+      <scope name="Root Only" level="WARNING" enabled="true" />
+    </inspection_tool>
+    <inspection_tool class="SpellCheckingInspection" enabled="true" level="TYPO" enabled_by_default="false">
+      <scope name="Root Only" level="TYPO" enabled="true">
+        <option name="processCode" value="false" />
+        <option name="processLiterals" value="true" />
+        <option name="processComments" value="true" />
+      </scope>
       <option name="processCode" value="false" />
       <option name="processLiterals" value="true" />
       <option name="processComments" value="true" />
diff --git a/index.html b/index.html
index 648d334..81a1c31 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
 
     <div id="nav">
         <a href="petz5world/index.php">Petz 5 World</a> /
-        <a href="wordfire/index.php">Wordfire's Petz</a>
+        <a href="wordfire/index.html">Wordfire's Petz</a>
     </div>
 
     <div id="content">
diff --git a/menu.js b/menu.js
index 252ea55..7dfe2f7 100644
--- a/menu.js
+++ b/menu.js
@@ -1,3 +1,9 @@
+/* -------------------------------------------------------------------------------------- find and import config ---- */
+
+const siteRoot = '/' + location.pathname.split('/')[1]
+const {wayback} = await import(`${siteRoot}/config.js`)
+
+/* -------------------------------------------------------------------------------------------------- build menu ---- */
 let menu = document.createElement('div')
 menu.id = 'archive-menu'
 
@@ -13,16 +19,14 @@ archiveRoot.innerText = 'Home'
 menu.append(archiveRoot)
 
 let changelog = document.createElement('a')
-/** @var siteRoot */
 changelog.setAttribute('href', `${siteRoot}/CHANGELOG.txt`)
 changelog.setAttribute('target', '_blank')
 changelog.innerText = 'Changelog'
 menu.append(changelog)
 
-/** @var wayback */
 if (wayback) {
     let waybackLink = document.createElement('a')
-    waybackLink.setAttribute('href', wayback)
+    waybackLink.setAttribute('href', `https://web.archive.org/web/${wayback}`)
     waybackLink.setAttribute('target', '_blank')
     waybackLink.innerText = 'Wayback Capture'
     menu.append(waybackLink)
diff --git a/package.json b/package.json
index b92bdd2..ef7893e 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,10 @@
 {
   "dependencies": {
     "vite": "^4.3.9"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   }
 }
diff --git a/vite.config.js b/vite.config.js
index 7830f95..cd3f8cd 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,3 +1,39 @@
 import {defineConfig} from 'vite'
+import {resolve} from 'node:path'
+import {homedir} from 'node:os'
+import fs from 'node:fs'
 
-export default defineConfig({})
+// noinspection JSUnusedGlobalSymbols
+export default defineConfig({
+    build: {
+        rollupOptions: {
+            input: {
+                main: resolve(__dirname, 'index.html'),
+                wordfire: resolve(__dirname, 'wordfire/index.html'),
+            },
+        },
+    },
+    server: detectServerConfig('saudade.test'),
+})
+
+function detectServerConfig(host) {
+    let keyPath = resolve(homedir(), `.config/valet/Certificates/${host}.key`)
+    let certificatePath = resolve(homedir(), `.config/valet/Certificates/${host}.crt`)
+
+    if (!fs.existsSync(keyPath)) {
+        return {}
+    }
+
+    if (!fs.existsSync(certificatePath)) {
+        return {}
+    }
+
+    return {
+        hmr: {host},
+        host,
+        https: {
+            key: fs.readFileSync(keyPath),
+            cert: fs.readFileSync(certificatePath),
+        },
+    }
+}
diff --git a/wordfire/TODO.txt b/wordfire/TODO.txt
index e28f6cb..7d265a8 100644
--- a/wordfire/TODO.txt
+++ b/wordfire/TODO.txt
@@ -6,4 +6,4 @@ INDEX
 	* possums (id12.html)
 	* play4 (id13.html)
 	* sound (id14.html)
-	precious (id2.html)
\ No newline at end of file
+	* precious (id2.html)
diff --git a/wordfire/config.js b/wordfire/config.js
new file mode 100644
index 0000000..a60af91
--- /dev/null
+++ b/wordfire/config.js
@@ -0,0 +1,41 @@
+const currentPage = location.pathname.split('/').pop().split('.')[0]
+const waybackSiteBase = 'http://home.earthlink.net/~wordfire/'
+
+const pageMetadata = {
+    index: {
+        captureId: '20050913215113',
+        sourcePageName: '',
+    },
+    play1: {
+        captureId: '20050911044611',
+        sourcePageName: 'id1.html',
+
+    },
+    play2: {
+        captureId: '20050911220624',
+        sourcePageName: 'id5.html',
+    },
+    play3: {
+        captureId: '20050912163724',
+        sourcePageName: 'id6.html',
+    },
+    possums: {
+        captureId: '20050905152820',
+        sourcePageName: 'id12.html',
+    },
+    play4: {
+        captureId: '20050912184232',
+        sourcePageName: 'id13.html',
+    },
+    sound: {
+        captureId: '20050413012516',
+        sourcePageName: 'id14.html',
+    },
+    precious: {
+        captureId: '20050413012604',
+        sourcePageName: 'id2.html',
+    },
+}
+
+const wayback = waybackSiteBase + pageMetadata[currentPage].captureId + pageMetadata[currentPage].sourcePageName
+export default wayback
diff --git a/wordfire/index.php b/wordfire/index.html
similarity index 82%
rename from wordfire/index.php
rename to wordfire/index.html
index b76fda0..851021f 100644
--- a/wordfire/index.php
+++ b/wordfire/index.html
@@ -1,270 +1,276 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-	<!-- from source -->
-	<meta name="keywords" content="PETZ 4&amp;5 Playscenz  unedited versions">
-	<title>WORDFIRE'S</title>
-	<!--  -->
-
-	<!-- style -->
-	<link rel="stylesheet" href="style/style.css">
-	<style>
-		a { color: #06c; }
-		a:active { color: #909; }
-		a:visited { color: #06c; }
-
-		.blue { color: #039 !important; }
-		.center { text-align: center; }
-		.red { color: #c00 !important; }
-		.purple { color: #909 !important; }
-
-		/* fuck table layouts thanks!!! */
-
-		#top-left {
-			float: left;
-			width: 149px;
-			height: 124px;
-
-			background-color: #336;
-			border: 2px solid #93c;
-		}
-
-		#header {
-			float: left;
-			width: 600px;
-			height: 124px;
-			padding: 0;
-
-			background-image: url(img/index_clouds.jpg);
-			border: 2px solid #93c;
-			border-left: none;
-			text-align: center;
-		}
-
-		#nav {
-			clear: both;
-			float: left;
-			width: 149px;
-			height: 1361px;
-
-			background-color: #336;
-			border: 2px solid #93c;
-			border-top: none;
-		}
-
-		#content {
-			float: left;
-			width: 592px;
-			height: 1353px;
-			padding: 4px;
-
-			border: 2px solid #93c;
-			border-left: none;
-			border-top: none;
-		}
-
-		/* header style */
-
-		#header h1 {
-			font-size: 48px;
-			font-weight: 700;
-			color: #c0f;
-			font-style: italic;
-			text-decoration: underline;
-			margin: 0;
-			padding: 0;
-		}
-
-		/* nav style */
-
-		#nav {
-			text-align: center;
-		}
-
-		#nav .spacer {
-			height: 28px;
-		}
-
-		.nav-current, .nav-btn {
-			display: flex;
-    		flex-direction: column;
-    		justify-content: center;
-			width: 145px;
-			height: 26px;
-			margin-bottom: 2px;
-			padding: 3px;
-
-			text-decoration: none;
-			color: #fff;
-			font-weight: 700;
-		}
-
-		.tall { height: 42px; }
-
-		.nav-current {
-			background-color: #009;
-		}
-
-		.nav-btn {
-			background-color: #909;
-		}
-
-		.nav-current:hover, .nav-btn:hover {
-			background-color: #ccf;
-			text-decoration: underline;
-		}
-
-		.nav-current:visited, .nav-btn:visited {
-			color: #fff;
-		}
-
-		/* content style */
-
-		#content h2 { font-size: 24px; font-style: italic; }
-
-		/* seriously fuck tables */
-
-		#content #canvas-border {
-			display: table;
-			margin: 0 auto;
-			width: 160px;
-			height: 180px;
-			background-image: url(img/index_frame_dkblue_canvas.gif);
-		}
-
-		#content #canvas-border img { margin: 15px; }
-
-		/* has no one heard of the border attribute ????????????? */
-
-		#hellbox {
-			border: 2px solid #609;
-			width: 580px;
-			height: 174px;
-			margin: 0 auto;
-			background-color: #ffc;
-		}
-
-		#hellbox2 {
-			border: 2px ridge #f69;
-			width: 567px;
-			height: 160px;
-			padding: 5px;
-
-			color: #306;
-			font-size: 24px;
-			font-weight: 900;
-			font-family: 'Times New Roman', Times, serif;
-		}
-
-		#hellbox2 img {
-			padding-top: 15px;
-		}
-
-		#wood-border {
-			display: table;
-			margin: 20px auto;
-			width: 330px;
-			height: 255px;
-			background-image: url(img/index_frame_wood2.gif);
-		}
-
-		#wood-border img { margin: 15px; }
-
-		.purple-line {
-			height: 2px;
-			width: 285px;
-			background-color: #93c;
-			float: left;
-			margin: 5px;
-		}
-
-		#bravenet { margin: 40px 30px; clear: both; }
-	</style>
-</head>
-<body>
-<?php include '../_menu.php'; ?>
-	<div id="top-left"></div>
-
-	<div id="header">
-		<h1>petz**<br>
-		WORDFIRE'S**petz</h1>
-	</div>
-
-	<div id="nav">
-		<div class="spacer"></div>
-
-		<a href="index.php" class="nav-current">Home</a>
-		<a href="play1.php" class="nav-btn">PETZ PLAYSCENZ</a>
-		<a href="play2.php" class="nav-btn">MORE PLAYSCENZ</a>
-		<a href="play3.php" class="nav-btn tall">AND>>>MORE PETZ PLAYSCENZ</a>
-		<a href="possums.php" class="nav-btn">'POSSUMS</a>
-		<a href="play4.php" class="nav-btn tall">COMPLETED PLAYSCENZ</a>
-		<a href="sound.php" class="nav-btn">Sound Files</a>
-		<a href="precious.php" class="nav-btn">PRECIOUS ONEZ</a>
-	</div>
-
-	<div id="content">
-		<img src="img/index_fire_line_2.gif" alt="fire_line_2.gif" width="560" style="margin: 0
-		auto; display: table;">
-
-		<h2 class="red">
-			FOR MORE PETZ BACKGROUNDS, SOUND FILES AND PLAYSCENZ IN THE FUTURE VISIT><a class="red"
-			href="https://web.archive.org/web/20050912012413/http://home.earthlink.net/~lindajoyce/">http://home.earthlink.net/~lindajoyce/</a>
-			oz yellow brick road and music available there now!!!!
-		</h2>
-
-		<p class="red small arial center">
-			<b><i>EVEN PETZ PRAISE HIM</i></b>
-			<div id="canvas-border" style="margin-top: -10px;">
-				<img src="img/index_tigertheangel.jpg" width="130">
-			</div>
-		</p>
-
-		<div id="hellbox">
-			<div id="hellbox2">
-				<i>THIS IS A PETZ 4&5 SITE**ALL ORIGINAL UNEDITED PLAYSCENZ  BACKGROUNDS JUST
-				WAITING FOR YOU**wordfire**</i><br>
-				<img src="img/index_vote1.gif">
-			</div>
-		</div>
-
-		<div id="wood-border">
-			<img src="img/index_pupkit03.jpg" alt="pupkit03.jpg" width="300">
-		</div>
-
-		<p style="font-style: italic; font-weight: 900;" class="purple arial">
-			<span class="big blue">KUDOS:</span>THANK YOU CAROLYN,JUDY, PEEPS AT APKC FORUMS&
-			MINIBYTE
-		</p>
-
-		<p>.</p>
-
-		<p>&nbsp;</p>
-
-		<div class="purple-line"></div>
-		<div class="purple-line"></div>
-
-		<div id="bravenet">
-			<a href="guestbook.php"><img src="img/index_guestbook.gif" title="Free Guestbook from
-				Bravenet" alt="Free Guestbook from Bravenet"></a>
-			
-			<a href="https://www.bravenet.com/"><img src="img/index_bn-guestbook.gif" title="Free
-				Guestbook from Bravenet" alt="Free Guestbook from Bravenet"></a>
-		</div>
-
-		<div id="god" class="small arial">
-			<b>The Life,Truth and Power Of GOD</b><br>
-			<img src="img/index_animation.gif" width="130" alt="animation.gif"><br>
-			<b>WORDFIRE</b><br>
-			<br>
-			<b>Lots Of KEWL Stuff Here</b><br>
-			<a href="http://www.pineconecattery.com/" target="tlx_new"><img
-			src="img/index_judysbanner.jpg" alt="judysbanner.jpg" width="130"></a><br>
-			<b>Edited Versions Also Available Of These Playscenz</b>
-		</div>
-	</div>
-</body>
-</html>
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<!-- from source -->
+	<meta name="keywords" content="PETZ 4&amp;5 Playscenz  unedited versions">
+	<title>WORDFIRE'S</title>
+	<!--  -->
+
+	<!-- style -->
+	<link rel="stylesheet" href="style/style.css">
+	<style>
+		a { color: #06c; }
+		a:active { color: #909; }
+		a:visited { color: #06c; }
+
+		.blue { color: #039 !important; }
+		.center { text-align: center; }
+		.red { color: #c00 !important; }
+		.purple { color: #909 !important; }
+
+		/* fuck table layouts thanks!!! */
+
+		#top-left {
+			float: left;
+			width: 149px;
+			height: 124px;
+
+			background-color: #336;
+			border: 2px solid #93c;
+		}
+
+		#header {
+			float: left;
+			width: 600px;
+			height: 124px;
+			padding: 0;
+
+			background-image: url(img/index_clouds.jpg);
+			border: 2px solid #93c;
+			border-left: none;
+			text-align: center;
+		}
+
+		#nav {
+			clear: both;
+			float: left;
+			width: 149px;
+			height: 1361px;
+
+			background-color: #336;
+			border: 2px solid #93c;
+			border-top: none;
+		}
+
+		#content {
+			float: left;
+			width: 592px;
+			height: 1353px;
+			padding: 4px;
+
+			border: 2px solid #93c;
+			border-left: none;
+			border-top: none;
+		}
+
+		/* header style */
+
+		#header h1 {
+			font-size: 48px;
+			font-weight: 700;
+			color: #c0f;
+			font-style: italic;
+			text-decoration: underline;
+			margin: 0;
+			padding: 0;
+		}
+
+		/* nav style */
+
+		#nav {
+			text-align: center;
+		}
+
+		#nav .spacer {
+			height: 28px;
+		}
+
+		.nav-current, .nav-btn {
+			display: flex;
+    		flex-direction: column;
+    		justify-content: center;
+			width: 145px;
+			height: 26px;
+			margin-bottom: 2px;
+			padding: 3px;
+
+			text-decoration: none;
+			color: #fff;
+			font-weight: 700;
+		}
+
+		.tall { height: 42px; }
+
+		.nav-current {
+			background-color: #009;
+		}
+
+		.nav-btn {
+			background-color: #909;
+		}
+
+		.nav-current:hover, .nav-btn:hover {
+			background-color: #ccf;
+			text-decoration: underline;
+		}
+
+		.nav-current:visited, .nav-btn:visited {
+			color: #fff;
+		}
+
+		/* content style */
+
+		#content h2 { font-size: 24px; font-style: italic; }
+
+		/* seriously fuck tables */
+
+		#content #canvas-border {
+			display: table;
+			margin: 0 auto;
+			width: 160px;
+			height: 180px;
+			background-image: url(img/index_frame_dkblue_canvas.gif);
+		}
+
+		#content #canvas-border img { margin: 15px; }
+
+		/* has no one heard of the border attribute ????????????? */
+
+		#hellbox {
+			border: 2px solid #609;
+			width: 580px;
+			height: 174px;
+			margin: 0 auto;
+			background-color: #ffc;
+		}
+
+		#hellbox2 {
+			border: 2px ridge #f69;
+			width: 567px;
+			height: 160px;
+			padding: 5px;
+
+			color: #306;
+			font-size: 24px;
+			font-weight: 900;
+			font-family: 'Times New Roman', Times, serif;
+		}
+
+		#hellbox2 img {
+			padding-top: 15px;
+		}
+
+		#wood-border {
+			display: table;
+			margin: 20px auto;
+			width: 330px;
+			height: 255px;
+			background-image: url(img/index_frame_wood2.gif);
+		}
+
+		#wood-border img { margin: 15px; }
+
+		.purple-line {
+			height: 2px;
+			width: 285px;
+			background-color: #93c;
+			float: left;
+			margin: 5px;
+		}
+
+		#bravenet { margin: 40px 30px; clear: both; }
+	</style>
+
+	<!-- archive menu -->
+	<script src="config.js" type="module"></script>
+	<script src="/menu.js" type="module"></script>
+</head>
+<body>
+	<div id="top-left"></div>
+
+	<div id="header">
+		<h1>petz**<br>
+		WORDFIRE'S**petz</h1>
+	</div>
+
+	<div id="nav">
+		<div class="spacer"></div>
+
+		<a href="index.html" class="nav-current">Home</a>
+		<a href="play1.html" class="nav-btn">PETZ PLAYSCENZ</a>
+		<a href="play2.html" class="nav-btn">MORE PLAYSCENZ</a>
+		<a href="play3.html" class="nav-btn tall">AND>>>MORE PETZ PLAYSCENZ</a>
+		<a href="possums.html" class="nav-btn">'POSSUMS</a>
+		<a href="play4.html" class="nav-btn tall">COMPLETED PLAYSCENZ</a>
+		<a href="sound.html" class="nav-btn">Sound Files</a>
+		<a href="precious.html" class="nav-btn">PRECIOUS ONEZ</a>
+	</div>
+
+	<div id="content">
+		<img src="img/index_fire_line_2.gif" alt="fire_line_2.gif" width="560" style="margin: 0
+		auto; display: table;">
+
+		<h2 class="red">
+			FOR MORE PETZ BACKGROUNDS, SOUND FILES AND PLAYSCENZ IN THE FUTURE VISIT><a class="red"
+			href="https://web.archive.org/web/20050912012413/http://home.earthlink.net/~lindajoyce/">http://home.earthlink.net/~lindajoyce/</a>
+			oz yellow brick road and music available there now!!!!
+		</h2>
+
+		<p class="red small arial center">
+			<b><i>EVEN PETZ PRAISE HIM</i></b>
+			<div id="canvas-border" style="margin-top: -10px;">
+				<img src="img/index_tigertheangel.jpg" width="130">
+			</div>
+		</p>
+
+		<div id="hellbox">
+			<div id="hellbox2">
+				<i>THIS IS A PETZ 4&5 SITE**ALL ORIGINAL UNEDITED PLAYSCENZ  BACKGROUNDS JUST
+				WAITING FOR YOU**wordfire**</i><br>
+				<img src="img/index_vote1.gif">
+			</div>
+		</div>
+
+		<div id="wood-border">
+			<img src="img/index_pupkit03.jpg" alt="pupkit03.jpg" width="300">
+		</div>
+
+		<p style="font-style: italic; font-weight: 900;" class="purple arial">
+			<span class="big blue">KUDOS:</span>THANK YOU CAROLYN,JUDY, PEEPS AT APKC FORUMS& MINIBYTE
+		</p>
+
+		<p>.</p>
+
+		<p>&nbsp;</p>
+
+		<div class="purple-line"></div>
+		<div class="purple-line"></div>
+
+		<div id="bravenet">
+			<a href="guestbook.php">
+				<img src="img/index_guestbook.gif" title="Free Guestbook from Bravenet"
+					 alt="Free Guestbook from Bravenet">
+			</a>
+			
+			<a href="https://www.bravenet.com/">
+				<img src="img/index_bn-guestbook.gif" title="Free Guestbook from Bravenet"
+					 alt="Free Guestbook from Bravenet">
+			</a>
+		</div>
+
+		<div id="god" class="small arial">
+			<b>The Life,Truth and Power Of GOD</b><br>
+			<img src="img/index_animation.gif" width="130" alt="animation.gif"><br>
+			<b>WORDFIRE</b><br>
+			<br>
+			<b>Lots Of KEWL Stuff Here</b><br>
+			<a href="http://www.pineconecattery.com/" target="tlx_new"><img
+			src="img/index_judysbanner.jpg" alt="judysbanner.jpg" width="130"></a><br>
+			<b>Edited Versions Also Available Of These Playscenz</b>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/wordfire/play1.html b/wordfire/play1.html
new file mode 100644
index 0000000..c35f8d2
--- /dev/null
+++ b/wordfire/play1.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- from source -->
+    <title>PETZ PLAYSCENZ</title>
+    <!--  -->
+
+    <!-- style -->
+    <link rel="stylesheet" href="style/style.css">
+    <style>
+        body {
+            width: 760px;
+            margin: 16px 14px;
+            text-align: center;
+        }
+
+        a { color: #3f3; }
+
+        a:active { color: #fff; }
+
+        a:visited { color: #3f3; }
+
+        h1#title {
+            font-size: 48px;
+            font-weight: 700;
+            font-style: italic;
+            color: #c0f;
+            text-decoration: underline;
+            margin: 0;
+        }
+
+        #nav { margin-top: 0; }
+
+        #nav a { color: #000; }
+
+        #nav a:active { color: #000; }
+
+        #nav a:visited { color: #000; }
+
+        #nav a.current { text-decoration: none; font-weight: 700; }
+
+        /* HELL */
+        #grid {
+            display: grid;
+            grid-template-columns: [c1] 248px [c2] 83px [c3] 70px [c4] 74px [c5] 60px [c6] 86px [c7]
+				47px [c8];
+            grid-template-rows: [r1] 54px [r2] 36px [r3] 23px [r4] 64px [r5] 70px [c8];
+            gap: 0; grid-gap: 0;
+            place-items: center;
+            place-content: center;
+        }
+    </style>
+
+    <!-- archive menu -->
+    <script src="config.js" type="module"></script>
+    <script src="/menu.js" type="module"></script>
+</head>
+<body>
+<h1 id="title">petz** WORDFIRE'S**petz</h1>
+
+<p id="nav" class="arial">
+    <a href="index.html">Home</a> |
+    <a href="play1.html" class="current">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">PRECIOUS ONEZ</a>
+</p>
+
+<b style="font-size: 32px;" class="red">PETZ PLAYSCENZ</b>
+
+<div style="height: 50px;"></div>
+
+<div style="display: table; font-family: Georgia,serif; font-size: 15px;"><u>fatcatruns.gif</u></div>
+
+<p style="font-style: italic; font-weight: 700; text-align: left;">
+		<span class="times" style="color: #009;">
+			<span style="font-size: 24px;">UNEDITED PLAYSCENZ**</span><span style="font-size:
+			16px;">E-MAIL ME AT
+			<a style="color: #000;" href="mailto:wordfire@earthlink.net">WORDFIRE@EARTHLINK.NET</a>
+			*REQUEST 4 OR 5 >> UNZIP TO YOUR EDITOR AND MAKE YOUT VERY OWN!!</span>
+		</span>
+    <span style="display: inline-block; width: 130px; height: 26px;"></span>
+    <span style="color: #00c;">
+			you can also right click the playscene and save it to your computer(  remember where you
+			save it to<br>
+			!!)
+			<span style="display: inline-block;width: 120px;"></span>
+			CLICK ON ANY IMAGE TO ENLARGE
+		</span>
+</p>
+
+<img src="img/index_vote1.gif" style="display: table;">
+
+<!-- HELL -->
+
+<div id="grid">
+    <div style="grid-column: c1 / c2; grid-row: r1 / r2;">
+        <span class="arial small">All your favorites>> your PETZ will enjoy them too</span><br>
+        <u class="georgia medium" title="missing">moviestarsroom.jpg</u><br>
+        <span class="arial small">Wall Of Stars</span>
+    </div>
+
+    <div style="grid-column: c1 / c2; grid-row: r2 / r4;">
+        <span class="arial small">PETZ Can Do Tricks On Stage!!</span><br>
+        <u class="georgia medium" title="missing">thestage.jpg</u><br>
+        <span class="small arial">The Stage</span>
+    </div>
+
+    <div style="grid-column: c1 / c2; grid-row: r4 / r5;">
+        <span class="small arial">Elect your Next PETZ President !</span><br>
+        <u class="georgia medium" title="missing">votingbooth.jpg</u><br>
+        <span class="small arial">Voting Booth</span>
+    </div>
+
+    <div style="grid-column: c4 / c7; grid-row: r1 / r3;">
+        <span class="small arial">The Perfect Party Room>Ballons>Treats and Pinata!</span><br>
+        <u class="georgia medium" title="missing">happybirthday.jpg</u><br>
+        <span class="small arial">Happy Birthday!</span>
+    </div>
+
+    <div style="grid-column: c3 / c6; grid-row: r3 / r5; place-self: stretch; background-color:
+		#fcc;">
+        <span class="small arial">PETZ Romp In The With Triple Crown Winners Here!</span><br>
+        <u class="georgia medium" title="missing">triplecrowntrophystables.jpg</u><br>
+        <span class="small arial">Triple Crown Stables</span>
+    </div>
+
+    <div style="grid-column: c5 / c8; grid-row: r5 / r6;">
+        <span class="small arial">A Submarine View>> Petz Will Love It!</span><br>
+        <u class="georgia medium" title="missing">underthesea.jpg</u><br>
+        <span class="small arial">Under The Sea</span>
+    </div>
+</div>
+
+<p><br><br><br><br></p>
+
+<p class="missing-asset" style="display: table;">
+    <i>missing:<br>
+        image</i>
+</p>
+
+<p><br><br><br><br></p>
+
+<div id="god" class="small arial">
+    <b>The Life,Truth and Power Of GOD</b><br>
+    <img src="img/index_animation.gif" width="130" alt="animation.gif"><br>
+    <b>WORDFIRE</b><br>
+    <br>
+    <b>Lots Of KEWL Stuff Here</b><br>
+    <a href="http://www.pineconecattery.com/" target="tlx_new"><img
+            src="img/index_judysbanner.jpg" alt="judysbanner.jpg" width="130"></a><br>
+    <b>Edited Versions Also Available Of These Playscenz</b>
+</div>
+</body>
+</html>
diff --git a/wordfire/play1.php b/wordfire/play1.php
deleted file mode 100644
index 9a47e95..0000000
--- a/wordfire/play1.php
+++ /dev/null
@@ -1,153 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-	<!-- from source -->
-	<title>PETZ PLAYSCENZ</title>
-	<!--  -->
-
-	<!-- style -->
-	<link rel="stylesheet" href="style/style.css">
-	<style>
-		body {
-			width: 760px;
-			margin: 16px 14px;
-			text-align: center;
-		}
-
-		a { color: #3f3; }
-		a:active { color: #fff; }
-		a:visited { color: #3f3; }
-
-		h1#title {
-			font-size: 48px;
-			font-weight: 700;
-			font-style: italic;
-			color: #c0f;
-			text-decoration: underline;
-			margin: 0;
-		}
-
-		#nav { margin-top: 0; }
-		#nav a { color: #000; }
-		#nav a:active { color: #000; }
-		#nav a:visited { color: #000; }
-		#nav a.current { text-decoration: none; font-weight: 700; }
-
-		/* HELL */
-		#grid {
-			display: grid;
-			grid-template-columns: [c1] 248px [c2] 83px [c3] 70px [c4] 74px [c5] 60px [c6] 86px [c7]
-				47px [c8];
-			grid-template-rows: [r1] 54px [r2] 36px [r3] 23px [r4] 64px [r5] 70px [c8];
-			gap: 0; grid-gap: 0;
-			place-items: center;
-			place-content: center;
-		}
-	</style>
-</head>
-<body>
-<?php include '../_menu.php'; ?>
-
-	<h1 id="title">petz** WORDFIRE'S**petz</h1>
-	
-	<p id="nav" class="arial">
-		<a href="index.php">Home</a> |
-		<a href="play1.php" class="current">PETZ PLAYSCENZ</a> |
-		<a href="play2.php">MORE PLAYSCENZ</a> |
-		<a href="play3.php">AND>>>>MORE PETZ PLAYSCENZ</a> |
-		<a href="possums.php">'POSSUMS</a> |
-		<a href="play4.php">COMPLETED PLAYSCENZ</a> |
-		<a href="sound.php">Sound Files</a> |
-		<a href="precious.php">PRECIOUS ONEZ</a>
-	</p>
-
-	<b style="font-size: 32px;" class="red">PETZ PLAYSCENZ</b>
-
-	<div style="height: 50px;"></div>
-
-	<div style="display: table; font-family: Georgia; font-size: 15px;"><u>fatcatruns.gif</u></div>
-
-	<p style="font-style: italic; font-weight: 700; text-align: left;">
-		<span class="times" style="color: #009;">
-			<span style="font-size: 24px;">UNEDITED PLAYSCENZ**</span><span style="font-size:
-			16px;">E-MAIL ME AT
-			<a style="color: #000;" href="mailto:wordfire@earthlink.net">WORDFIRE@EARTHLINK.NET</a>
-			*REQUEST 4 OR 5 >> UNZIP TO YOUR EDITOR AND MAKE YOUT VERY OWN!!</span>
-		</span>
-		<span style="display: inline-block; width: 130px; height: 26px;"></span>
-		<span style="color: #00c;">
-			you can also right click the playscene and save it to your computer(  remember where you
-			save it to<br>
-			!!)
-			<span style="display: inline-block;width: 120px;"></span>
-			CLICK ON ANY IMAGE TO ENLARGE
-		</span>
-	</p>
-
-	<img src="img/index_vote1.gif" style="display: table;">
-
-	<!-- HELL -->
-
-	<div id="grid">
-		<div style="grid-column: c1 / c2; grid-row: r1 / r2;">
-			<span class="arial small">All your favorites>> your PETZ will enjoy them too</span><br>
-			<u class="georgia medium" title="missing">moviestarsroom.jpg</u><br>
-			<span class="arial small">Wall Of Stars</span>
-		</div>
-
-		<div style="grid-column: c1 / c2; grid-row: r2 / r4;">
-			<span class="arial small">PETZ Can Do Tricks On Stage!!</span><br>
-			<u class="georgia medium" title="missing">thestage.jpg</u><br>
-			<span class="small arial">The Stage</span>
-		</div>
-
-		<div style="grid-column: c1 / c2; grid-row: r4 / r5;">
-			<span class="small arial">Elect your Next PETZ President !</span><br>
-			<u class="georgia medium" title="missing">votingbooth.jpg</u><br>
-			<span class="small arial">Voting Booth</span>
-		</div>
-
-		<div style="grid-column: c4 / c7; grid-row: r1 / r3;">
-			<span class="small arial">The Perfect Party Room>Ballons>Treats and Pinata!</span><br>
-			<u class="georgia medium" title="missing">happybirthday.jpg</u><br>
-			<span class="small arial">Happy Birthday!</span>
-		</div>
-
-		<div style="grid-column: c3 / c6; grid-row: r3 / r5; place-self: stretch; background-color:
-		#fcc;">
-			<span class="small arial">PETZ Romp In The With Triple Crown Winners Here!</span><br>
-			<u class="georgia medium" title="missing">triplecrowntrophystables.jpg</u><br>
-			<span class="small arial">Triple Crown Stables</span>
-		</div>
-
-		<div style="grid-column: c5 / c8; grid-row: r5 / r6;">
-			<span class="small arial">A Submarine View>> Petz Will Love It!</span><br>
-			<u class="georgia medium" title="missing">underthesea.jpg</u><br>
-			<span class="small arial">Under The Sea</span>
-		</div>
-	</div>
-
-	<p><br><br><br><br></p>
-
-	<p class="missing-asset" style="display: table;">
-		<i>missing:<br>
-		image</i>
-	</p>
-
-	<p><br><br><br><br></p>
-
-	<div id="god" class="small arial">
-			<b>The Life,Truth and Power Of GOD</b><br>
-			<img src="img/index_animation.gif" width="130" alt="animation.gif"><br>
-			<b>WORDFIRE</b><br>
-			<br>
-			<b>Lots Of KEWL Stuff Here</b><br>
-			<a href="http://www.pineconecattery.com/" target="tlx_new"><img
-			src="img/index_judysbanner.jpg" alt="judysbanner.jpg" width="130"></a><br>
-			<b>Edited Versions Also Available Of These Playscenz</b>
-		</div>
-</body>
-</html>
\ No newline at end of file
diff --git a/wordfire/play2.html b/wordfire/play2.html
new file mode 100644
index 0000000..a52a0d3
--- /dev/null
+++ b/wordfire/play2.html
@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- from source -->
+    <title>MORE PLAYSCENZ</title>
+    <!--  -->
+
+    <!-- style -->
+    <link rel="stylesheet" href="style/style.css">
+    <style>
+        /* page grid */
+
+        #page {
+            display: grid;
+            gap: 0; grid-gap: 0;
+            grid-template-columns: [c1] 145px [c2] 3px [c3] 607px [c4];
+            grid-template-rows: [r1] 159px [r2] 1178px [r3];
+            row-gap: 5px;
+        }
+
+        /* top right image ---------------------------------------------------------------------- */
+
+        #top-right {
+            grid-column: c1 / c2;
+            grid-row: r1 / r2;
+            align-self: center;
+            justify-self: center;
+        }
+
+        /* header ------------------------------------------------------------------------------- */
+
+        #header {
+            grid-column: c3 / c4;
+            grid-row: r1 / r2;
+
+            text-align: center;
+            align-self: center;
+        }
+
+        #header > h1 {
+            font-size: 48px;
+            font-weight: 700;
+            text-decoration: underline;
+            font-style: italic;
+            color: #c0f;
+            padding: 0 0 5px 0; margin: 0;
+        }
+
+        #header > h2 {
+            font-size: 32px;
+            font-weight: 700;
+            color: #c00;
+            padding: 0; margin: 0;
+        }
+
+        /* nav ---------------------------------------------------------------------------------- */
+
+        #nav {
+            grid-column: c1 / c2;
+            grid-row: r2 / r3;
+        }
+
+        #nav > a {
+            text-decoration: none;
+            color: #fff;
+            font-weight: 700;
+            text-align: center;
+            padding: 5px;
+            display: block;
+            background-color: #909;
+            margin-bottom: 2px;
+        }
+
+        #nav > a:hover { background-color: unset; text-decoration: underline; }
+
+        #nav > a#current { background-color: unset; }
+
+        #nav > a:first-child { margin-top: 40px; }
+
+        /* content ------------------------------------------------------------------------------ */
+
+        #content {
+            grid-column: c3 / c4;
+            grid-row: r2 / r3;
+
+            padding: 4px;
+            padding-right: 6px;
+            background-color: #cf9;
+
+            display: grid;
+            gap: 0; grid-gap: 0;
+            grid-template-columns: [cc1] 327px [cc2] auto [cc3];
+            grid-template-rows: [cr1] 88px [cr2] 74px [cr3] 56px [cr4] 58px [cr5] 160px [cr6] 59px
+				[cr7] 62px [cr8] 98px [cr9] 226px [cr10] 29px [cr11] 159px [cr12] 109px [cr13];
+        }
+
+        #content > div { align-self: center; justify-self: center; }
+    </style>
+
+    <!-- archive menu -->
+    <script src="config.js" type="module"></script>
+    <script src="/menu.js" type="module"></script>
+</head>
+<body>
+<div id="page">
+
+    <!-- top right image ------------------------------------------------------------------------------------------>
+
+    <div id="top-right">
+        <img src="img/play2_petz0.jpg">
+    </div>
+
+    <!-- header --------------------------------------------------------------------------------------------------->
+
+    <div id="header">
+        <h1>petz**<br>
+            WORDFIRE'S**petz</h1>
+        <h2>MORE PLAYSCENZ</h2>
+    </div>
+
+    <!-- nav ------------------------------------------------------------------------------------------------------>
+
+    <div id="nav">
+        <a href="index.html">Home</a>
+        <a href="play1.html">PETZ PLAYSCENZ</a>
+        <a href="play2.html" id="current">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">PRECIOUS ONEZ</a>
+    </div>
+
+    <!-- content -------------------------------------------------------------------------------------------------->
+
+    <div id="content">
+        <div style="grid-column: cc1/cc3; grid-row: cr1/cr2; font-style: italic; align-self:
+			center; justify-self: start;" class="big">
+            <b class="courier" style="color: #03c;">e-mail me for PETZ 4 or 5 unedited versions
+                or right click enlarged image and save it</b><br>
+            <a href="mailto:wordfire@earthlink.net" class="courier" style="color:
+				#000; font-weight: 700;">wordfire@earthlink.net</a>
+        </div>
+
+        <div style="grid-column: cc1/cc2; grid-row: cr2/cr3; align-self: center; justify-self:
+			start;">
+            <img src="img/index_vote1.gif">
+        </div>
+
+        <div class="georgia medium" title="missing" style="grid-column: cc1/cc3; grid-row:
+			cr3/cr4; justify-self: center; padding-top: 10px;">
+            violet_bar.gif
+        </div>
+
+        <div style="grid-column: cc1/cc2; grid-row: cr4/cr5;" class="small arial center">
+            PETZ And Dolphins Play Here!<br>
+            <u class="georgia medium" title="missing">dolphinden.jpg</u><br>
+            Dolphin Window
+        </div>
+
+        <div class="small arial center" style="grid-column: cc1/cc2; grid-row: cr5/cr7;">
+            All Your PEtZ Love To Gaze Out This Window<br>
+            <a href="img/play2_view.jpg" target="tlx_new">
+                <img src="img/play2_view.jpg" alt="dolphinden.jpg" width="240">
+            </a><br>
+            The View
+        </div>
+
+        <div class="small arial center" style="grid-column: cc1/cc2; grid-row: cr7/cr8;">
+            PETZ Relax And Play InOriental Style!!<br>
+            <u class="georgia medium" title="missing">orientalroom.jpg</u><br>
+            Asian Attitude
+        </div>
+
+        <div class="small arial center" style="grid-column: cc2/cc3; grid-row: cr4/cr6;
+			justify-self: end;">
+            Your PETZ Will Love Cool Water And Green Grass<br>
+            <a href="img/play2_watergarden2.jpg" target="tlx_new">
+                <img src="img/play2_watergarden2.jpg" alt="watergarden2.jpg" width="240">
+            </a><br>
+            Watergarden
+        </div>
+
+        <div class="small arial center" style="grid-column: cc2/cc3; grid-row: cr6/cr9;
+			justify-self: end;">
+            A Rug In The Sun And Room To Play<br>
+            <a href="img/play2_1parlor.jpg" target="tlx_new">
+                <img src="img/play2_1parlor.jpg" alt="1parlor.jpg" width="240">
+            </a><br>
+            The Parlor
+        </div>
+
+        <div class="small arial center" style="grid-column: cc2/cc3; grid-row: cr9/cr10;
+			justify-self: end;">
+            The BIG CAT Gallery<br>
+            <a href="img/play2_wildthingz.jpg" target="tlx_new">
+                <img src="img/play2_wildthingz.jpg" alt="wildthingz.jpg" width="240">
+            </a><br>
+            WILDTHINGZ
+        </div>
+
+        <div class="small arial center" style="grid-column: cc2/cc3; grid-row: cr11/cr12;
+			justify-self: end; color: #006; 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
+        </div>
+
+        <div class="small arial center" style="grid-column: cc2/cc3; grid-row: cr12/cr13;
+			justify-self: end;color: #006; font-weight: 700;">
+            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><!-- content -->
+</div>
+</body>
+</html>
diff --git a/wordfire/play2.php b/wordfire/play2.php
deleted file mode 100644
index 5041e18..0000000
--- a/wordfire/play2.php
+++ /dev/null
@@ -1,224 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-	<!-- from source -->
-	<title>MORE PLAYSCENZ</title>
-	<!--  -->
-
-	<!-- style -->
-	<link rel="stylesheet" href="style/style.css">
-	<style>
-		/* page grid */
-
-		#page {
-			display: grid;
-			gap: 0; grid-gap: 0;
-			grid-template-columns: [c1] 145px [c2] 3px [c3] 607px [c4];
-			grid-template-rows: [r1] 159px [r2] 1178px [r3];
-			row-gap: 5px;
-		}
-
-		/* top right image ---------------------------------------------------------------------- */
-
-		#top-right {
-			grid-column: c1 / c2;
-			grid-row: r1 / r2;
-			align-self: center;
-			justify-self: center;
-		}
-
-		/* header ------------------------------------------------------------------------------- */
-
-		#header {
-			grid-column: c3 / c4;
-			grid-row: r1 / r2;
-
-			text-align: center;
-			align-self: center;
-		}
-
-		#header > h1 {
-			font-size: 48px;
-			font-weight: 700;
-			text-decoration: underline;
-			font-style: italic;
-			color: #c0f;
-			padding: 0 0 5px 0; margin: 0;
-		}
-
-		#header > h2 {
-			font-size: 32px;
-			font-weight: 700;
-			color: #c00;
-			padding: 0; margin: 0;
-		}
-
-		/* nav ---------------------------------------------------------------------------------- */
-
-		#nav {
-			grid-column: c1 / c2;
-			grid-row: r2 / r3;
-		}
-
-		#nav > a {
-			text-decoration: none;
-			color: #fff;
-			font-weight: 700;
-			text-align: center;
-			padding: 5px;
-			display: block;
-			background-color: #909;
-			margin-bottom: 2px;
-		}
-
-		#nav > a:hover { background-color: unset; text-decoration: underline; }
-
-		#nav > a#current { background-color: unset; }
-
-		#nav > a:first-child { margin-top: 40px; }
-
-		/* content ------------------------------------------------------------------------------ */
-
-		#content {
-			grid-column: c3 / c4;
-			grid-row: r2 / r3;
-
-			padding: 4px;
-			padding-right: 6px;
-			background-color: #cf9;
-
-			display: grid;
-			gap: 0; grid-gap: 0;
-			grid-template-columns: [cc1] 327px [cc2] auto [cc3];
-			grid-template-rows: [cr1] 88px [cr2] 74px [cr3] 56px [cr4] 58px [cr5] 160px [cr6] 59px
-				[cr7] 62px [cr8] 98px [cr9] 226px [cr10] 29px [cr11] 159px [cr12] 109px [cr13];
-		}
-
-		#content > div { align-self: center; justify-self: center; }
-	</style>
-</head>
-<body>
-<?php include '../_menu.php'; ?>
-	
-	<div id="page">
-
-		<!-- top right image ---------------------------------------------------------------------->
-
-		<div id="top-right">
-			<img src="img/play2_petz0.jpg">
-		</div>
-
-		<!-- header ------------------------------------------------------------------------------->
-
-		<div id="header">
-			<h1>petz**<br>
-			WORDFIRE'S**petz</h1>
-			<h2>MORE PLAYSCENZ</h2>
-		</div>
-
-		<!-- nav ---------------------------------------------------------------------------------->
-
-		<div id="nav">
-			<a href="index.php">Home</a>
-			<a href="play1.php">PETZ PLAYSCENZ</a>
-			<a href="play2.php" id="current">MORE PLAYSCENZ</a>
-			<a href="play3.php">AND>>>>MORE PETZ PLAYSCENZ</a>
-			<a href="possums.php">'POSSUMS</a>
-			<a href="play4.php">COMPLETED PLAYSCENZ</a>
-			<a href="sound.php">Sound Files</a>
-			<a href="precious.php">PRECIOUS ONEZ</a>
-		</div>
-
-		<!-- content ------------------------------------------------------------------------------>
-
-		<div id="content">
-			<div style="grid-column: cc1/cc3; grid-row: cr1/cr2; font-style: italic; align-self:
-			center; justify-self: start;" class="big">
-				<b class="courier" style="color: #03c;">e-mail me for PETZ 4 or 5 unedited versions
-				or right click enlarged image and save it</b><br>
-				<a href="mailto:wordfire@earthlink.net" class="courier" style="color:
-				#000; font-weight: 700;">wordfire@earthlink.net</a>
-			</div>
-
-			<div style="grid-column: cc1/cc2; grid-row: cr2/cr3; align-self: center; justify-self:
-			start;">
-				<img src="img/index_vote1.gif">
-			</div>
-
-			<div class="georgia medium" title="missing" style="grid-column: cc1/cc3; grid-row:
-			cr3/cr4; justify-self: center; padding-top: 10px;">
-				violet_bar.gif
-			</div>
-
-			<div style="grid-column: cc1/cc2; grid-row: cr4/cr5;" class="small arial center">
-				PETZ And Dolphins Play Here!<br>
-				<u class="georgia medium" title="missing">dolphinden.jpg</u><br>
-				Dolphin Window
-			</div>
-
-			<div class="small arial center" style="grid-column: cc1/cc2; grid-row: cr5/cr7;">
-				All Your PEtZ Love To Gaze Out This Window<br>
-				<a href="img/play2_view.jpg" target="tlx_new">
-					<img src="img/play2_view.jpg" alt="dolphinden.jpg" width="240">
-				</a><br>
-				The View
-			</div>
-
-			<div class="small arial center" style="grid-column: cc1/cc2; grid-row: cr7/cr8;">
-				PETZ Relax And Play InOriental Style!!<br>
-				<u class="georgia medium" title="missing">orientalroom.jpg</u><br>
-				Asian Attitude
-			</div>
-
-			<div class="small arial center" style="grid-column: cc2/cc3; grid-row: cr4/cr6;
-			justify-self: end;">
-				Your PETZ Will Love Cool Water And Green Grass<br>
-				<a href="img/play2_watergarden2.jpg" target="tlx_new">
-					<img src="img/play2_watergarden2.jpg" alt="watergarden2.jpg" width="240">
-				</a><br>
-				Watergarden
-			</div>
-
-			<div class="small arial center" style="grid-column: cc2/cc3; grid-row: cr6/cr9;
-			justify-self: end;">
-				A Rug In The Sun And Room To Play<br>
-				<a href="img/play2_1parlor.jpg" target="tlx_new">
-					<img src="img/play2_1parlor.jpg" alt="1parlor.jpg" width="240">
-				</a><br>
-				The Parlor
-			</div>
-
-			<div class="small arial center" style="grid-column: cc2/cc3; grid-row: cr9/cr10;
-			justify-self: end;">
-				The BIG CAT Gallery<br>
-				<a href="img/play2_wildthingz.jpg" target="tlx_new">
-					<img src="img/play2_wildthingz.jpg" alt="wildthingz.jpg" width="240">
-				</a><br>
-				WILDTHINGZ
-			</div>
-
-			<div class="small arial center" style="grid-column: cc2/cc3; grid-row: cr11/cr12;
-			justify-self: end; color: #006; 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
-			</div>
-
-			<div class="small arial center" style="grid-column: cc2/cc3; grid-row: cr12/cr13;
-			justify-self: end;color: #006; font-weight: 700;">
-				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><!-- content -->
-	</div>
-</body>
-</html>
\ No newline at end of file
diff --git a/wordfire/play3.html b/wordfire/play3.html
new file mode 100644
index 0000000..0becfb4
--- /dev/null
+++ b/wordfire/play3.html
@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- from source -->
+    <title>AND>>>>MORE PETZ PLAYSCENZ</title>
+    <!--  -->
+
+    <!-- style -->
+    <link rel="stylesheet" href="style/style.css">
+    <style>
+        body { background-color: #6cf; }
+
+        a { color: #09c; }
+
+        a:active { color: #9cf; }
+
+        a:visited { color: #069; }
+
+        #page {
+            display: grid;
+            row-gap: 0; grid-row-gap: 0;
+            column-gap: 10px; grid-column-gap: 10px;
+            grid-template-columns: [c1] 211px [c2] 566px [c3];
+            grid-template-rows: [r1] 168px [r2] 97px [r3] 903px [c4];
+        }
+
+        /* header ------------------------------------------------------------------------------- */
+
+        #header {
+            grid-column: c2/c3;
+            grid-row: r1/r2;
+            align-self: center;
+            justify-self: center;
+            text-align: center;
+        }
+
+        h1 { padding: 0; margin: 0 0 5px 0; }
+
+        h2 {
+            color: #639;
+            font-size: 24px;
+            font-weight: 700;
+            font-style: italic;
+            padding: 0; margin: 0;
+        }
+
+        /* nav ---------------------------------------------------------------------------------- */
+
+        #nav {
+            grid-column: c2/c3;
+            grid-row: r2/r3;
+            align-self: center;
+        }
+
+        #nav > a { color: #000; }
+
+        #nav > a:active { color: #000; }
+
+        #nav > a:visited { color: #000; }
+
+        #nav > #current {
+            font-weight: 700;
+            text-decoration: none;
+        }
+
+        /* content ------------------------------------------------------------------------------ */
+
+        #content {
+            grid-column: c2/c3;
+            grid-row: r3/r4;
+
+            display: grid;
+            grid-template-columns: [cc1] 278px [cc2] 288px [cc3];
+            grid-template-rows: [cr1] 75px [cr2] 73px [cr3] 63px [cr4] 63px [cr5] 75px [cr6] 138px
+			[cr7] 76px [cr8] 57px [cr9] 283px [cr10];
+            gap: 0; grid-gap: 0;
+
+            padding: 5px;
+        }
+
+        #content > div {
+            align-self: center;
+            justify-self: center;
+        }
+    </style>
+</head>
+<body>
+<div id="page">
+    <div id="top-left" style="grid-column: c1/c2; grid-row: r1/r4; align-self: start;
+		justify-self: start;">
+        <img src="img/play3_fishbgrnd.jpg" width="200">
+    </div><!-- #top-left -->
+
+    <!-- header --------------------------------------------------------------------------------------------------->
+    <div id="header">
+        <h1>petz**<br>
+            WORDFIRE'S**petz</h1>
+        <h2>AND>>>>MORE PETZ PLAYSCENZ</h2>
+    </div><!-- #header -->
+
+    <!-- nav ------------------------------------------------------------------------------------------------------>
+    <div id="nav">
+        <a href="index.html">Home</a> |
+        <a href="play1.html">PETZ PLAYSCENZ</a> |
+        <a href="play2.html">MORE PLAYSCENZ</a> |
+        <a href="play3.html" id="current">AND>>>>MORE <br> PETZ PLAYSCENZ</a> |
+        <a href="possums.html">'POSSUMS</a> |
+        <a href="play4.html">COMPLETED PLAYSCENZ</a> |
+        <a href="sound.html">Sound <br> Files</a> |
+        <a href="precious.html">PRECIOUS ONEZ</a>
+    </div><!-- #nav -->
+
+    <!-- content -------------------------------------------------------------------------------------------------->
+    <div id="content">
+        <!-- left column -->
+        <div class="times big" style="grid-column: cc1/cc3; grid-row: cr1/cr2; color: #609;
+			align-self: end; justify-self: start; font-weight: 700; padding-bottom: 10px;">
+            If you have an idea for a PLAYSCENZ email me your request at<br>
+            <a href="mailto:wordfire@earthlink.net" style="color:
+				#000;">wordfire@earthlink.net</a>
+        </div>
+
+        <div style="grid-column: cc1/cc2; grid-row: cr2/cr3; justify-self: start; padding-left:
+			10px;">
+            <img src="img/index_vote1.gif">
+        </div>
+
+        <div class="small center" style="grid-column: cc1/cc2; grid-row: cr3/cr4;
+			align-self: start; padding-top: 5px;">
+            For All PETZ Chicken Lovers !!<br>
+            <u class="georgia medium" title="missing">mountaintopchickenyard.jpg</u><br>
+            Mountaintop Chickenyard
+        </div>
+
+        <div class="small center" style="grid-column: cc1/cc2; grid-row: cr4/cr5;">
+            your PETZ Will Love The Lifeguard Tower<br>
+            View!!<br>
+            <u class="georgia medium" title="missing">oceanview.jpg</u><br>
+            Oceanview
+        </div>
+
+        <div class="small center" style="grid-column: cc1/cc2; grid-row: cr5/cr6;">
+            THE PERFECT PLACE FOR A SPRING<br>
+            WEDDING<br>
+            <u class="georgia medium" title="missing">springweddinggarden.jpg</u><br>
+            Spring Wedding Garden
+        </div>
+
+        <div style="grid-column: cc1/cc2; grid-row: cr6/cr7; padding: 10px; justify-self: start;
+			align-self: start;">.
+        </div>
+
+        <!-- right column -->
+        <div class="small center" style="grid-column: cc2/cc3; grid-row: cr3/cr4;">
+            PETZ Will Love The Cool Arbor to Play<br>
+            Under!<br>
+            <span class="georgia medium" title="missing">flowerarbor.jpg</span><br>
+            Flower Arbor
+        </div>
+
+        <div style="grid-column: cc2/cc3; grid-row: cr4/cr5; justify-self: start; align-self:
+			end; padding: 15px 25px;">.
+        </div>
+
+        <div class="small center" style="grid-column: cc2/cc3; grid-row: cr5/cr7;">
+            A WOODLAND PARADISE FOR YOUR PETZ<br>
+            <a href="img/play3_uneditedpossumholler.jpg" target="tlx_new">
+                <img src="img/play3_uneditedpossumholler.jpg" alt="uneditedpossumholler.jpg"
+                     width="240">
+            </a><br>
+            Possum Holler Background
+        </div>
+
+        <div class="small center" style="grid-column: cc2/cc3; grid-row: cr7/cr8;">
+            PETZ SWIM WITH THE WONDERS OF THE<br>
+            SEA<br>
+            <u class="georgia medium">seafloor.jpg</u><br>
+            Sea Floor
+        </div>
+
+        <div class="small arial center" style="grid-column: cc2/cc3; grid-row: cr9/cr10;
+			justify-self: end; color: #35643a; 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><!-- #content -->
+</div><!-- #page -->
+</body>
+</html>
diff --git a/wordfire/play3.php b/wordfire/play3.php
deleted file mode 100644
index f0e8369..0000000
--- a/wordfire/play3.php
+++ /dev/null
@@ -1,199 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	
-	<!-- from source -->
-	<title>AND>>>>MORE PETZ PLAYSCENZ</title>
-	<!--  -->
-
-	<!-- style -->
-	<link rel="stylesheet" href="style/style.css">
-	<style>
-		body { background-color: #6cf; }
-		a { color: #09c; }
-		a:active { color: #9cf; }
-		a:visited { color: #069; }
-
-		#page {
-			display: grid;
-			row-gap: 0; grid-row-gap: 0;
-			column-gap: 10px; grid-column-gap: 10px;
-			grid-template-columns: [c1] 211px [c2] 566px [c3];
-			grid-template-rows: [r1] 168px [r2] 97px [r3] 903px [c4];
-		}
-
-		/* header ------------------------------------------------------------------------------- */
-
-		#header {
-			grid-column: c2/c3;
-			grid-row: r1/r2;
-			align-self: center;
-			justify-self: center;
-			text-align: center;
-		}
-
-		h1 { padding: 0; margin: 0 0 5px 0; }
-
-		h2 {
-			color: #639;
-			font-size: 24px;
-			font-weight: 700;
-			font-style: italic;
-			padding: 0; margin: 0;
-		}
-
-		/* nav ---------------------------------------------------------------------------------- */
-
-		#nav {
-			grid-column: c2/c3;
-			grid-row: r2/r3;
-			align-self: center;
-		}
-
-		#nav > a { color: #000; }
-		#nav > a:active { color: #000; }
-		#nav > a:visited { color: #000; }
-
-		#nav > #current {
-			font-weight: 700;
-			text-decoration: none;
-		}
-
-		/* content ------------------------------------------------------------------------------ */
-
-		#content {
-			grid-column: c2/c3;
-			grid-row: r3/r4;
-
-			display: grid;
-			grid-template-columns: [cc1] 278px [cc2] 288px [cc3];
-			grid-template-rows: [cr1] 75px [cr2] 73px [cr3] 63px [cr4] 63px [cr5] 75px [cr6] 138px
-			[cr7] 76px [cr8] 57px [cr9] 283px [cr10];
-			gap: 0; grid-gap: 0;
-
-			padding: 5px;
-		}
-
-		#content > div {
-			align-self: center;
-			justify-self: center;
-		}
-	</style>
-</head>
-<body>
-<?php include '../_menu.php'; ?>
-	
-	<div id="page">
-		<div id="top-left" style="grid-column: c1/c2; grid-row: r1/r4; align-self: start;
-		justify-self: start;">
-			<img src="img/play3_fishbgrnd.jpg" width="200">
-		</div><!-- #top-left -->
-
-		<!-- header ------------------------------------------------------------------------------->
-		<div id="header">
-			<h1>petz**<br>
-			WORDFIRE'S**petz</h1>
-			<h2>AND>>>>MORE PETZ PLAYSCENZ</h2>
-		</div><!-- #header -->
-
-		<!-- nav ---------------------------------------------------------------------------------->
-		<div id="nav">
-			<a href="index.php">Home</a> |
-			<a href="play1.php">PETZ PLAYSCENZ</a> |
-			<a href="play2.php">MORE PLAYSCENZ</a> |
-			<a href="play3.php" id="current">AND>>>>MORE <br> PETZ PLAYSCENZ</a> |
-			<a href="possums.php">'POSSUMS</a> |
-			<a href="play4.php">COMPLETED PLAYSCENZ</a> |
-			<a href="sound.php">Sound <br> Files</a> |
-			<a href="precious.php">PRECIOUS ONEZ</a>
-		</div><!-- #nav -->
-
-		<!-- content ------------------------------------------------------------------------------>
-		<div id="content">
-			<!-- left column -->
-			<div class="times big" style="grid-column: cc1/cc3; grid-row: cr1/cr2; color: #609;
-			align-self: end; justify-self: start; font-weight: 700; padding-bottom: 10px;">
-				If you have an idea for a PLAYSCENZ email me your request at<br>
-				<a href="mailto:wordfire@earthlink.net" style="color:
-				#000;">wordfire@earthlink.net</a>
-			</div>
-
-			<div style="grid-column: cc1/cc2; grid-row: cr2/cr3; justify-self: start; padding-left:
-			10px;">
-				<img src="img/index_vote1.gif">
-			</div>
-
-			<div class="small center" style="grid-column: cc1/cc2; grid-row: cr3/cr4;
-			align-self: start; padding-top: 5px;">
-				For All PETZ Chicken Lovers !!<br>
-				<u class="georgia medium" title="missing">mountaintopchickenyard.jpg</u><br>
-				Mountaintop Chickenyard
-			</div>
-
-			<div class="small center" style="grid-column: cc1/cc2; grid-row: cr4/cr5;">
-				your PETZ Will Love The Lifeguard Tower<br>
-				View!!<br>
-				<u class="georgia medium" title="missing">oceanview.jpg</u><br>
-				Oceanview
-			</div>
-
-			<div class="small center" style="grid-column: cc1/cc2; grid-row: cr5/cr6;">
-				THE PERFECT PLACE FOR A SPRING<br>
-				WEDDING<br>
-				<u class="georgia medium" title="missing">springweddinggarden.jpg</u><br>
-				Spring Wedding Garden
-			</div>
-
-			<div style="grid-column: cc1/cc2; grid-row: cr6/cr7; padding: 10px; justify-self: start;
-			align-self: start;">.</div>
-
-			<!-- right column -->
-			<div class="small center" style="grid-column: cc2/cc3; grid-row: cr3/cr4;">
-				PETZ Will Love The Cool Arbor to Play<br>
-				Under!<br>
-				<span class="georgia medium" title="missing">flowerarbor.jpg</span><br>
-				Flower Arbor
-			</div>
-
-			<div style="grid-column: cc2/cc3; grid-row: cr4/cr5; justify-self: start; align-self:
-			end; padding: 15px 25px;">.</div>
-
-			<div class="small center" style="grid-column: cc2/cc3; grid-row: cr5/cr7;">
-				A WOODLAND PARADISE FOR YOUR PETZ<br>
-				<a href="img/play3_uneditedpossumholler.jpg" target="tlx_new">
-					<img src="img/play3_uneditedpossumholler.jpg" alt="uneditedpossumholler.jpg"
-					width="240">
-				</a><br>
-				Possum Holler Background
-			</div>
-
-			<div class="small center" style="grid-column: cc2/cc3; grid-row: cr7/cr8;">
-				PETZ SWIM WITH THE WONDERS OF THE<br>
-				SEA<br>
-				<u class="georgia medium">seafloor.jpg</u><br>
-				Sea Floor
-			</div>
-
-			<div class="small arial center" style="grid-column: cc2/cc3; grid-row: cr9/cr10;
-			justify-self: end; color: #35643a; 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><!-- #content -->
-	</div><!-- #page -->
-</body>
-</html>
\ No newline at end of file
diff --git a/wordfire/play4.html b/wordfire/play4.html
new file mode 100644
index 0000000..cfcdf89
--- /dev/null
+++ b/wordfire/play4.html
@@ -0,0 +1,243 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- from source -->
+    <title>Completed Petz Playscenz Catz, Dogz 4&5</title>
+    <meta name="description" content="Petz Playscenz Catz,Dogz 4&5">
+    <meta name="keywords" content="Petz Playscenz Catz,Dogz 4&5">
+    <!--  -->
+
+    <!-- style -->
+    <link rel="stylesheet" href="style/style.css">
+    <style>
+        body { background-color: #fff; padding: 0; margin: 2px; }
+
+        a { color: #000; }
+
+        a:active { color: #000; }
+
+        a:visited { color: #000; }
+
+        #page {
+            display: grid;
+            gap: 0; grid-gap: 0;
+            padding: 0; margin: 0;
+            border-top: 2px solid #c00;
+            width: 761px;
+
+            grid-template-columns: [c1] 151px [space] 2px [c2] 608px [c3];
+            grid-template-rows: [r1] 151px [r2] 718px [r3];
+        }
+
+        #spacer {
+            grid-column: space/c2;
+            grid-row: r1/r2;
+            align-self: stretch;
+            justify-self: stretch;
+            padding-bottom: 149px;
+            border-bottom: 2px solid #c00;
+        }
+
+        /* header ------------------------------------------------------------------------------- */
+
+        #header {
+            grid-column: c2/c3;
+            grid-row: r1/r2;
+            align-self: center;
+            justify-self: stretch;
+            text-align: center;
+
+            border-left: 2px solid #c00;
+            border-right: 2px solid #c00;
+            border-top: 2px solid #c00;
+            background-color: #aecfcb;
+            padding-bottom: 5px;
+        }
+
+        #header > h1 { padding: 0; margin: 0 0 5px 0; }
+
+        #header > h2 {
+            font-size: 24px;
+            font-weight: 700;
+            color: #066;
+            padding: 0; margin: 0;
+        }
+
+        /* nav ---------------------------------------------------------------------------------- */
+
+        #nav {
+            grid-column: c1/space;
+            grid-row: r2/r3;
+            justify-self: center;
+            text-align: center;
+
+            border-top: 2px solid #c00;
+            padding-top: 30px;
+        }
+
+        #nav > a {
+            display: block;
+            background-color: #9cc;
+            color: #000;
+            font-weight: 700;
+            padding: 5px;
+            margin-bottom: 2px;
+            text-decoration: none;
+        }
+
+        #nav > a#current { background-color: #fff; }
+
+        #nav > a:hover, #nav > a#current:hover {
+            text-decoration: underline;
+            background-color: #fcc;
+        }
+
+        /* content ------------------------------------------------------------------------------ */
+
+        #content {
+            grid-column: c2/c3;
+            grid-row: r2/r3;
+
+            border-left: 2px solid #c00;
+            border-top: 2px solid #c00;
+            border-right: 2px solid #c00;
+
+            display: grid;
+            gap: 0; grid-gap: 0;
+
+            grid-template-columns: [cc1] 244px [cc2] 218px [cc3] 137px [cc4] 9px [cc5];
+            grid-template-rows: [cr1] 68px [cr2] 32px [cr3] 49px [cr4] 38px [cr5] 49px [cr6] 40px
+			[cr7] 27px [cr8] 72px [cr9] 25px [cr10] 318px [cr11];
+        }
+
+        #content > div {
+            text-align: center;
+            justify-self: center;
+        }
+
+        .border-left { border-left: 2px solid #c00; }
+    </style>
+
+    <!-- archive menu -->
+    <script src="config.js" type="module"></script>
+    <script src="/menu.js" type="module"></script>
+</head>
+<body>
+<div id="page">
+    <div id="top-left"></div>
+
+    <div id="spacer"></div>
+
+    <div id="header">
+        <h1>petz**<br>
+            WORDFIRE'S**petz</h1>
+        <h2>COMPLETED PLAYSCENZ</h2>
+    </div><!-- #header -->
+
+    <div id="nav">
+        <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 id="current" href="play4.html">COMPLETED PLAYSCENZ</a>
+        <a href="sound.html">Sound Files</a>
+        <a href="precious.html">PRECIOUS ONEZ</a>
+    </div><!-- #nav -->
+
+    <div id="content">
+        <div style="grid-column: cc1/cc2; grid-row: cr1/cr2; justify-self: start; align-self:
+			center; padding: 5px 10px 0 10px;">
+            <img src="img/index_vote1.gif">
+        </div>
+
+        <div class="medium arial" style="grid-column: cc1/cc2; grid-row: cr2/cr3; justify-self:
+			start; align-self: end; padding-left: 5px; padding-bottom: 5px;"><i><b>.</b></i></div>
+
+        <!-- left column -->
+        <div class="small arial" style="grid-column: cc1/cc2; grid-row: cr4/cr6;">
+            Waterfalls Make This A Refreshing ChickenYard
+            <div style="background-image: url(img/play4_frame_blue_pinstripe.gif); width: 234px;
+				height: 35px; padding-top: 15px;">
+                <u class="georgia medium" title="missing" style="background-color: #fff;">
+                    mountaintopchickenyard.jpg
+                </u>
+            </div>
+            CHICKENYARD PETZ 4
+        </div>
+
+        <div class="arial" style="grid-column: cc1/cc2; grid-row: cr6/cr7; justify-self: start;
+			text-align: left; padding-left: 5px;">
+            <a href="dl/play4_chickenyard.env">CLICK HERE TO DOWNLOAD CHICKENYARD PETZ 4</a>
+        </div>
+
+        <!-- middle column -->
+        <div class="arial" style="grid-column: cc2/cc3; grid-row: cr4/cr5;
+			justify-self: start; text-align: left; padding-left: 5px;">
+            <a href="dl/play4_weddingwalk1.62mb.env">CLICK HERE TO DOWNLOAD WEDDING WALK PETZ
+                4</a>
+        </div>
+
+        <div class="small arial" style="grid-column: cc2/cc3; grid-row: cr5/cr7;
+			align-self: center; justify-self: center;">
+            A complete PLAYSCENZ !<br>
+            <u class="georgia medium" style="display: block; padding: 10px 10px; border: 2px
+				ridge #000;" title="missing">
+                springweddinggarden.jpg
+            </u>
+            PETZ 4 Version
+        </div>
+
+        <div class="border-left" style="grid-column: cc2/cc3; grid-row: cr4/cr9; align-self:
+			stretch; justify-self: stretch;"></div>
+
+        <!-- right column -->
+        <div class="arial small" style="grid-column: cc3/cc4; grid-row: cr4/cr6;
+			align-self: center; justify-self: center;">
+            Observe The Sea From<br>The Lifeguard Post<br>
+            <div style="background-image: url(img/play4_frame_dkblue_canvas.gif); width: 130px;
+				height: 35px; padding-top: 15px;">
+                <u class="georgia medium" title="missing" style="background-color: #fff;">
+                    oceanview.jpg
+                </u>
+            </div>
+            OceanView Petz 4
+        </div>
+
+        <div class="arial" style="grid-column: cc3/cc4; grid-row: cr6/cr8;
+			align-self: center; justify-self: start; padding-left: 5px; text-align: left;">
+            <a href="dl/play4_oceanview1.env">CLICK HERE TO DOWNLOAD OCEAN VIEW PETZ 4</a>
+        </div>
+
+        <div class="border-left" style="grid-column: cc3/cc4; grid-row: cr4/cr9; align-self:
+			stretch; justify-self: stretch;"></div>
+
+        <!-- yellow god -->
+        <div style="grid-column: cc1/cc4; grid-row: cr10/cr11; background-color: #ffc;
+			align-self: stretch; justify-self: stretch; text-align: right;"></div>
+
+        <div class="small arial center" style="grid-column: cc2/cc4; grid-row: cr10/cr11;
+			justify-self: end; align-self: end; color: #000; font-weight: 700; padding-bottom:
+			10px;">
+            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><!-- #content -->
+</div><!-- #page -->
+</body>
+</html>
diff --git a/wordfire/play4.php b/wordfire/play4.php
deleted file mode 100644
index 151e75d..0000000
--- a/wordfire/play4.php
+++ /dev/null
@@ -1,238 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-	<!-- from source -->
-	<title>Completed Petz Playscenz Catz, Dogz 4&5</title>
-	<meta name="description" content="Petz Playscenz Catz,Dogz 4&5">
-	<meta name="keywords" content="Petz Playscenz Catz,Dogz 4&5">
-	<!--  -->
-
-	<!-- style -->
-	<link rel="stylesheet" href="style/style.css">
-	<style>
-		body { background-color: #fff; padding: 0; margin: 2px; }
-		a { color: #000; }
-		a:active { color: #000; }
-		a:visited { color: #000; }
-
-		#page {
-			display: grid;
-			gap: 0; grid-gap: 0;
-			padding: 0; margin: 0;
-			border-top: 2px solid #c00;
-			width: 761px;
-
-			grid-template-columns: [c1] 151px [space] 2px [c2] 608px [c3];
-			grid-template-rows: [r1] 151px [r2] 718px [r3];
-		}
-
-		#spacer {
-			grid-column: space/c2;
-			grid-row: r1/r2;
-			align-self: stretch;
-			justify-self: stretch;
-			padding-bottom: 149px;
-			border-bottom: 2px solid #c00;
-		}
-
-		/* header ------------------------------------------------------------------------------- */
-
-		#header {
-			grid-column: c2/c3;
-			grid-row: r1/r2;
-			align-self: center;
-			justify-self: stretch;
-			text-align: center;
-
-			border-left: 2px solid #c00;
-			border-right: 2px solid #c00;
-			border-top: 2px solid #c00;
-			background-color: #aecfcb;
-			padding-bottom: 5px;
-		}
-
-		#header > h1 { padding: 0; margin: 0 0 5px 0; }
-
-		#header > h2 {
-			font-size: 24px;
-			font-weight: 700;
-			color: #066;
-			padding: 0; margin: 0;
-		}
-
-		/* nav ---------------------------------------------------------------------------------- */
-
-		#nav {
-			grid-column: c1/space;
-			grid-row: r2/r3;
-			justify-self: center;
-			text-align: center;
-
-			border-top: 2px solid #c00;
-			padding-top: 30px;
-		}
-
-		#nav > a {
-			display: block;
-			background-color: #9cc;
-			color: #000;
-			font-weight: 700;
-			padding: 5px;
-			margin-bottom: 2px;
-			text-decoration: none;
-		}
-
-		#nav > a#current { background-color: #fff; }
-
-		#nav > a:hover, #nav > a#current:hover {
-			text-decoration: underline;
-			background-color: #fcc;
-		}
-
-		/* content ------------------------------------------------------------------------------ */
-
-		#content {
-			grid-column: c2/c3;
-			grid-row: r2/r3;
-
-			border-left: 2px solid #c00;
-			border-top: 2px solid #c00;
-			border-right: 2px solid #c00;
-
-			display: grid;
-			gap: 0; grid-gap: 0;
-
-			grid-template-columns: [cc1] 244px [cc2] 218px [cc3] 137px [cc4] 9px [cc5];
-			grid-template-rows: [cr1] 68px [cr2] 32px [cr3] 49px [cr4] 38px [cr5] 49px [cr6] 40px
-			[cr7] 27px [cr8] 72px [cr9] 25px [cr10] 318px [cr11];
-		}
-
-		#content > div {
-			text-align: center;
-			justify-self: center;
-		}
-
-		.border-left { border-left: 2px solid #c00; }
-	</style>
-</head>
-<body>
-<?php include '../_menu.php'; ?>
-
-	<div id="page">
-		<div id="top-left"></div>
-
-		<div id="spacer"></div>
-
-		<div id="header">
-			<h1>petz**<br>
-			WORDFIRE'S**petz</h1>
-			<h2>COMPLETED PLAYSCENZ</h2>
-		</div><!-- #header -->
-
-		<div id="nav">
-			<a href="index.php">Home</a>
-			<a href="play1.php">PETZ PLAYSCENZ</a>
-			<a href="play2.php">MORE PLAYSCENZ</a>
-			<a href="play3.php">AND>>>>MORE PETZ PLAYSCENZ</a>
-			<a href="possums.php">'POSSUMS</a>
-			<a id="current" href="play4.php">COMPLETED PLAYSCENZ</a>
-			<a href="sound.php">Sound Files</a>
-			<a href="precious.php">PRECIOUS ONEZ</a>
-		</div><!-- #nav -->
-
-		<div id="content">
-			<div style="grid-column: cc1/cc2; grid-row: cr1/cr2; justify-self: start; align-self:
-			center; padding: 5px 10px 0 10px;">
-				<img src="img/index_vote1.gif">
-			</div>
-
-			<div class="medium arial" style="grid-column: cc1/cc2; grid-row: cr2/cr3; justify-self:
-			start; align-self: end; padding-left: 5px; padding-bottom: 5px;"><i><b>.</b></i></div>
-
-			<!-- left column -->
-			<div class="small arial" style="grid-column: cc1/cc2; grid-row: cr4/cr6;">
-				Waterfalls Make This A Refreshing ChickenYard
-				<div style="background-image: url(img/play4_frame_blue_pinstripe.gif); width: 234px;
-				height: 35px; padding-top: 15px;">
-					<u class="georgia medium" title="missing" style="background-color: #fff;">
-						mountaintopchickenyard.jpg
-					</u>
-				</div>
-				CHICKENYARD PETZ 4
-			</div>
-
-			<div class="arial" style="grid-column: cc1/cc2; grid-row: cr6/cr7; justify-self: start;
-			text-align: left; padding-left: 5px;">
-				<a href="dl/play4_chickenyard.env">CLICK HERE TO DOWNLOAD CHICKENYARD PETZ 4</a>
-			</div>
-
-			<!-- middle column -->
-			<div class="arial" style="grid-column: cc2/cc3; grid-row: cr4/cr5;
-			justify-self: start; text-align: left; padding-left: 5px;">
-				<a href="dl/play4_weddingwalk1.62mb.env">CLICK HERE TO DOWNLOAD WEDDING WALK PETZ
-				4</a>
-			</div>
-
-			<div class="small arial" style="grid-column: cc2/cc3; grid-row: cr5/cr7;
-			align-self: center; justify-self: center;">
-				A complete PLAYSCENZ !<br>
-				<u class="georgia medium" style="display: block; padding: 10px 10px; border: 2px
-				ridge #000;" title="missing">
-					springweddinggarden.jpg
-				</u>
-				PETZ 4 Version
-			</div>
-
-			<div class="border-left" style="grid-column: cc2/cc3; grid-row: cr4/cr9; align-self:
-			stretch; justify-self: stretch;"></div>
-
-			<!-- right column -->
-			<div class="arial small" style="grid-column: cc3/cc4; grid-row: cr4/cr6;
-			align-self: center; justify-self: center;">
-				Observe The Sea From<br>The Lifeguard Post<br>
-				<div style="background-image: url(img/play4_frame_dkblue_canvas.gif); width: 130px;
-				height: 35px; padding-top: 15px;">
-					<u class="georgia medium" title="missing" style="background-color: #fff;">
-						oceanview.jpg
-					</u>
-				</div>
-				OceanView Petz 4
-			</div>
-
-			<div class="arial" style="grid-column: cc3/cc4; grid-row: cr6/cr8;
-			align-self: center; justify-self: start; padding-left: 5px; text-align: left;">
-				<a href="dl/play4_oceanview1.env">CLICK HERE TO DOWNLOAD OCEAN VIEW PETZ 4</a>
-			</div>
-
-			<div class="border-left" style="grid-column: cc3/cc4; grid-row: cr4/cr9; align-self:
-			stretch; justify-self: stretch;"></div>
-
-			<!-- yellow god -->
-			<div style="grid-column: cc1/cc4; grid-row: cr10/cr11; background-color: #ffc;
-			align-self: stretch; justify-self: stretch; text-align: right;"></div>
-
-			<div class="small arial center" style="grid-column: cc2/cc4; grid-row: cr10/cr11;
-			justify-self: end; align-self: end; color: #000; font-weight: 700; padding-bottom:
-			10px;">
-				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><!-- #content -->
-	</div><!-- #page -->
-</body>
-</html>
\ No newline at end of file
diff --git a/wordfire/possums.html b/wordfire/possums.html
new file mode 100644
index 0000000..13e26ec
--- /dev/null
+++ b/wordfire/possums.html
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- from source -->
+    <title>3-Column Page</title>
+    <!--  -->
+
+    <!-- style -->
+    <link rel="stylesheet" href="style/style.css">
+    <style>
+        body { background-color: #900; color: #009; }
+
+        a { color: #009; }
+
+        a:active { color: #009; }
+
+        a:visited { color: #009; }
+
+        #page {
+            display: grid;
+            gap: 0; grid-gap: 0;
+            grid-template-columns: [c1] 148px [c2] 615px [c3];
+            grid-template-rows: [r1] 156px [r2] 855px [r3];
+        }
+
+        /* header ------------------------------------------------------------------------------- */
+
+        #header {
+            grid-column: c2/c3;
+            grid-row: r1/r2;
+            justify-self: center;
+            align-self: center;
+            text-align: center;
+        }
+
+        #header > h1 { padding: 0; margin: 0 0 5px 0; }
+
+        #header > h2 {
+            color: #60f;
+            font-weight: 700;
+            font-size: 32px;
+            font-style: italic;
+            text-decoration: underline;
+            padding: 0; margin: 0;
+        }
+
+        /* nav ---------------------------------------------------------------------------------- */
+
+        #nav {
+            grid-column: c1/c2;
+            grid-row: r2/r3;
+            justify-self: center;
+            text-align: center;
+        }
+
+        #nav > a {
+            display: block;
+            text-decoration: none;
+            font-weight: 700;
+            padding: 5px;
+            margin-bottom: 2px;
+        }
+
+        #nav > a:hover { text-decoration: underline; }
+
+        /* content ------------------------------------------------------------------------------ */
+
+        #content {
+            grid-column: c2/c3;
+            grid-row: r2/r3;
+
+            display: grid;
+            gap: 0; grid-gap: 0;
+
+            grid-template-columns: [cc1] 320px [cc2] 295px [cc3];
+            grid-template-rows: [cr1] 76px [cr2] 28px [cr3] 96px [cr4] 66px [cr5] 59px [cr6] 50px
+			[cr7] 80px [cr8] 400px;
+        }
+
+        #content > div {
+            padding: 7px;
+        }
+    </style>
+
+    <!-- archive menu -->
+    <script src="config.js" type="module"></script>
+    <script src="/menu.js" type="module"></script>
+</head>
+<body>
+<div id="page">
+    <div id="header">
+        <h1>petz**<br>
+            WORDFIRE'S**petz</h1>
+        <h2 class="arial">DEDICATION TO 'POSSUMS</h2>
+    </div><!-- #header -->
+
+    <div id="nav" class="arial">
+        <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">PRECIOUS ONEZ</a>
+    </div><!-- #nav -->
+
+    <div id="content">
+        <div style="grid-column: cc1/cc2; grid-row: cr1/cr2; padding-left: 10px;">
+            <img src="img/index_vote1.gif">
+        </div>
+
+        <div style="grid-column: cc1/cc2; grid-row: cr2/cr3; align-self: center;">.</div>
+
+        <div class="courier big" style="grid-column: cc1/cc3; grid-row: cr3/cr4; font-style: italic;
+		font-weight: 700;">
+			<span style="background-color: #c00; color: #fff;">
+				this breed was created by Rachel at Meow<br>
+				Corp.Petz...you can get her Catz 3 version at her  web<br>
+				site 
+			</span><a
+                href="https://www.angelfire.com/art2/racieb/petz/">https://www.angelfire.com/art2/racieb/petz/</a>
+        </div>
+
+        <!-- left column -->
+        <div class="arial small center" style="grid-column: cc1/cc2; grid-row: cr4/cr5;
+		justify-self: center; align-self: end; margin-left: 40px;">
+            Opie Possum<br>
+            <span class="georgia medium" title="missing" style="color: #000;">jpgopie.jpg</span>
+        </div>
+
+        <div class="arial small center" style="grid-column: cc1/cc2; grid-row: cr5/cr6; margin-left:
+		40px; justify-self: center; align-self: center;">
+            THE PERFECT OPOSSUM HABITAT<br>
+            <u class="georgia medium" title="missing">possumholler.jpg</u><br>
+            POSSUM HOLLER PETZ 4
+        </div>
+
+        <div class="arial" style="grid-column: cc1/cc2; grid-row: cr6/cr7;">
+            <a href="dl/possums_possumHoller.zip">PETZ 4 CLICK HERE TO DOWNLOAD POSSUM HOLLER
+                PLAYSCENZ</a>
+        </div>
+
+        <!-- right column -->
+        <div class="arial" style="grid-column: cc2/cc3; grid-row: cr4/cr5; justify-self: center;
+		align-self: center; margin-right: 20px;">
+            <a href="dl/possums_opossump4.zip">Opossums Petz 4 click to download</a>
+        </div>
+
+        <div class="arial" style="grid-column: cc2/cc3; grid-row: cr5/cr6; justify-self: center;
+		align-self: end; margin-right: -10px;">
+            <a href="dl/possums_Opossump5.zip">Opossums Petz 5 click here to download<br>file</a>
+        </div>
+
+        <div class="courier big" style="grid-column: cc2/cc3; grid-row: cr7/cr8; justify-self:
+		center; align-self: center; color: #f00; padding: 0;">
+            <i style="background-color: #ffc;"><b>unedited Possum Holler<br>is on
+                <a href="play3.html">AND>>>>MORE PETZ<br>PLAYSCENZ</a>
+                &nbsp;page</b></i>
+        </div>
+
+        <div class="small arial center" style="grid-column: cc2/cc3; grid-row: cr8/cr9;
+			justify-self: end; align-self: end; font-weight: 700; padding-right: 20px;">
+            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><!-- #content -->
+</div><!-- #page -->
+</body>
+</html>
diff --git a/wordfire/possums.php b/wordfire/possums.php
deleted file mode 100644
index 8fe64b3..0000000
--- a/wordfire/possums.php
+++ /dev/null
@@ -1,180 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-	<!-- from source -->
-	<title>3-Column Page</title>
-	<!--  -->
-
-	<!-- style -->
-	<link rel="stylesheet" href="style/style.css">
-	<style>
-		body { background-color: #900; color: #009; }
-		a { color: #009; }
-		a:active { color: #009; }
-		a:visited { color: #009; }
-
-		#page {
-			display: grid;
-			gap: 0; grid-gap: 0;
-			grid-template-columns: [c1] 148px [c2] 615px [c3];
-			grid-template-rows: [r1] 156px [r2] 855px [r3];
-		}
-
-		/* header ------------------------------------------------------------------------------- */
-
-		#header {
-			grid-column: c2/c3;
-			grid-row: r1/r2;
-			justify-self: center;
-			align-self: center;
-			text-align: center;
-		}
-
-		#header > h1 { padding: 0; margin: 0 0 5px 0; }
-
-		#header > h2 {
-			color: #60f;
-			font-weight: 700;
-			font-size: 32px;
-			font-style: italic;
-			text-decoration: underline;
-			padding: 0; margin: 0;
-		}
-
-		/* nav ---------------------------------------------------------------------------------- */
-
-		#nav {
-			grid-column: c1/c2;
-			grid-row: r2/r3;
-			justify-self: center;
-			text-align: center;
-		}
-
-		#nav > a {
-			display: block;
-			text-decoration: none;
-			font-weight: 700;
-			padding: 5px;
-			margin-bottom: 2px;
-		}
-
-		#nav > a:hover { text-decoration: underline; }
-
-		/* content ------------------------------------------------------------------------------ */
-		
-		#content {
-			grid-column: c2/c3;
-			grid-row: r2/r3;
-
-			display: grid;
-			gap: 0; grid-gap: 0;
-
-			grid-template-columns: [cc1] 320px [cc2] 295px [cc3];
-			grid-template-rows: [cr1] 76px [cr2] 28px [cr3] 96px [cr4] 66px [cr5] 59px [cr6] 50px
-			[cr7] 80px [cr8] 400px;
-		}
-
-		#content > div {
-			padding: 7px;
-		}
-	</style>
-</head>
-<body>
-<?php include '../_menu.php'; ?>
-
-<div id="page">
-	<div id="header">
-		<h1>petz**<br>
-		WORDFIRE'S**petz</h1>
-		<h2 class="arial">DEDICATION TO 'POSSUMS</h2>
-	</div><!-- #header -->
-
-	<div id="nav" class="arial">
-		<a href="index.php">Home</a>
-		<a href="play1.php">PETZ PLAYSCENZ</a>
-		<a href="play2.php">MORE PLAYSCENZ</a>
-		<a href="play3.php">AND>>>>MORE PETZ PLAYSCENZ</a>
-		<a href="possums.php">'POSSUMS</a>
-		<a href="play4.php">COMPLETED PLAYSCENZ</a>
-		<a href="sound.php">Sound Files</a>
-		<a href="precious.php">PRECIOUS ONEZ</a>
-	</div><!-- #nav -->
-
-	<div id="content">
-		<div style="grid-column: cc1/cc2; grid-row: cr1/cr2; padding-left: 10px;">
-			<img src="img/index_vote1.gif">
-		</div>
-
-		<div style="grid-column: cc1/cc2; grid-row: cr2/cr3; align-self: center;">.</div>
-
-		<div class="courier big" style="grid-column: cc1/cc3; grid-row: cr3/cr4; font-style: italic;
-		font-weight: 700;">
-			<span style="background-color: #c00; color: #fff;">
-				this breed was created by Rachel at Meow<br>
-				Corp.Petz...you can get her Catz 3 version at her  web<br>
-				site 
-			</span><a
-			href="https://www.angelfire.com/art2/racieb/petz/">https://www.angelfire.com/art2/racieb/petz/</a>
-		</div>
-
-		<!-- left column -->
-		<div class="arial small center" style="grid-column: cc1/cc2; grid-row: cr4/cr5;
-		justify-self: center; align-self: end; margin-left: 40px;">
-			Opie Possum<br>
-			<span class="georgia medium" title="missing" style="color: #000;">jpgopie.jpg</span> 
-		</div>
-
-		<div class="arial small center" style="grid-column: cc1/cc2; grid-row: cr5/cr6; margin-left:
-		40px; justify-self: center; align-self: center;">
-			THE PERFECT OPOSSUM HABITAT<br>
-			<u class="georgia medium" title="missing">possumholler.jpg</u><br>
-			POSSUM HOLLER PETZ 4
-		</div>
-
-		<div class="arial" style="grid-column: cc1/cc2; grid-row: cr6/cr7;">
-			<a href="dl/possums_possumHoller.zip">PETZ 4 CLICK HERE TO DOWNLOAD POSSUM HOLLER
-			PLAYSCENZ</a>
-		</div>
-
-		<!-- right column -->
-		<div class="arial" style="grid-column: cc2/cc3; grid-row: cr4/cr5; justify-self: center;
-		align-self: center; margin-right: 20px;">
-			<a href="dl/possums_opossump4.zip">Opossums Petz 4 click to download</a>
-		</div>
-
-		<div class="arial" style="grid-column: cc2/cc3; grid-row: cr5/cr6; justify-self: center;
-		align-self: end; margin-right: -10px;">
-			<a href="dl/possums_Opossump5.zip">Opossums Petz 5 click here to download<br>file</a>
-		</div>
-
-		<div class="courier big" style="grid-column: cc2/cc3; grid-row: cr7/cr8; justify-self:
-		center; align-self: center; color: #f00; padding: 0;">
-			<i style="background-color: #ffc;"><b>unedited Possum Holler<br>is on
-			<a href="play3.php">AND>>>>MORE PETZ<br>PLAYSCENZ</a>
-			&nbsp;page</b></i>
-		</div>
-
-		<div class="small arial center" style="grid-column: cc2/cc3; grid-row: cr8/cr9;
-			justify-self: end; align-self: end; font-weight: 700; padding-right: 20px;">
-				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><!-- #content -->
-</div><!-- #page -->
-</body>
-</html>
\ No newline at end of file
diff --git a/wordfire/precious.html b/wordfire/precious.html
new file mode 100644
index 0000000..f190788
--- /dev/null
+++ b/wordfire/precious.html
@@ -0,0 +1,205 @@
+<!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="style/style.css">
+    <style>
+        body { background-color: #ccf; background-image: url(img/preciousmkg_countrybreeze_1.gif); }
+
+        a, a:active, a:visited { color: #000; }
+
+        #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: #63f;
+            font-weight: 700;
+            font-size: 32px;
+            padding: 0; margin: 0;
+        }
+    </style>
+
+    <!-- archive menu -->
+    <script src="config.js" type="module"></script>
+    <script src="/menu.js" type="module"></script>
+</head>
+<body>
+<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>
diff --git a/wordfire/precious.php b/wordfire/precious.php
deleted file mode 100644
index 4cf3123..0000000
--- a/wordfire/precious.php
+++ /dev/null
@@ -1,201 +0,0 @@
-<!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="style/style.css">
-	<style>
-		body { background-color: #ccf; background-image: url(img/preciousmkg_countrybreeze_1.gif); }
-		a, a:active, a:visited { color: #000; }
-
-		#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: #63f;
-			font-weight: 700;
-			font-size: 32px;
-			padding: 0; margin: 0;
-		}
-	</style>
-</head>
-<body>
-<?php include '../_menu.php'; ?>
-	<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.php">Home</a> |
-			<a href="play1.php">PETZ PLAYSCENZ</a> |
-			<a href="play2.php">MORE PLAYSCENZ</a> |
-			<a href="play3.php">AND>>>>MORE PETZ PLAYSCENZ</a> |
-			<a href="possums.php">'POSSUMS</a> |
-			<a href="play4.php">COMPLETED PLAYSCENZ</a> |
-			<a href="sound.php">Sound Files</a> |
-			<a href="precious.php" 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>
\ No newline at end of file
diff --git a/wordfire/sound.html b/wordfire/sound.html
new file mode 100644
index 0000000..e6bb147
--- /dev/null
+++ b/wordfire/sound.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- from source -->
+    <title>Sound Files</title>
+    <!--  -->
+
+    <!-- style -->
+    <link rel="stylesheet" href="style/style.css">
+    <style>
+        body {
+            background-image: url(img/sound_clouds.jpg);
+            margin-left: 10px;
+        }
+
+        a, a:active, a:hover { color: #000; }
+
+        #page {
+            display: grid;
+            column-gap: 10px;
+            row-gap: 0;
+            justify-items: center;
+            align-items: center;
+            text-align: center;
+
+            grid-template-columns: [c1] 135px [c2] 593px [c3];
+            grid-template-rows: [r1] 163px [r2] 532px [r3];
+        }
+
+        /* top-left ----------------------------------------------------------------------------- */
+
+        #top-left {
+            grid-column: c1/c2;
+            grid-row: r1/r2;
+        }
+
+        /* header ------------------------------------------------------------------------------- */
+
+        #header {
+            grid-column: c2/c3;
+            grid-row: r1/r2;
+        }
+
+        h1 { padding: 0; margin: 0 0 2px 0; }
+
+        h2 {
+            color: #609;
+            font-weight: 700;
+            font-size: 24px;
+            padding: 0;
+            margin: 0;
+        }
+
+        /* nav ---------------------------------------------------------------------------------- */
+
+        #nav {
+            grid-column: c1/c2;
+            grid-row: r2/r3;
+            align-self: start;
+            margin-top: 30px;
+        }
+
+        #nav > a {
+            display: block;
+            padding: 5px;
+            margin-bottom: 2px;
+            color: #000;
+            font-weight: 700;
+            text-decoration: none;
+        }
+
+        #nav > a:hover { text-decoration: underline; }
+
+        /* content ------------------------------------------------------------------------------ */
+
+        #content {
+            grid-column: c2/c3;
+            grid-row: r2/r3;
+
+            display: grid;
+            gap: 0; grid-gap: 0;
+
+            grid-template-columns: [cc1] 196px [cc2] 199px [cc3] 198px [cc4];
+            grid-template-rows: [cr1] 75px [cr2] 98px [cr3] 42px [cr4] 317px [cr5];
+
+            align-items: start;
+            justify-items: start;
+            text-align: left;
+            padding-top: 30px;
+        }
+
+        .ver-arial { font-family: Verdana, Arial, Helvetica, sans-serif; }
+    </style>
+
+    <!-- archive menu -->
+    <script src="config.js" type="module"></script>
+    <script src="/menu.js" type="module"></script>
+</head>
+<body>
+<div id="page">
+    <!-- #top-left ---------------------------------------------------------------------------------------------------->
+    <div id="top-left">
+        <img src="img/sound_new_005.gif">
+    </div>
+
+    <!-- #header ------------------------------------------------------------------------------------------------------>
+    <div id="header">
+        <h1>petz**<br>
+            WORDFIRE'S**petz</h1>
+        <h2>Sound Files</h2>
+    </div>
+
+    <!-- #nav --------------------------------------------------------------------------------------------------------->
+    <div id="nav">
+        <a href="index.html">Home</a>
+        <a href="play1.html">PETZ PLAYSCENZ</a>
+        <a href="play1.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">PRECIOUS ONEZ</a>
+    </div>
+
+    <!-- #content ----------------------------------------------------------------------------------------------------->
+    <div id="content">
+        <!-- top -->
+        <div style="grid-column: cc1/cc4; grid-row: cr1/cr2; font-style: italic;">
+            <b class="ver-arial medium" style="color: #609;">
+                add to your playscene editor wav files. Use them to make your own wedding playscenz. &nbsp;
+            </b>
+            <b class="arial" style="color: #096; background-color: #ffc;">
+                OZ SOUNDFILE AND BACKGROUND FOUND ON SISTER SITE.
+                <a href="https://web.archive.org/web/20050413020319/http://home.earthlink.net/~lindajoyce/">
+                    http://home.earthlink.net/~lindajoyce/</a>
+            </b>
+        </div>
+
+        <div style="grid-column: cc1/cc2; grid-row: cr2/cr3; padding: 10px;">
+            <img src="img/index_vote1.gif">
+        </div>
+
+        <!-- downloads -->
+        <div class="arial" style="grid-column: cc1/cc2; grid-row: cr3/cr4;">
+            <a href="dl/sound_chickenyardsounds.zip">CHICKEN YARD SOUNDS click here to download wav file</a>
+        </div>
+
+        <div class="arial" style="grid-column: cc2/cc3; grid-row: cr3/cr4;">
+            <a href="dl/sound_weddingmarch.wav">WEDDING MARCH click here to download wav file</a>
+        </div>
+
+        <div class="arial" style="grid-column: cc3/cc4; grid-row: cr3/cr4;">
+            <a href="dl/sound_weddingbells.wav">WEDDING BELLS click here to download wav file</a>
+        </div>
+
+        <!-- god -->
+        <div class="small arial center" style="grid-column: cc3/cc4; grid-row: cr4/cr5;
+			justify-self: end; align-self: end; color: #000; font-weight: 700; padding-bottom:
+			10px;">
+            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>
+</div>
+</body>
+</html>
diff --git a/wordfire/sound.php b/wordfire/sound.php
deleted file mode 100644
index f4c752d..0000000
--- a/wordfire/sound.php
+++ /dev/null
@@ -1,182 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-	<!-- from source -->
-	<title>Sound Files</title>
-	<!--  -->
-
-	<!-- style -->
-	<link rel="stylesheet" href="style/style.css">
-	<style>
-		body {
-			background-image: url(img/sound_clouds.jpg);
-			margin-left: 10px;
-		}
-
-		a, a:active, a:hover { color: #000; }
-
-		#page {
-			display: grid;
-			column-gap: 10px;
-			row-gap: 0;
-			justify-items: center;
-			align-items: center;
-			text-align: center;
-
-			grid-template-columns: [c1] 135px [c2] 593px [c3];
-			grid-template-rows: [r1] 163px [r2] 532px [r3];
-		}
-
-		/* top-left ----------------------------------------------------------------------------- */
-
-		#top-left {
-			grid-column: c1/c2;
-			grid-row: r1/r2;
-		}
-
-		/* header ------------------------------------------------------------------------------- */
-
-		#header {
-			grid-column: c2/c3;
-			grid-row: r1/r2;
-		}
-
-		h1 { padding: 0; margin: 0 0 2px 0; }
-
-		h2 {
-			color: #609;
-			font-weight: 700;
-			font-size: 24px;
-			padding: 0;
-			margin: 0;
-		}
-
-		/* nav ---------------------------------------------------------------------------------- */
-
-		#nav {
-			grid-column: c1/c2;
-			grid-row: r2/r3;
-			align-self: start;
-			margin-top: 30px;
-		}
-
-		#nav > a {
-			display: block;
-			padding: 5px;
-			margin-bottom: 2px;
-			color: #000;
-			font-weight: 700;
-			text-decoration: none;
-		}
-
-		#nav > a:hover { text-decoration: underline; }
-
-		/* content ------------------------------------------------------------------------------ */
-
-		#content {
-			grid-column: c2/c3;
-			grid-row: r2/r3;
-
-			display: grid;
-			gap: 0; grid-gap: 0;
-
-			grid-template-columns: [cc1] 196px [cc2] 199px [cc3] 198px [cc4];
-			grid-template-rows: [cr1] 75px [cr2] 98px [cr3] 42px [cr4] 317px [cr5];
-
-			align-items: start;
-			justify-items: start;
-			text-align: left;
-			padding-top: 30px;
-		}
-
-		.ver-arial { font-family: Verdana, Arial, Helvetica, sans-serif; }
-	</style>
-</head>
-<body>
-<?php include '../_menu.php'; ?>
-
-	<div id="page">
-		<!-- #top-left ---------------------------------------------------------------------------->
-		<div id="top-left">
-			<img src="img/sound_new_005.gif">
-		</div>
-
-		<!-- #header ------------------------------------------------------------------------------>
-		<div id="header">
-			<h1>petz**<br>
-			WORDFIRE'S**petz</h1>
-			<h2>Sound Files</h2>
-		</div>
-
-		<!-- #nav --------------------------------------------------------------------------------->
-		<div id="nav">
-			<a href="index.php">Home</a>
-			<a href="play1.php">PETZ PLAYSCENZ</a>
-			<a href="play1.php">MORE PLAYSCENZ</a>
-			<a href="play3.php">AND>>>>MORE PETZ PLAYSCENZ</a>
-			<a href="possums.php">'POSSUMS</a>
-			<a href="play4.php">COMPLETED PLAYSCENZ</a>
-			<a href="sound.php">Sound Files</a>
-			<a href="precious.php">PRECIOUS ONEZ</a>
-		</div>
-
-		<!-- #content ----------------------------------------------------------------------------->
-		<div id="content">
-			<!-- top -->
-			<div style="grid-column: cc1/cc4; grid-row: cr1/cr2; font-style: italic;">
-				<b class="ver-arial medium" style="color: #609;">
-					add to your playscene editor wav files. Use them to make your own wedding
-					playscenz. &nbsp;
-				</b>
-				<b class="arial" style="color: #096; background-color: #ffc;">
-					OZ SOUNDFILE AND BACKGROUND FOUND ON SISTER SITE.<a
-					href="https://web.archive.org/web/20050413020319/http://home.earthlink.net/~lindajoyce/">http://home.earthlink.net/~lindajoyce/</a>
-				</b>
-			</div>
-
-			<div style="grid-column: cc1/cc2; grid-row: cr2/cr3; padding: 10px;">
-				<img src="img/index_vote1.gif">
-			</div>
-
-			<!-- downloads -->
-			<div class="arial" style="grid-column: cc1/cc2; grid-row: cr3/cr4;">
-				<a href="dl/sound_chickenyardsounds.zip">CHICKEN YARD SOUNDS click here to download
-				wav file</a>
-			</div>
-
-			<div class="arial" style="grid-column: cc2/cc3; grid-row: cr3/cr4;">
-				<a href="dl/sound_weddingmarch.wav">WEDDING MARCH click here to download wav
-				file</a>
-			</div>
-
-			<div class="arial" style="grid-column: cc3/cc4; grid-row: cr3/cr4;">
-				<a href="dl/sound_weddingbells.wav">WEDDING BELLS click here to download wav
-				file</a>
-			</div>
-
-			<!-- god -->
-			<div class="small arial center" style="grid-column: cc3/cc4; grid-row: cr4/cr5;
-			justify-self: end; align-self: end; color: #000; font-weight: 700; padding-bottom:
-			10px;">
-				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>
-	</div>
-</body>
-</html>
\ No newline at end of file
diff --git a/wordfire/vars.php b/wordfire/vars.php
deleted file mode 100644
index 0d929bd..0000000
--- a/wordfire/vars.php
+++ /dev/null
@@ -1,39 +0,0 @@
-<?php
-	// get the current page
-	$page = basename($_SERVER["SCRIPT_FILENAME"], '.php');
-
-	// set the common parts of the wayback link once
-	$wburl = 'https://web.archive.org/web/';
-	$url   = '/http://home.earthlink.net/~wordfire/';
-
-	// set the part that changes per page
-	$links = array(
-		'index'    => '20050913215113',
-		'play1'    => '20050911044611',
-		'play2'    => '20050911220624',
-		'play3'    => '20050912163724',
-		'possums'  => '20050905152820',
-		'play4'    => '20050912184232',
-		'sound'    => '20050413012516',
-		'precious' => '20050413012604'
-	);
-
-	$source_page = array(
-		'play1'    => 'id1',
-		'play2'    => 'id5',
-		'play3'    => 'id6',
-		'possums'  => 'id12',
-		'play4'    => 'id13',
-		'sound'    => 'id14',
-		'precious' => 'id2'
-	);
-
-	// put it all together
-	// the index filename matches the source, so omit finding that if we're on that page
-	// otherwise: 
-	// wayback url + grab correct capture int from array + site url + source page name + ext
-	if ($page == 'index') {
-		$wayback = $wburl . $links[$page] . $url;
-	} else {
-		$wayback = $wburl . $links[$page] . $url . $source_page[$page] . '.html';
-	}