<!--
MADE YOU LOOK 

.---:                                                  
                                            -+*****+=                                           :.. 
                                            -**+++****=                                      =*****+
                                            -**++++****+-                                 =*##******
                                            -**++++++****+-                            =*#####******
                                             +***++++******+**+#####%%%%%%%#####**++++*######*******
                                             =******+++***#*+###%%%%%%%%%%%%%%%###**#########****** 
                                             -***#*+++****###*##%#%#%%%%%%%%%%##%#*%############**+ 
                                             :*****###****###**########%###%%###*#%%%###########**  
                      :-=++++==               -****++***#*###########%%#######%*#%%%%%#####**####+  
                ===+*#**#########*+=          :*****+*****#######%%##%%%%##%%###%%%%%############   
            +*******########%%#######*+=      =###**+++**#*######%###%%%%#%%%%##%%%%############*   
          *#****############%%%##########=:   +**++*******######%%#######%%%%%%%%%####%######%%#+   
        *###****##################%%#%%%%###**##****##*##*########%#######%%%%%%%%%%%%##########-   
      =*#######*##################%%%%%%%%%#*##*######****#%#***#*%##%###%%%%###*%%%#%%%%%%%##%#=   
     =*###########################%%%%%%%##*#######***######*#*%#*+###**###*###########%%%%%%%%%+   
    -*########################%%%%%%%%%%%#****###*#**######***#%*++#*###%***#%%####%%%%##%%%%%%%#-  
    *######%%%#############%%%%%%#######****########******#**###+++#%####+***#%%###%%####%%####**+  
   +######%%%%%%########################***#########****+**+++##+*+*##%##****#%#*########%%%####**  
  -*####%%%%%%%%%#####################################%#%%%%%******######****##****###*##%%%#####*+ 
  -#####%%%%%%%%%######################*#########%##+#%%%%%%@@%*+*#########*+*%%%%#%@%%##%%%######* 
 :*#%%%%%%%%%%%%%%%############################%%#*+=+%%%%%%%%##+=*#######*=+%%%%%@@@%%##%%%%%####* 
 +#%%%%%%%%%%%%%%%############################%%#***+=+#%%%%%%%#+=********=+##%%%%%%%%#**##%%%%%##* 
=##%%%%%%%%%%%%%###########################*****######*+=+*##%%%+=*******+=*%%%#%%%%#**####%%%%%%%* 
-#%%%%%%%%%%%%################%###%%%####***++++***######*===+#%***********#%#*++++*##%%%#########  
 *%%%%%%%%%%###################%%%#%%%####**+++*******######*##%%#*******#%%%*++*#%%%%%%#########+  
 =##%%%%%%################%%##%%%%#%%#####******#*******#######%%##*****##%%%####%############*#*=  
 =##%%%%%##########%%%#######%%%%%%%%####%#*******+++++*#******####*****#%%############**#######*=  
 =#%%%%%%#########%%%%######%%%%%%%%%#######*+******++++********#####**####****##*#********#####*-  
  #%%%%%#########%%%%######%%%%%%%%#%%######**+***++++==++**##*++*%%##%#*++***#****++******#####*-  
  +%%%%%#######%%%%%%####%%%%%%%%%%%%%%%%%%%##**++****+===++*+++===*@%*==+*****++++++***+****###*-  
  +#%%%#######%%%%%%%####%%%%%#%%%%%##%#%%%%%%##*+++++++===++++=====*====++***++++++*******#####*-  
   *##########%%%%%%#####%%%%%%%%%%%%#%##%%%######*++++=++===++==+++*+=====++++++++*******######*=  
   *##########%%%%%%####%%%%%%%%%%%%%%#%%###%%#######*++=========++++++++++++++++++**+*######%%##-  
   +##########%%%%%%%###%%%%%##%%%%%%######%#########%#*+====++=========++++++++++++**####%##%###=  
   +#######%#%%%%%%%%###%%%%%%%%%#%%############%##%%#%#***++++========++++++++++++**###%%##%###*+  
   +##########%%%%%%###%%%%%%%%%%%%###%########%%%###%%%%#***++========++++++++**#########%%#####*  
   =######%%##%%%%%%%##%%%%%%%%%%##%####%#######%%%%%#####%%#*++++======++++***########%%%#####**=  
   +%#####%%##%%%%%%%%%%%%%%%%%%%##%############*##%%%%%%#%%##*++++++==+++**####%%%%#%%%%%######*=  
   -##########%%%%%%%%%%##%%%%%%%%#%#################%%%%%%%#########+++***##%%%%%%%%%%%########+   
    +##########%%%%%%%%%##%%%%%%####%%############*###*#%%%%%%%%%%%###*###%%%%%%%%%%%%%########*-   
     =#########%%%%#%%%#%%%%%%%%%%%%%%%###########***###*****#%%%%%%%#########%%%######*#######=    
     :+#####%%#%%%%%%%%%%%%%%%%%%%%%%%%%%########***********#*+***#####**######****#***######*=     
      -*####%%%%%%%%%%%###%%%%%%%%%%%##################**********************##**############=      
       +*###%%%%%%%%%%%%##%%%%%%%%%%#####################******+**##***#*******##############=      
       =**####%%%%%%%%%%%##%%%%%%%%%%#%########****#######*#####*++#*********############%%%#=      
       -***#####%%%%%%%%%%%%%%%%#%%%#%%%%%%%%##****++*########*###*********#######*****##%###       
       :+***#####%%%%%%%%%%%%%%%%%##%%%%%%%%%####********######**#*++++**########****##*####*       
       -+**######**###%%%%%%%%%%%######**######%%##*********######***+**######***###########+       
       -**#######=  *###%%%%%%%%%####*********##%%%%###********##******##############**##%%#=       
      .-=+**#####=    +*###%%%%%%#####%#####*++**##%#####*************##****################-       
     .:-==++++***=           =%%%%##%########**+**########*******************##############=        
     :===+**+++**+:           *%%###%%#####%###**####%%#####*****************#############*:        
     -+****++++**+:             *#########*********##%%%##******************#######%%%%###-         
      -+***+****+:               *#####%%%%###########%%#******************##%%%%%%%%####=          
                                  ##############%#%%#####*************+***#%%%###########-          
                                   *#######**********##**+=====++**+++=-  *####***######=           
                                   -*##%%####**********=                  :+##**#######*            
                                    -**##**#**********-                    =###*#######=            
                                     -###*************:                    -*******###*-            
                                      =#%##**#********:                    :*******###*:            
                                       +*##%###******+:                    :**#######**-            
                                       =******##*****+:                    :*##########=            
                                       =*********#****:                    -*#########**-.          
                                       =**##########**:                    -#%%%###%%##**=-         
                                       =**###########*:                     *%%%%%%%%#*++=--        
                                       +*######%%%%###:                     =%%%%%%%%*+=----.       
                                       **##***#%%%%%%#:                      =#%%%###+===---.       
                                      :=+#+===+*+*#%%%-                         ==+*#***#*=:        
                                       -===--====++%%#-                                             
                                        -=========+##*                                              
                                          ::-=+=+++** 

.·:'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''':·.
: :  _   _      _ _          __                       ____        _          : :
: : | | | | ___| | | ___    / _|_ __ ___  _ __ ___   | __ )  __ _| | ____ _  : :
: : | |_| |/ _ \ | |/ _ \  | |_| '__/ _ \| '_ ` _ \  |  _ \ / _` | |/ / _` | : :
: : |  _  |  __/ | | (_) | |  _| | | (_) | | | | | | | |_) | (_| |   < (_| | : :
: : |_| |_|\___|_|_|\___/  |_| |_|  \___/|_| |_| |_| |____/ \__,_|_|\_\__,_| : :
'·:..........................................................................:·'
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>baka oi oi oi - about</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #10FF06; /* New green shade */
            font-family: 'Quicksand', sans-serif;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .video-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        video {
            max-width: 100%;
            height: auto;
        }

        .sound-prompt {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 0.9rem;
            opacity: 0.8;
            transition: opacity 0.3s;
        }

        .sound-prompt.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .broken-pixel {
            position: fixed;
            bottom: 20vh;
            right: 15vw;
            width: 4px;
            height: 4px;
            z-index: 9999;
            cursor: pointer; /* Shows pointer on hover */
        }

        .loading-container {
            position: fixed;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 1000;
            display: none; /* Hidden by default */
        }

        .loading-text {
            color: white;
            font-size: 1.2rem;
            margin-bottom: 10px;
            font-family: 'Quicksand', sans-serif;
        }

        .loading-bar {
            width: 200px;
            height: 4px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 2px;
            overflow: hidden;
        }

        .loading-progress {
            width: 0%;
            height: 100%;
            background: white;
            border-radius: 2px;
            animation: loading 2s infinite ease-in-out;
        }

        @keyframes loading {
            0% { width: 0; }
            50% { width: 100%; }
            100% { width: 0; }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
    <div class="sound-prompt">Click anywhere for sound 🔊</div>
    <div class="loading-container">
        <div class="loading-text">loading...</div>
        <div class="loading-bar">
            <div class="loading-progress"></div>
        </div>
    </div>
    <div class="video-container">
        <video autoplay loop muted playsinline>
            <source src="youtube_IxX_QHay02M_1920x1080_h264.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>

    <a href="https://action.aclu.org/give/make-tax-deductible-gift-aclu-foundation?utm_medium=pm&utm_source=gs&utm_campaign=nat-dig-pm-dd-int&utm_content=gs-search_foundation_exact-donate%20to%20aclu%20foundation-c-661586989587&initms_aff=nat&initms_chan=pm&initms=nat-dig-pm-dd-int-gs-search_foundation_exact-donate%20to%20aclu%20foundation-c-661586989587&ms_aff=nat&ms_chan=pm&ms=nat-dig-pm-dd-int-gs-search_foundation_exact-donate%20to%20aclu%20foundation-c-661586989587&gad_source=1&gbraid=0AAAAAoxOUmhtIcZ-M4uaJA_VAvTNv1kaI&gclid=CjwKCAiAneK8BhAVEiwAoy2HYRbFNwXHtAmdN1CDmhYnqeXj22j5vPVn96QlydznqlKFzOtALaxOhxoCqZoQAvD_BwE" 
       class="broken-pixel" 
       target="_blank">
    </a>
    <script>
        const video = document.querySelector('video');
        const prompt = document.querySelector('.sound-prompt');
        let firstClick = true;
        
        document.addEventListener('click', function() {
            if (firstClick) {
                // First click unmutes
                video.muted = false;
                prompt.classList.add('hidden');
                firstClick = false;
            } else {
                // Subsequent clicks toggle play/pause
                if (video.paused) {
                    video.play();
                } else {
                    video.pause();
                }
            }
        });

        // Broken pixel animation
        const brokenPixel = document.querySelector('.broken-pixel');
        const neonColors = [
            '#ff00ff', // Magenta
            '#00ff00', // Lime
            '#ff0000', // Red
            '#00ffff', // Cyan
            '#ffff00', // Yellow
            '#0000ff'  // Blue
        ];

        let lastColorChange = 0;
        
        function randomColor() {
            return neonColors[Math.floor(Math.random() * neonColors.length)];
        }

        function flashPixel(timestamp) {
            if (!lastColorChange) lastColorChange = timestamp;
            
            // Random interval between 50ms and 500ms
            const interval = Math.random() * 450 + 50;
            
            if (timestamp - lastColorChange >= interval) {
                brokenPixel.style.backgroundColor = randomColor();
                lastColorChange = timestamp;
            }
            
            requestAnimationFrame(flashPixel);
        }

        requestAnimationFrame(flashPixel);

        const loadingContainer = document.querySelector('.loading-container');

        // Show loading immediately when page loads
        loadingContainer.style.display = 'block';

        // Show loading when video is buffering or loading
        video.addEventListener('loadstart', function() {
            loadingContainer.style.display = 'block';
        });

        video.addEventListener('waiting', function() {
            loadingContainer.style.display = 'block';
        });

        // Hide loading when video can play
        video.addEventListener('canplay', function() {
            loadingContainer.style.display = 'none';
        });

        // Also hide loading when video starts playing
        video.addEventListener('playing', function() {
            loadingContainer.style.display = 'none';
        });

        // If video fails to load
        video.addEventListener('error', function() {
            loadingContainer.querySelector('.loading-text').textContent = 'Error loading video...';
        });
    </script>
</body>
</html>