Hello
Hello

<style>
  body {
    background-color: black;
    color: white; /* makes text visible on black */
  }


.elegant-flicker {
  font-family: 'UnifrakturCook', serif;
  font-size: 3em;
  color: #e0e0e0;
  text-align: center;
  animation: flicker 3s infinite;
  letter-spacing: 2px;
  text-shadow: 0 0 5px #fff, 0 0 10px #a00, 0 0 20px #600;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  95%, 97% { opacity: 0.4; }
  96% { opacity: 0.1; }
}


.elegant-wave {
  text-align: center;
  animation: wave 2.5s infinite ease-in-out;
  display: inline-block;
}

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.elegant-haunt {
  font-family: 'UnifrakturCook', serif;
  font-size: 3em;
  color: #eee;
  text-align: center;
  animation: wave 2s infinite ease-in-out, flicker 3s infinite;
  text-shadow: 0 0 4px #fff, 0 0 12px #cc0000;
}

</style>

<h1 class="elegant-flicker">The Gathering</h1>

<h1 class="elegant-wave">Whispers in the Hall</h1>

<h1 class="elegant-haunt">Whispers in the skullery</h1>



<style>

.wave-text span {
  display: inline-block;
  animation: wave 1.5s infinite ease-in-out;
}

.wave-text span:nth-child(1) { animation-delay: 0s; }
.wave-text span:nth-child(2) { animation-delay: 0.1s; }
.wave-text span:nth-child(3) { animation-delay: 0.2s; }
.wave-text span:nth-child(4) { animation-delay: 0.3s; }
.wave-text span:nth-child(5) { animation-delay: 0.4s; }
/* continue for each letter */

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}


</style>

<h1 class="wave-text">
  <span>O</span><span>c</span><span>e</span><span>a</span><span>n</span>
  <span>W</span><span>a</span><span>v</span><span>e</span>
</h1>





<style>
@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook&display=swap');

.eerie-text {
  font-family: 'UnifrakturCook', serif;
  font-size: 3em;
  color: #f2f2f2;
  text-align: center;
  display: inline-block;
  letter-spacing: 0.1em;
  text-shadow:
    0 0 5px #ccc,
    0 0 10px #660000,
    0 0 20px #990000;
}

.eerie-text span {
  display: inline-block;
  animation: float 3s ease-in-out infinite, flicker 2.5s infinite;
}

.eerie-text span:nth-child(1) { animation-delay: 0s, 0s; }
.eerie-text span:nth-child(2) { animation-delay: 0.1s, 0.2s; }
.eerie-text span:nth-child(3) { animation-delay: 0.2s, 0.4s; }
.eerie-text span:nth-child(4) { animation-delay: 0.3s, 0.6s; }
.eerie-text span:nth-child(5) { animation-delay: 0.4s, 0.8s; }
.eerie-text span:nth-child(6) { animation-delay: 0.5s, 1s; }
.eerie-text span:nth-child(7) { animation-delay: 0.6s, 1.2s; }
.eerie-text span:nth-child(8) { animation-delay: 0.7s, 1.4s; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
  }
  20%, 22%, 24%, 55% {
    opacity: 0.4;
  }
}
</style>

<h1 class="eerie-text">
  <span>E</span><span>t</span><span>h</span><span>e</span><span>r</span><span>e</span><span>a</span><span>l</span>
</h1>





<style>
.shimmer {
  position: relative;
  color: #eee;
  font-size: 3em;
  font-weight: bold;
  background: linear-gradient(
    90deg,
    #eee 25%, 
    #fff 50%, 
    #eee 75%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

</style>

<h1 class="shimmer">Shimmering Text</h1>


<style>
.cathedral-text {
  font-family: 'UnifrakturCook', serif;
  font-size: 3em;
  color: #f9f4e7;
  text-shadow:
    0 0 5px #fdf6e3,
    0 0 10px #a67c00,
    0 0 15px #d4af37;
  letter-spacing: 0.05em;
  text-align: center;
}
</style>

<h1 class="cathedral-text">Sanctus</h1>









<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

.ethereal-melancholy {
  font-family: 'Playfair Display', serif;
  font-size: 3em;
  color: #a0a8b9; /* muted blue-gray */
  text-align: center;
  position: relative;
  filter: drop-shadow(0 0 6px rgba(160, 168, 185, 0.6));
  opacity: 0.85;
  animation: gentleFloat 6s ease-in-out infinite, fadePulse 5s ease-in-out infinite;
}

@keyframes gentleFloat {
  0%, 100% {
    transform: translateY(0);
    filter: drop-shadow(0 0 6px rgba(160, 168, 185, 0.6));
  }
  50% {
    transform: translateY(-6px);
    filter: drop-shadow(0 0 10px rgba(160, 168, 185, 0.8));
  }
}

@keyframes fadePulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.65; }
}
</style>

<h1 class="ethereal-melancholy">Fading Memories</h1>














<div class="wave-text">open the gates below... use desktop</div>

<style>
.wave-text {
  font-family: 'Linden Hill', serif;
  font-size: 2rem;
  color: #9e1540;
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.letter-wrap {
  position: relative;
  display: inline-block;
}
</style>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script>
class WaveText {
  constructor(selector) {
    this.letters = [];
    this.sineId = 0;
    this.phaseProgress = 0.1;

    $(selector).each((i, el) => {
      let $el = $(el);
      let $output = $el.text().split('').reduce((prev, letter) => {
        let $span = $('<span class="letter-wrap"></span>').text(letter);
        this.letters.push({
          mag: 0,
          id: this.letters.length,
          $el: $span,
          maxMag: Math.random() * 38 + 8
        });
        return prev.append($span);
      }, $('<div class="wrap"></div>'));

      $el.empty().append($output);
    });

    this.run();
  }

  run() {
    this.runIntervalId = setInterval(() => {
      this.letters.forEach((obj, i) => {
        obj.mag = Math.min(obj.mag + 0.005, obj.maxMag);

        let rad = this.sineId + i * this.phaseProgress,
          cos = Math.cos(rad),
          sin = Math.sin(rad);

        obj.$el.css({
          left: obj.mag * cos,
          top: 1.5 * obj.mag * sin,
          opacity: 1 - 0.45 * (1 + sin) * (obj.mag / obj.maxMag)
        });
      });

      this.sineId += 0.085;
    }, 30);
  }
}

$(document).ready(() => {
  new WaveText('.wave-text');
});
</script>




<h1 class="flower-text">Blooming Text</h1>

<style>
.flower-text {
  font-size: 4em;
  font-weight: bold;
  background: url('https://www.transparenttextures.com/patterns/floral-pattern.png') repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-align: center;
  margin: 40px;
}
</style>




<h1 class="tree-text">Growing Tree</h1>

<style>
@keyframes grow {
  0% {
    transform: scaleY(0);
    opacity: 0;
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.tree-text {
  font-size: 4em;
  font-weight: bold;
  color: #2e7d32; /* dark green */
  transform-origin: bottom;
  animation: grow 2s ease forwards;
  text-align: center;
  margin: 40px;
  text-shadow: 1px 1px 2px #1b5e20;
}
</style>




<div class="flower-container">
  <h1>Flower Power</h1>
  <div class="petal">&#127800;</div>
  <div class="petal">&#127802;</div>
  <div class="petal">&#127799;</div>
</div>

<style>
.flower-container {
  position: relative;
  display: inline-block;
  font-size: 3em;
  color: #b8325f;
  font-weight: bold;
}

.petal {
  position: absolute;
  font-size: 1.2em;
  animation: fall 4s linear infinite;
  opacity: 0.7;
}

.petal:nth-child(2) {
  left: 10%;
  animation-delay: 0s;
}

.petal:nth-child(3) {
  left: 50%;
  animation-delay: 1.5s;
}

.petal:nth-child(4) {
  left: 80%;
  animation-delay: 3s;
}

@keyframes fall {
  0% {
    top: -2em;
    opacity: 1;
  }
  100% {
    top: 5em;
    opacity: 0;
  }
}
</style>










<h1 class="flower-fill-text">Blooming Text</h1>

<style>
.flower-fill-text {
  font-size: 4em;
  font-weight: bold;
  text-align: center;
  background: url('https://www.transparenttextures.com/patterns/floral-pattern.png') repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin: 40px auto;
  width: fit-content;
}
</style>






<style>
.growing-tree {
  font-size: 4em;
  font-weight: bold;
  color: #2e7d32;
  text-align: center;
  transform-origin: bottom center;
  animation: growTree 3s ease-in-out forwards;
  margin: 40px auto;
  width: fit-content;
  text-shadow: 0 0 10px #81c784;
}

@keyframes growTree {
  0% {
    transform: scaleY(0.1);
    opacity: 0;
    color: #2e7d32;
    text-shadow: none;
  }
  50% {
    transform: scaleY(1.2);
    opacity: 1;
    color: #a5d6a7; /* lighter leaf green */
    text-shadow: 0 0 20px #a5d6a7;
  }
  100% {
    transform: scaleY(1);
    color: #2e7d32;
    text-shadow: 0 0 10px #81c784;
  }
}

</style>




<style>
.blooming-flowers {
  font-size: 5em;
  font-weight: bold;
  font-family: 'Georgia', serif;
  color: #FF69B4; /* bright pink flower base color */
  text-align: center;  /* centers only the text inside the element */
  animation: bloom 3s ease forwards;
  text-shadow:
    0 0 10px #FF69B4,
    0 0 20px #FF1493,
    0 0 30px #FF69B4,
    0 0 40px #FF1493,
    0 0 50px #FF69B4,
    0 0 60px #FF1493;
}

@keyframes bloom {
  0% {
    transform: scale(0.7);
    opacity: 0;
    filter: blur(5px);
    text-shadow: none;
    color: #FF69B4;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
    filter: blur(0);
    text-shadow:
      0 0 10px #FF69B4,
      0 0 20px #FF1493,
      0 0 30px #FF69B4,
      0 0 40px #FF1493,
      0 0 50px #FF69B4,
      0 0 60px #FF1493;
    color: #FF1493;
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
    text-shadow:
      0 0 15px #FF69B4,
      0 0 30px #FF1493,
      0 0 45px #FF69B4,
      0 0 60px #FF1493,
      0 0 75px #FF69B4,
      0 0 90px #FF1493;
    color: #FF69B4;
  }
}

</style>

<h1 class="blooming-flowers">Blooming Flowers</h1>








<h1 class="growing-tree">Growing Tree</h1>

<style>
.growing-tree {
  font-size: 4em;
  font-weight: bold;
  color: #2e7d32; /* dark green */
  text-align: center;
  transform-origin: bottom center;
  animation: growTree 3s ease-in-out forwards;
  margin: 40px auto;
  width: fit-content;
}

@keyframes growTree {
  0% {
    transform: scaleY(0.1);
    opacity: 0;
  }
  50% {
    transform: scaleY(1.2);
    opacity: 1;
  }
  100% {
    transform: scaleY(1);
  }
}
</style>









<meta charset="utf-8">
<div style="max-width: 600px; margin: auto; text-align: center;">
  <canvas id="doomCanvas" width="600" height="400" tabindex="1"></canvas>
  <br />
  <button id="restart-btn">Restart</button>
  <button id="pause-btn">Pause</button>
</div>

<style>
  #doomCanvas {
    background-color: #001530;
    display: block;
    margin: auto;
  }

  button {
    background-color: #2c5e8a;
    color: #FFFFFF;
    padding: 10px 20px;
    border: none;
    font-size: 18px;
    cursor: pointer;
    margin: 10px 5px 0;
    width: 120px;
    border-radius: 4px;
    font-family: Garamond, "Lora", serif;
  }

  button:hover {
    background-color: #54b0ff;
  }
</style>

<script>
(function () {
  const canvas = document.getElementById("doomCanvas");
  const ctx = canvas.getContext("2d");
  const WIDTH = canvas.width;
  const HEIGHT = canvas.height;
  const restartBtn = document.getElementById("restart-btn");
  const pauseBtn = document.getElementById("pause-btn");

  const player = {
    x: WIDTH / 2,
    y: HEIGHT - 80,
    size: 32,
    speed: 3,
    health: 5,
    invincible: false
  };

  const keys = {};
  const obstacles = [];
  const popups = [];

  // Starfield for twinkling stars
  const stars = [];
  for (let i = 0; i < 100; i++) {
    stars.push({
      x: Math.random() * WIDTH,
      y: Math.random() * HEIGHT,
      radius: Math.random() * 1.5,
      twinkle: Math.random() * 0.05 + 0.01,
      alpha: Math.random()
    });
  }

  let score = 0;
  let frame = 0;
  let gameOver = false;
  let paused = false;
  let lastSpawnTime = 0;
  const spawnInterval = 1000;

  const werewolf = {
    x: WIDTH / 2,
    y: -100,
    speed: 1.2,
    active: false
  };

  // Images and their URLs (unchanged from your original)
  const images = {};
  const heartImage = new Image();
  heartImage.src = "https://orchisnocturna.neocities.org/OrchidVector.png";

  const imagePaths = {
    player: "https://orchisnocturna.neocities.org/MermaidVector.png",
    werewolf: "https://orchisnocturna.neocities.org/Werewolf%20Vector.png",
    good: [
      "https://orchisnocturna.neocities.org/CrossVector.png", // Faith power-up (glowing cross)
      "https://orchisnocturna.neocities.org/OakVector.png",
      "https://orchisnocturna.neocities.org/MoonVector.png"
    ],
    evil: [
      "https://orchisnocturna.neocities.org/CactusVector.png",
      "https://orchisnocturna.neocities.org/SharkAttackVector.png"
    ]
  };

  function loadImages(paths, callback) {
    let loaded = 0;
    // Flatten to count total images
    const total = Object.values(paths).flat().length;

    for (let key in paths) {
      images[key] = Array.isArray(paths[key]) ? [] : null;
      (Array.isArray(paths[key]) ? paths[key] : [paths[key]]).forEach((src, i) => {
        const img = new Image();
        img.onload = () => {
          loaded++;
          if (loaded === total) callback();
        };
        img.src = src;
        if (Array.isArray(paths[key])) {
          images[key][i] = img;
        } else {
          images[key] = img;
        }
      });
    }
  }

  function spawnObstacle() {
    const isGood = Math.random() > 0.4;
    const imgList = isGood ? images.good : images.evil;
    const imgIndex = Math.floor(Math.random() * imgList.length);
    const img = imgList[imgIndex];
    obstacles.push({
      x: Math.random() * (WIDTH - 32),
      y: -40,
      image: img,
      good: isGood,
      type: isGood && imgIndex === 0 ? "faith" : "normal" // mark glowing cross as faith power-up
    });
  }

  function drawBackground() {
    ctx.fillStyle = "#001530";
    ctx.fillRect(0, 0, WIDTH, HEIGHT);

    stars.forEach(star => {
      star.alpha += star.twinkle;
      if (star.alpha > 1) {
        star.alpha = 1;
        star.twinkle *= -1;
      } else if (star.alpha < 0) {
        star.alpha = 0;
        star.twinkle *= -1;
      }

      ctx.beginPath();
      ctx.fillStyle = `rgba(255, 255, 255, ${star.alpha.toFixed(2)})`;
      ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
      ctx.fill();
    });
  }

  function drawPlayer() {
    ctx.drawImage(images.player, player.x - player.size / 2, player.y - player.size / 2, player.size, player.size);
  }

  function movePlayer() {
    if (keys["ArrowLeft"] || keys["a"]) player.x -= player.speed;
    if (keys["ArrowRight"] || keys["d"]) player.x += player.speed;
    if (keys["ArrowUp"] || keys["w"]) player.y -= player.speed;
    if (keys["ArrowDown"] || keys["s"]) player.y += player.speed;

    player.x = Math.max(player.size / 2, Math.min(WIDTH - player.size / 2, player.x));
    player.y = Math.max(player.size / 2, Math.min(HEIGHT - player.size / 2, player.y));
  }

  function drawObstacles() {
    obstacles.forEach(o => {
      if (o.y > -40 && o.y < HEIGHT + 40) {
        if (o.good && o.type === "faith") {
          // glowing effect for faith power-up (cross)
          ctx.save();
          ctx.shadowColor = "cyan";
          ctx.shadowBlur = 15;
          ctx.drawImage(o.image, o.x, o.y, 32, 32);
          ctx.restore();
        } else {
          ctx.drawImage(o.image, o.x, o.y, 32, 32);
        }
      }
    });
  }

  function updateObstacles() {
    for (let i = obstacles.length - 1; i >= 0; i--) {
      const o = obstacles[i];
      o.y += 2;

      // collision check (simple circle)
      if (checkCollision(player.x, player.y, o.x + 16, o.y + 16, 28)) {
        if (o.good) {
          score++;
          popups.push({ text: "A symbol of hope...", x: o.x, y: o.y, opacity: 1 });
          if (o.type === "faith") {
            // Faith power-up grants temporary invincibility
            player.invincible = true;
            setTimeout(() => (player.invincible = false), 3000);
          }
        } else {
          if (!player.invincible) {
            player.health--;
            player.invincible = true;
            setTimeout(() => (player.invincible = false), 1000);
          }
          if (player.health <= 0) gameOver = true;
        }
        obstacles.splice(i, 1);
      } else if (o.y > HEIGHT + 40) {
        // Remove obstacles once they go offscreen
        obstacles.splice(i, 1);
      }
    }
  }

  function drawWerewolf() {
    if (!werewolf.active) return;
    ctx.drawImage(images.werewolf, werewolf.x - 16, werewolf.y, 32, 32);
  }

  function updateWerewolf() {
    if (!werewolf.active) return;
    werewolf.y += werewolf.speed;
    werewolf.x += (player.x - werewolf.x) * 0.02;
    if (checkCollision(player.x, player.y, werewolf.x, werewolf.y, 28)) {
      gameOver = true;
    }
  }

  function drawPopups() {
    for (let i = popups.length - 1; i >= 0; i--) {
      const p = popups[i];
      ctx.fillStyle = `rgba(255, 255, 255, ${p.opacity})`;
      ctx.font = "14px Garamond, serif";
      ctx.fillText(p.text, p.x, p.y);
      p.y -= 0.5;
      p.opacity -= 0.01;
      if (p.opacity <= 0) popups.splice(i, 1);
    }
  }

  function drawHUD() {
    ctx.fillStyle = "#ffffff";
    ctx.font = "18px Garamond, serif";
    ctx.textAlign = "left";
    ctx.fillText(`Faith: ${score} / 77`, 10, 25);
    for (let i = 0; i < player.health; i++) {
      ctx.drawImage(heartImage, 10 + i * 20, 30, 18, 18);
    }
  }

  function drawGameOver() {
    ctx.fillStyle = "rgba(0,0,0,0.7)";
    ctx.fillRect(0, 0, WIDTH, HEIGHT);
    ctx.fillStyle = "#ffffff";
    ctx.font = "24px Garamond, serif";
    ctx.textAlign = "center";
    const msg = score >= 77 ? "✝ You endured with faith ✝" : "✝ You were overtaken by darkness!";
    ctx.fillText(msg, WIDTH / 2, HEIGHT / 2 - 20);
    ctx.font = "18px Garamond, serif";
    ctx.fillText("Click Restart to try again", WIDTH / 2, HEIGHT / 2 + 20);
  }

  function checkCollision(x1, y1, x2, y2, radius) {
    const dx = x1 - x2;
    const dy = y1 - y2;
    return dx * dx + dy * dy < radius * radius;
  }

  function loop(timestamp = 0) {
    if (paused) {
      requestAnimationFrame(loop);
      return;
    }
    ctx.clearRect(0, 0, WIDTH, HEIGHT);

    if (gameOver || score >= 77) {
      drawBackground();
      drawPlayer();
      drawObstacles();
      drawWerewolf();
      drawHUD();
      drawGameOver();
      return;
    }

    frame++;
    drawBackground();
    movePlayer();
    drawPlayer();
    drawObstacles();
    updateObstacles();
    drawWerewolf();
    updateWerewolf();
    drawHUD();
    drawPopups();

    if (!lastSpawnTime || timestamp - lastSpawnTime > spawnInterval) {
      spawnObstacle();
      lastSpawnTime = timestamp;
    }

    if (frame === 2000) werewolf.active = true;

    requestAnimationFrame(loop);
  }

  function resetGame() {
    player.x = WIDTH / 2;
    player.y = HEIGHT - 80;
    player.health = 5;
    player.invincible = false;
    score = 0;
    frame = 0;
    gameOver = false;
    paused = false;
    obstacles.length = 0;
    popups.length = 0;
    werewolf.x = WIDTH / 2;
    werewolf.y = -100;
    werewolf.active = false;
    requestAnimationFrame(loop);
  }

  function togglePause() {
    paused = !paused;
    pauseBtn.textContent = paused ? "Resume" : "Pause";
    if (!paused) {
      requestAnimationFrame(loop);
    }
  }

  loadImages(imagePaths, () => {
    window.addEventListener("keydown", (e) => {
      keys[e.key] = true;
      if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "a", "d", "w", "s"].includes(e.key)) e.preventDefault();
    });
    window.addEventListener("keyup", (e) => {
      keys[e.key] = false;
    });
    restartBtn.addEventListener("click", resetGame);
    pauseBtn.addEventListener("click", togglePause);

    // Start game loop
    requestAnimationFrame(loop);
  });
})();
</script>