<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>RICK ROLL OF COURSE</title>
        <style>
            * {
                margin: 0;
            }

            body {
                width: 100vw;
                height: 100vh;
                background-color: #a4a3ae;
                transition: 1s background-color;
                color: white;
            }

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

            .initially-hidden {
                display: none;
            }

            #lemonsnout {
                animation: explode 3s ease-in;
            }

            @keyframes explode {
                0% {
                    transform: scale(0%);
                }
                100% {
                    transform: scale(100%);
                }
            }
        </style>
        <script>
            function sleep(ms) {
                return new Promise(resolve => setTimeout(resolve, ms));
            }

            function hide(id) {
                document.getElementById(id).style.display = "none";
            }

            function show(id) {
                document.getElementById(id).style.display = "block";
            }

            function set_bg(color) {
                document.body.style.backgroundColor = color;
            }
            function set_title(title) {
                document.title = title;
            }

            async function main() {
                await sleep(2500);
                hide("rickroll");
                show("psyche");
                set_title("PSYCHE");
                set_bg("#136602");

                await sleep(3000);
                hide("psyche");
                show("shill");
                set_title("i like it a lot :]");
                set_bg("#008282");

                await sleep(10000);
                hide("shill");
                show("2x-psyche");
                set_title("OHHHHHHH YOU JUST GOT GOT");
                set_bg("#b57fc4");

                await sleep(1000);
                show("lemonsnout-container");
                set_title("oh hi lemonsnout :D");

                await sleep(3200);
                window.location.replace(
                    "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
                );
            }

            window.onload = main;
        </script>
    </head>
    <body>
        <img
            id="rickroll"
            class="absolute-center"
            src="https://media.tenor.com/x8v1oNUOmg4AAAAd/rickroll-roll.gif"
            alt="young rick astley from the famous rick roll dancing"
        />
        <img
            id="psyche"
            class="absolute-center initially-hidden"
            src="./psyche.png"
            alt="large, green, pixelated text that says PSYCHE"
        />
        <div id="shill" class="absolute-center initially-hidden">
            <p>i just want you to read homestuck :]</p>
            <p>
                that's all there's definitely no trick nor time pressure to
                clicking these links
            </p>
            <a href="https://bambosh.dev/unofficial-homestuck-collection"
                >offline (best)</a
            >
            <a href="https://homestuck.giovanh.com"
                >online (easier, also really cool)</a
            >
        </div>
        <img
            id="2x-psyche"
            class="absolute-center initially-hidden"
            src="./x2-double-psycheout-combo.png"
            alt="large, yellow and purple, pixelated text that says x2 DOUBLE PSYCHEOUT COMBO!!"
        />
        <div class="absolute-center initially-hidden" id="lemonsnout-container">
            <img
                id="lemonsnout"
                src="./large-lemonsnout.png"
                alt="a very close pic of lemonsnout's head"
            />
        </div>
    </body>
</html>