<!--
---------------------------------
And would it pay you more to walk on water
Than to wear a crown of thorns
It wouldn't pain me more to bury you rich
Than to bury you poor
In your jesus christ pose
---------------------------------
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="shortcut icon" href="https://www.specialdefects.com/favicon.ico" type="image/x-icon" />
    <title>SP*C**L D*F*CTS</title>
    <link rel="stylesheet" href="main.css">
    <script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
</head>
<body>
    <!-- Background layer -->
    <div id="bg" class="layer"></div>
    
    <!-- Curtain transition (starts closed) -->
    <div id="curtain" class="layer closed"></div>
    
    <!-- Ruffle container for experiments -->
    <div id="experiment-container"></div>
    
    <!-- Loading bar -->
    <div id="loading-bar">
        <div id="bar-fg"></div>
    </div>
    
    <!-- Menu scrim (overlay) -->
    <div id="menu-scrim"></div>
    
    <!-- Menu button -->
    <div id="menu">
        <div id="menu-button"></div>
        <div id="menu-items"></div>
    </div>
    
    <!-- Sound toggle -->
    <div id="sound-toggle" class="sound-off" title="Toggle sound">
        <!-- Sound ON icon -->
        <svg id="sound-on-icon" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#e3e3e3"><path d="M560-131v-82q90-26 145-100t55-168q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 127-78 224.5T560-131ZM120-360v-240h160l200-200v640L280-360H120Zm440 40v-322q47 22 73.5 66t26.5 96q0 51-26.5 94.5T560-320Z"/></svg>
        <!-- Sound OFF icon -->
        <svg id="sound-off-icon" xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#e3e3e3"><path d="M792-56 671-177q-25 16-53 27.5T560-131v-82q14-5 27.5-10t25.5-12L480-368v208L280-360H120v-240h128L56-792l56-56 736 736-56 56Zm-8-232-58-58q17-31 25.5-65t8.5-70q0-94-55-168T560-749v-82q124 28 202 125.5T840-481q0 53-14.5 102T784-288ZM650-422l-90-90v-130q47 22 73.5 66t26.5 96q0 15-2.5 29.5T650-422ZM480-592 376-696l104-104v208Z"/></svg>
    </div>
    
    <!-- Experiment message -->
    <div id="experiment-message"></div>
    
    <script>
        console.log('---------------------------------');
        console.log('And would it pay you more to walk on water');
        console.log('Than to wear a crown of thorns');
        console.log("It wouldn't pain me more to bury you rich");
        console.log('Than to bury you poor');
        console.log('In your jesus christ pose');
        console.log('---------------------------------');
    </script>
    <script type="module" src="main.js"></script>
</body>
</html>

