latest

update birb
birby
75 changed files with 708 additions and 10 deletions
--- a/birb/120359597_p0_master1200.jpg
+++ b/birb/120359597_p0_master1200.jpg
--- a/birb/120399811_p0.png
+++ b/birb/120399811_p0.png
--- a/birb/123075341_p0.png
+++ b/birb/123075341_p0.png
--- a/birb/2024-09-29
+++ b/birb/2024-09-29
--- a/birb/2024-10-05
+++ b/birb/2024-10-05
--- a/birb/2024-11-07
+++ b/birb/2024-11-07
--- a/birb/2024-12-11
+++ b/birb/2024-12-11
--- a/birb/2024-12-11
+++ b/birb/2024-12-11
--- a/birb/20240804_145436.jpg
+++ b/birb/20240804_145436.jpg
--- a/birb/20240817_191024.jpg
+++ b/birb/20240817_191024.jpg
--- a/birb/20241028_103520.jpg.webp
+++ b/birb/20241028_103520.jpg.webp
--- a/birb/20241216_101535.jpg.webp
+++ b/birb/20241216_101535.jpg.webp
--- a/birb/3b17c0ec-2845-4cf8-87c4-b33355de6569.png
+++ b/birb/3b17c0ec-2845-4cf8-87c4-b33355de6569.png
--- a/birb/3birb.png
+++ b/birb/3birb.png
--- a/[VpXvkd7xHkI].mp3
+++ b/[VpXvkd7xHkI].mp3
--- a/birb/GRXl9VHWUAACMnp.png
+++ b/birb/GRXl9VHWUAACMnp.png
--- a/birb/GgQSrYuXYAAL3me.jpeg
+++ b/birb/GgQSrYuXYAAL3me.jpeg
--- a/[1mThrGTqIvg].mp3
+++ b/[1mThrGTqIvg].mp3
--- a/birb/IMG_20240818_111736.jpg
+++ b/birb/IMG_20240818_111736.jpg
--- a/birb/IMG_20240826_162440_1_1_1.jpg.webp
+++ b/birb/IMG_20240826_162440_1_1_1.jpg.webp
--- a/birb/IMG_20240828_151731_1_1_1.jpg.webp
+++ b/birb/IMG_20240828_151731_1_1_1.jpg.webp
--- a/birb/IMG_20240912_162034_181.jpg
+++ b/birb/IMG_20240912_162034_181.jpg
--- a/birb/IMG_20241014_085715_1_1.jpg.webp
+++ b/birb/IMG_20241014_085715_1_1.jpg.webp
--- a/birb/IMG_20241014_154029_1_1.jpg.webp
+++ b/birb/IMG_20241014_154029_1_1.jpg.webp
--- a/birb/IMG_20241101_085237_1_1.jpg.webp
+++ b/birb/IMG_20241101_085237_1_1.jpg.webp
--- a/birb/IMG_20241104_085326_1_1.jpg.webp
+++ b/birb/IMG_20241104_085326_1_1.jpg.webp
--- a/birb/IMG_20241108_200706.jpg.webp
+++ b/birb/IMG_20241108_200706.jpg.webp
--- a/birb/IMG_20241118_212508_229.jpg.webp
+++ b/birb/IMG_20241118_212508_229.jpg.webp
--- a/birb/IMG_20241127_000851_1_1.jpg.webp
+++ b/birb/IMG_20241127_000851_1_1.jpg.webp
--- a/birb/IMG_20241211_235001_1_1.jpg.webp
+++ b/birb/IMG_20241211_235001_1_1.jpg.webp
--- a/[6hk2ocQJBV8].mp3
+++ b/[6hk2ocQJBV8].mp3
--- a/birb/SPOILER_birb_emotes2.png
+++ b/birb/SPOILER_birb_emotes2.png
--- a/birb/SPOILER_image.png.webp-1.png
+++ b/birb/SPOILER_image.png.webp-1.png
--- a/birb/SPOILER_pov.png
+++ b/birb/SPOILER_pov.png
--- a/birb/Screenshot_from_2024-07-03_19-32-29.png
+++ b/birb/Screenshot_from_2024-07-03_19-32-29.png
--- a/birb/VRChat_2024-07-07_04-41-32.634_2560x1440.png
+++ b/birb/VRChat_2024-07-07_04-41-32.634_2560x1440.png
--- a/birb/VRChat_2024-07-07_04-42-09.301_2560x1440.png
+++ b/birb/VRChat_2024-07-07_04-42-09.301_2560x1440.png
--- a/birb/VRChat_2024-07-07_04-42-13.704_2560x1440.png
+++ b/birb/VRChat_2024-07-07_04-42-13.704_2560x1440.png
--- a/birb/VRChat_2024-07-07_04-43-35.553_2560x1440.png
+++ b/birb/VRChat_2024-07-07_04-43-35.553_2560x1440.png
--- a/birb/VRChat_2024-07-07_04-43-42.051_2560x1440.png
+++ b/birb/VRChat_2024-07-07_04-43-42.051_2560x1440.png
--- a/birb/VRChat_2024-07-07_04-43-45.622_2560x1440.png
+++ b/birb/VRChat_2024-07-07_04-43-45.622_2560x1440.png
--- a/birb/VRChat_2024-07-07_04-43-48.483_2560x1440.png
+++ b/birb/VRChat_2024-07-07_04-43-48.483_2560x1440.png
--- a/birb/VRChat_2024-07-07_04-43-58.216_2560x1440.png
+++ b/birb/VRChat_2024-07-07_04-43-58.216_2560x1440.png
--- a/birb/VRChat_2024-07-07_04-44-07.915_2560x1440.png
+++ b/birb/VRChat_2024-07-07_04-44-07.915_2560x1440.png
--- a/birb/VRChat_2024-07-07_04-44-11.847_2560x1440.png
+++ b/birb/VRChat_2024-07-07_04-44-11.847_2560x1440.png
--- a/birb/VRChat_2024-07-13_05-07-20.912_2560x1440.png
+++ b/birb/VRChat_2024-07-13_05-07-20.912_2560x1440.png
--- a/birb/b.png
+++ b/birb/b.png
--- a/birb/bir2b.png.webp
+++ b/birb/bir2b.png.webp
--- a/birb/birb.png.webp
+++ b/birb/birb.png.webp
--- a/birb/birb3.png
+++ b/birb/birb3.png
--- a/birb/birb_emotes.png
+++ b/birb/birb_emotes.png
--- a/birb/birbe3.png.webp
+++ b/birb/birbe3.png.webp
--- a/birb/birby.png.webp
+++ b/birb/birby.png.webp
--- a/birb/dark.png.webp
+++ b/birb/dark.png.webp
--- a/birb/dc0417a.png
+++ b/birb/dc0417a.png
--- a/birb/faces-1.png
+++ b/birb/faces-1.png
--- a/birb/image-1.png
+++ b/birb/image-1.png
--- a/birb/image-4.png
+++ b/birb/image-4.png
--- a/birb/image.png
+++ b/birb/image.png
--- a/birb/index.html
+++ b/birb/index.html
@ -0,0 +1,526 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🐦 Birby 🐦</title>
    <style>
        :root {
            --main-bg-color: #f0d9f9;
            --accent-color: #d93fe0;
            --text-color: #4a4a4a;
            --frame-bg-color: #ffffff;
            --hover-bg-color: #f7e0ff;
        }
        body {
            background-color: rgb(24, 24, 24);
            font-family: 'Courier New', Courier, monospace;
            margin: auto;
            overflow-x: hidden;
            background-image: url("./mainbackground.png");
            animation: scrollBackground 4s linear infinite; /* Controls the scrolling animation */
        }
        @keyframes scrollBackground {
            from {
                background-position: 0 0; /* Start position */
            }
            to {
                background-position: 128px 128px; /* End position for scrolling */
            }
        }
        .music-player {
            width: 100%;
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 0;
            z-index: 1000; /* Ensures it stays on top of other content */
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
        }
        .music-player audio {
            width: 80%; /* Adjusts the audio player's width */
            max-width: 600px; /* Ensures it doesn't become too large */
        }
        .photo-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        .photo-frame {
            background-color: var(--frame-bg-color);
            border: 5px solid var(--accent-color);
            padding: 10px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            max-width: 300px;
            text-align: center;
            cursor: pointer;
            position: relative;
            margin-top: 10px;
            animation: dance 3s ease-in-out infinite;
        }
        /* Staggered alignment using nth-child */
        .photo-frame:nth-child(odd) {
            margin-top: 30px;
        }
        .photo-frame:nth-child(3n) {
            margin-top: 50px;
        }
        /* Dance animation */
        @keyframes dance {
            0%, 100% {
                transform: translateX(-5px);
            }
            50% {
                transform: translateX(5px);
            }
        }
        .photo-frame img {
            display: block;
            max-width: 100%;
            max-height: 200px;
            height: auto;
            margin: 0 auto; /* Centers the image horizontally */
            border-radius: 10px;
        }
        .photo-frame p {
            font-size: 1.1rem;
            margin-top: 10px;
            text-align: center;
        }
        .photo-frame:hover {
            background-color: var(--hover-bg-color);
            transform: scale(1.05);
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }
        .modal img {
            max-width: 90%;
            max-height: 90%;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }
        .modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            color: #fff;
            font-size: 2rem;
            cursor: pointer;
        }
        footer {
            margin-top: 20px;
            width: 100%;
            text-align: center;
            color: var(--accent-color);
        }
        @media (max-width: 768px) {
            .photo-container {
                gap: 15px;
            }
        }
        @media (max-width: 480px) {
            body {
                padding: 10px;
            }
            .photo-container {
                gap: 10px;
            }
        }
    </style>
 </head>
 <body>
    <div class="photo-container">
        <!-- Photo frames -->
        <div class="photo-frame" onclick="openModal('./3birb.png')">
            <img src="./3birb.png" alt="Birb 1">
            <p>Portrait</p>
        </div>
        <div class="photo-frame" onclick="openModal('./birb3.png')">
            <img src="./birb3.png" alt="Birb 2">
            <p>Exploring new heights</p>
        </div>
        <div class="photo-frame" onclick="openModal('./birb_emotes.png')">
            <img src="./birb_emotes.png" alt="Birb 3">
            <p>Heart</p>
        </div>
        <div class="photo-frame" onclick="openModal('./GRXl9VHWUAACMnp.png')">
            <img src="./GRXl9VHWUAACMnp.png" alt="Birb 4">
            <p>Coincidence?</p>
        </div>
        <div class="photo-frame" onclick="openModal('./image-1.png')">
            <img src="./image-1.png" alt="Birb 5">
            <p>Peaceful moment</p>
        </div>
        <div class="photo-frame" onclick="openModal('./image.png')">
            <img src="./image.png">
            <p>Sketch</p>
        </div>
        <div class="photo-frame" onclick="openModal('./IMG_20240818_111736.jpg')">
            <img src="./IMG_20240818_111736.jpg">
            <p>o-o =^=</p>
        </div>
        <div class="photo-frame" onclick="openModal('./IMG_20240912_162034_181.jpg')">
            <img src="./IMG_20240912_162034_181.jpg">
            <p>Surrounded by friends</p>
        </div>
        <div class="photo-frame" onclick="openModal('./Screenshot_from_2024-07-03_19-32-29.png')">
            <img src="./Screenshot_from_2024-07-03_19-32-29.png">
            <p>what you looking at</p>
        </div>
        <div class="photo-frame" onclick="openModal('./SPOILER_birb_emotes2.png')">
            <img src="./SPOILER_birb_emotes2.png">
            <p>Melon</p>
        </div>
        <div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-41-32.634_2560x1440.png')">
            <img src="./VRChat_2024-07-07_04-41-32.634_2560x1440.png">
            <p>Neon</p>
        </div>
        <div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-42-09.301_2560x1440.png')">
            <img src="./VRChat_2024-07-07_04-42-09.301_2560x1440.png">
            <p>Music?</p>
            <div class="music-player">
                <audio controls>
                    <source src="./HOME [1mThrGTqIvg].mp3" type="audio/mpeg">
                    Your browser does not support the audio element.
                </audio>
            </div>
        </div>
        <div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-42-13.704_2560x1440.png')">
            <img src="./VRChat_2024-07-07_04-42-13.704_2560x1440.png">
            <p>Happy</p>
        </div>
        <div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-43-35.553_2560x1440.png')">
            <img src="./VRChat_2024-07-07_04-43-35.553_2560x1440.png">
            <p>Hello</p>
        </div>
        <div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-43-42.051_2560x1440.png')">
            <img src="./VRChat_2024-07-07_04-43-42.051_2560x1440.png">
            <p>Over here</p>
        </div>
        <div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-43-45.622_2560x1440.png')">
            <img src="./VRChat_2024-07-07_04-43-45.622_2560x1440.png">
            <p>Almost wanted to say something</p>
        </div>
        <div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-43-48.483_2560x1440.png')">
            <img src="./VRChat_2024-07-07_04-43-48.483_2560x1440.png">
            <p>Keeping quiet?</p>
        </div>
        <div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-43-58.216_2560x1440.png')">
            <img src="./VRChat_2024-07-07_04-43-58.216_2560x1440.png">
            <p>Getting used to make captions</p>
        </div>
        <div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-44-07.915_2560x1440.png')">
            <img src="./VRChat_2024-07-07_04-44-07.915_2560x1440.png">
            <p>Neon city</p>
        </div>
        <div class="photo-frame" onclick="openModal('./VRChat_2024-07-07_04-44-11.847_2560x1440.png')">
            <img src="./VRChat_2024-07-07_04-44-11.847_2560x1440.png">
            <p>Picture</p>
        </div>
        <div class="photo-frame" onclick="openModal('./3b17c0ec-2845-4cf8-87c4-b33355de6569.png')">
            <img src="./3b17c0ec-2845-4cf8-87c4-b33355de6569.png">
            <p>Fluffy</p>
        </div>
        <div class="photo-frame" onclick="openModal('./20240804_145436.jpg')">
            <img src="./20240804_145436.jpg">
            <p>Slurp</p>
            <div class="music-player">
                <audio controls>
                    <source src="./Depresión sonora - Tu no me tienes que salvar  [Letra] [VpXvkd7xHkI].mp3" type="audio/mpeg">
                    Your browser does not support the audio element.
                </audio>
            </div>
        </div>
        <div class="photo-frame" onclick="openModal('./20240817_191024.jpg')">
            <img src="./20240817_191024.jpg">
            <p>We missing something</p>
        </div>
        <div class="photo-frame" onclick="openModal('./b.png')">
            <img src="./b.png">
            <p>Neon faced</p>
        </div>
        <div class="photo-frame" onclick="openModal('./faces-1.png')">
            <img src="./faces-1.png">
            <p>Love to hate</p>
        </div>
        <div class="photo-frame" onclick="openModal('./image-4.png')">
            <img src="./image-4.png">
            <p>Bath</p>
            <div class="music-player">
                <audio controls>
                    <source src="./Lost [6hk2ocQJBV8].mp3" type="audio/mpeg">
                    Your browser does not support the audio element.
                </audio>
            </div>
        </div>
        <div class="photo-frame" onclick="openModal('./pet.png')">
            <img src="./pet.png">
            <p>Pet</p>
        </div>
        <div class="photo-frame" onclick="openModal('./SPOILER_image.png.webp-1.png')">
            <img src="./SPOILER_image.png.webp-1.png">
            <p>Sleepy</p>
        </div>
        <div class="photo-frame" onclick="openModal('./up.png')">
            <img src="./up.png">
            <p>Up</p>
        </div>
        <div class="photo-frame" onclick="openModal('./VRChat_2024-07-13_05-07-20.912_2560x1440.png')">
            <img src="./VRChat_2024-07-13_05-07-20.912_2560x1440.png">
            <p>Where we at?</p>
        </div>
        <div class="photo-frame" onclick="openModal('./123075341_p0.png')">
            <img src="./123075341_p0.png">
            <p>Dance</p>
        </div>
        <div class="photo-frame" onclick="openModal('./120399811_p0.png')">
            <img src="./120399811_p0.png">
            <p>Style</p>
        </div>
        <div class="photo-frame" onclick="openModal('./120359597_p0_master1200.jpg')">
            <img src="./120359597_p0_master1200.jpg">
            <p>Cheese</p>
        </div>
        <div class="photo-frame" onclick="openModal('./SPOILER_pov.png')">
            <img src="./SPOILER_pov.png">
            <p>Night</p>
        </div>
        <div class="photo-frame" onclick="openModal('./2024-09-29 23-34-12 1.png.webp')">
            <img src="./2024-09-29 23-34-12 1.png.webp">
            <p>Boring</p>
        </div>
        <div class="photo-frame" onclick="openModal('./2024-10-05 15-20-20 1.png.webp')">
            <img src="./2024-10-05 15-20-20 1.png.webp">
            <p>The </p>
        </div>
        <div class="photo-frame" onclick="openModal('./2024-11-07 16-10-45 1.png.webp')">
            <img src="./2024-11-07 16-10-45 1.png.webp">
            <p>Happyness</p>
        </div>
        <div class="photo-frame" onclick="openModal('./2024-12-11 19-52-02 2.png.webp')">
            <img src="./2024-12-11 19-52-02 2.png.webp">
            <p>1</p>
        </div>
        <div class="photo-frame" onclick="openModal('./2024-12-11 19-52-13 2.png.webp')">
            <img src="./2024-12-11 19-52-13 2.png.webp">
            <p>2</p>
        </div>
        <div class="photo-frame" onclick="openModal('./20241028_103520.jpg.webp')">
            <img src="./20241028_103520.jpg.webp">
            <p>Away</p>
        </div>
        <div class="photo-frame" onclick="openModal('./20241216_101535.jpg.webp')">
            <img src="./20241216_101535.jpg.webp">
            <p>Chibi</p>
        </div>
        <div class="photo-frame" onclick="openModal('./bir2b.png.webp')">
            <img src="./bir2b.png.webp">
            <p>Pensive</p>
        </div>
        <div class="photo-frame" onclick="openModal('./birb.png.webp')">
            <img src="./birb.png.webp">
            <p>Cute</p>
        </div>
        <div class="photo-frame" onclick="openModal('./birbe3.png.webp')">
            <img src="./birbe3.png.webp">
            <p>kind</p>
        </div>
        <div class="photo-frame" onclick="openModal('./birby.png.webp')">
            <img src="./birby.png.webp">
            <p>3</p>
        </div>
        <div class="photo-frame" onclick="openModal('./dark.png.webp')">
            <img src="./dark.png.webp">
            <p>Dark</p>
        </div>
        <div class="photo-frame" onclick="openModal('./IMG_20240826_162440_1_1_1.jpg.webp')">
            <img src="./IMG_20240826_162440_1_1_1.jpg.webp">
            <p>step</p>
        </div>
        <div class="photo-frame" onclick="openModal('./IMG_20240828_151731_1_1_1.jpg.webp')">
            <img src="./IMG_20240828_151731_1_1_1.jpg.webp">
            <p>:<</p>
        </div>
        <div class="photo-frame" onclick="openModal('./IMG_20241014_085715_1_1.jpg.webp')">
            <img src="./IMG_20241014_085715_1_1.jpg.webp">
            <p>Mirror</p>
        </div>
        <div class="photo-frame" onclick="openModal('./IMG_20241014_154029_1_1.jpg.webp')">
            <img src="./IMG_20241014_154029_1_1.jpg.webp">
            <p>:></p>
        </div>
        <div class="photo-frame" onclick="openModal('./IMG_20241101_085237_1_1.jpg.webp')">
            <img src="./IMG_20241101_085237_1_1.jpg.webp">
            <p>:)</p>
        </div>
        <div class="photo-frame" onclick="openModal('./IMG_20241104_085326_1_1.jpg.webp')">
            <img src="./IMG_20241104_085326_1_1.jpg.webp">
            <p>What you lookin</p>
        </div>
        <div class="photo-frame" onclick="openModal('./IMG_20241108_200706.jpg.webp')">
            <img src="./IMG_20241108_200706.jpg.webp">
            <p>Faced</p>
        </div>
        <div class="photo-frame" onclick="openModal('./IMG_20241118_212508_229.jpg.webp')">
            <img src="./IMG_20241118_212508_229.jpg.webp">
            <p>Hold</p>
        </div>
        <div class="photo-frame" onclick="openModal('./IMG_20241127_000851_1_1.jpg.webp')">
            <img src="./IMG_20241127_000851_1_1.jpg.webp">
            <p>Lost</p>
        </div>
        <div class="photo-frame" onclick="openModal('./IMG_20241211_235001_1_1.jpg.webp')">
            <img src="./IMG_20241211_235001_1_1.jpg.webp">
            <p>👋</p>
        </div>
        <div class="photo-frame" onclick="openModal('./side.png.webp')">
            <img src="./side.png.webp">
            <p>Not hiding anything at this point</p>
        </div>
        <div class="photo-frame" onclick="openModal('./GgQSrYuXYAAL3me.jpeg')">
            <img src="./GgQSrYuXYAAL3me.jpeg">
            <p>First drawing of 2025</p>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal" id="image-modal">
        <span class="modal-close" onclick="closeModal()">×</span>
        <img id="modal-image" src="" alt="Large Image">
    </div>
    <footer>
    <div>
        <div style="border: 5px solid var(--accent-color); padding: 10px; border-radius: 10px; background-color: var(--frame-bg-color);">
            <img src="./tenor.gif">
            <p>Cherished Memories 🐦💜</p>
        </div>
    </div>
    </footer>
    <script>
        const modal = document.getElementById('image-modal');
        const modalImage = document.getElementById('modal-image');
        function openModal(src) {
            modalImage.src = src;
            modal.style.display = 'flex';
        }
        function closeModal() {
            modal.style.display = 'none';
        }
        // Close modal on background click
        modal.addEventListener('click', (e) => {
            if (e.target === modal) closeModal();
        });
    </script>
 </body>
 </html>
--- a/birb/mainbackground.png
+++ b/birb/mainbackground.png
--- a/birb/pet.png
+++ b/birb/pet.png
--- a/birb/side.png.webp
+++ b/birb/side.png.webp
--- a/birb/tenor.gif
+++ b/birb/tenor.gif
--- a/birb/up.png
+++ b/birb/up.png
--- a/index.html
+++ b/index.html
@ -31,7 +31,8 @@
            </section>
            <section id="extras">
                <h2>Extras</h2>
-                <p>Be sure to find all the little <a href="/static/eastereggs/easteregg.jpg">eastereggs</a> 🐱✨</p>
+                <p>Be sure to find all the little <a href="./static/eastereggs/easteregg.jpg">eastereggs</a> 🐱✨</p>
                <a href="./birb/"><img src="./birb/SPOILER_birb_emotes2.png" title="Birb, if you're seeing this, you found the easter egg."></a>
            </section>
        </main>
        <footer>
--- a/shrines/aira/Screenshot
+++ b/shrines/aira/Screenshot
--- a/shrines/aira/closeup.png
+++ b/shrines/aira/closeup.png
--- a/shrines/aira/dandadan-aira-shiratori.png
+++ b/shrines/aira/dandadan-aira-shiratori.png
--- a/shrines/aira/home.png
+++ b/shrines/aira/home.png
--- a/shrines/aira/index.html
+++ b/shrines/aira/index.html
@ -0,0 +1,175 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aira Shiratori Shrine</title>
    <style>
        :root {
            --main-bg-color: #ffccf9;
            --accent-color: #ffdd57;
            --text-color: #4a4a4a;
            --cloud-color: #ffffff;
            --sidebar-bg-color: rgba(255, 213, 230, 0.8);
            --box-bg-color: #ffe5f1;
        }
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--main-bg-color);
            color: var(--text-color);
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .header {
            width: 100%;
            background: linear-gradient(135deg, var(--accent-color), var(--main-bg-color));
            text-align: center;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }
        .header h1 {
            margin: 0;
            font-size: 2.5rem;
            color: var(--text-color);
        }
        .cloud {
            position: absolute;
            background: var(--cloud-color);
            border-radius: 50%;
            animation: moveClouds 20s linear infinite;
            opacity: 0.7;
        }
        @keyframes moveClouds {
            from { transform: translateX(-200%); }
            to { transform: translateX(200%); }
        }
        .main {
            display: flex;
            flex-direction: row;
            gap: 20px;
            padding: 20px;
            max-width: 1200px;
            width: 100%;
        }
        .sidebar {
            flex: 0.3;
            background-color: var(--sidebar-bg-color);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
            text-align: center;
        }
        .sidebar img, .content img {
            max-width: 100%; /* Prevents the image from overflowing its container */
            max-height: 300px; /* Limits the height of large images */
            object-fit: contain; /* Ensures the image scales proportionally */
            border-radius: 10px;
            margin: 0 auto 15px; /* Centers the image horizontally */
            display: block; /* Makes margin auto work */
        }
        .sidebar h2 {
            margin: 0;
            margin-bottom: 10px;
        }
        .content {
            flex: 0.7;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        .box {
            background-color: var(--box-bg-color);
            padding: 15px;
            border-radius: 10px;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
            text-align: center;
            position: relative;
            overflow: hidden;
            animation: slideIn 0.8s ease-in-out;
        }
        @keyframes slideIn {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        footer {
            text-align: center;
            margin-top: 20px;
            background-color: var(--accent-color);
            padding: 10px;
            width: 100%;
        }
        @media (max-width: 768px) {
            .main {
                flex-direction: column;
            }
        }
    </style>
 </head>
 <body>
    <div class="header">
        <h1>Aira Shiratori Shrine 🌸</h1>
        <div class="cloud" style="width: 100px; height: 50px; top: 10px; left: -20px;"></div>
        <div class="cloud" style="width: 150px; height: 75px; top: 40px; left: 50%;"></div>
        <div class="cloud" style="width: 120px; height: 60px; top: 80px; right: -30px;"></div>
    </div>
    <div class="main">
        <div class="sidebar">
            <img src="/shrines/aira/home.png" alt="Aira Shiratori" title="What she thinking about">
            <h2>Aira Shiratori</h2>
            <p>The bubbly and energetic character from <i>Dandadan</i>.</p>
            <ul>
                <li>Favorite Color: Probably Pink</li>
                <li>Hobby: Collecting cute trinkets like round gold spheres</li>
                <li>Fun Fact: Loves drinking water</li>
                <li>Another fun fact: Got called "バカ女" by Momo</li>
            </ul>
        </div>
        <div class="content">
            <div class="box">
                <h3>About Aira</h3>
                <p>Aira Shiratori is a cheerful and optimistic individual known for her quirky sense of humor and lovable personality.</p>
            </div>
            <div class="box">
                <h3>Favorite things abour her:</h3>
                <p>she looks like an idiot (I love idiots)</p>
                <p>"Shut your mouth."</p>
                <img src="./dandadan-aira-shiratori.png" title="This was when she was stil unknown to us.">
            </div>
            <div class="box">
                <img src="./closeup.png" title="Your hair is in the way, idiot.">
                <img src="./up.png" title="Where is she going.">
            </div>
            <div class="box">
                <h3>Did You Know?</h3>
                <p>Aira is inspired by the carefree and lively energy of youth!</p>
                <img src="./Screenshot from 2025-01-08 23-15-16.png" title="Look at this idiot.">
            </div>
        </div>
    </div>
    <footer>
        <p>Made with love for Aira Shiratori fans 💖</p>
    </footer>
 </body>
 </html>
--- a/shrines/aira/up.png
+++ b/shrines/aira/up.png
--- a/shrines/index.html
+++ b/shrines/index.html
@ -76,12 +76,8 @@
            <h2>Libbie The Cyber Oryx</h2>
        </a>
        <a href="/shrines/aira/" class="shrine-item">
-            <img src="/shrines/libbie/libbie.png" alt="Libbie">
+            <img src="/shrines/aira/home.png" alt="Libbie">
-            <h2>Libbie The Cyber Oryx</h2>
+            <h2>Shiratori Aira</h2>
        </a>
        <a href="/shrines/birb/" class="shrine-item">
            <img src="/shrines/libbie/libbie.png" alt="Libbie">
            <h2>Libbie The Cyber Oryx</h2>
        </a>
    </div>
--- a/shrines/teruhashi/index.html
+++ b/shrines/teruhashi/index.html
@ -155,7 +155,7 @@
 </head>
 <body>
    <div class="sidebar">
-        <img src="/shrines/teruhashi/side.png" alt="Kokomi Teruhashi">
+        <img src="/shrines/teruhashi/side.png" title="This image is sideways" alt="Kokomi Teruhashi">
        <h2>Kokomi Teruhashi</h2>
        <img  src="/static/wafumelon/wafu.png" alt="wafu" title="Kokomi is the original face of wafumelon">
    </div>
@ -175,7 +175,7 @@
                <div class="did-you-know">
                    Did you know? Kokomi Teruhashi believes she has a "divine aura" that makes everyone adore her.
                </div>
-                <img src="/shrines/teruhashi/2.png" alt="Kokomi Smiling" style="width:100%; margin-top:15px; border-radius:10px;">
+                <img src="/shrines/teruhashi/2.png" title="EEEEEEEEEEEEEh" alt="Kokomi Smiling" style="width:100%; margin-top:15px; border-radius:10px;">
            </div>
            <div class="right-column">
@ -196,7 +196,7 @@
                        </audio>
                    </div>
-                    <img src="/shrines/teruhashi/1.png" alt="Kokomi Posing" style="width:100%; margin-top:15px; border-radius:10px;">
+                    <img src="/shrines/teruhashi/1.png" title="Special style I made one time." alt="Kokomi Posing" style="width:100%; margin-top:15px; border-radius:10px;">
                </div>
            </div>
        </div>
--- a/static/wafumelon/SPOILER_birb_emotes2.png
+++ b/static/wafumelon/SPOILER_birb_emotes2.png
Author	SHA1	Message	Date
waifu	3f49af6e66	latest	2 weeks ago
waifu	de37465970	update birb	2 weeks ago
waifu	7d318bffd6	birby	3 weeks ago