<body class="p-6 h-dvh" style="background-color: rgba(4,4,4,1)">

    <!-- if you can read this ur homosexual -->

    <div class="ruubEnter top-0 left-0"></div>
    <div class="enterDiv flex h-full w-full absolute justify-center items-center top-0 left-0">
        <img class="enterEye" src="assets/img/eye-close.svg">
    </div>

    <!-- <audio src="assets/media/audio.mp3" class="ruubPlayer" loop></audio> -->
    <canvas class="fireworks"></canvas>
    <canvas id="c"></canvas>


    <div class="body-border"></div>
    <div class="inverted-corner top-left "></div>
    <div class="inverted-corner top-right"></div>
    <div class="inverted-corner bottom-left"></div>
    <div class="inverted-corner bottom-right"></div>

    <div class="ruubBox flex flex-col justify-center h-full w-full xl:pl-16 xl:flex-row z-10">

        <div class="flex profileInfo flex-col w-full xl:w-1/2 justify-center gap-16">

            <div class="ruubProfile">
                <img src="assets/img/pfp.png">
                <div class="name">piam <img class="dev" src="assets/img/dev.png" title="woah!"></div>
                <div class="bio">best at what i do</div>
            </div>

            <div class="ruubWrap">
                <div class="ruubItem"></div>
                <div class="ruubItem"></div>
                <div class="ruubItem"></div>
            </div>

        </div>

        <div class="hidden xl:flex w-full relative vid-sec">
            <section class="wrapper p-8 xl:p-32 rounded-2xl">
                <div class="vid-ol rounded-3xl"></div>
                <div class="flex absolute top-0 hidden xl:flex xl:left-24 h-full items-center">
                    <div class="vid-btn z-10 bg-black flex p-3 cursor-pointer rounded-full w-16 h-16 bg-[#040404] shadow shadow-xl z-10">
                        <svg class="vid-icon1" clip-rule="evenodd" fill-rule="evenodd" fill="#fff" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="m2 19v-14c0-.552.447-1 1-1 .542 0 4.418 2.028 9 2.028 4.593 0 8.456-2.028 9-2.028.55 0 1 .447 1 1v14c0 .553-.45 1-1 1-.544 0-4.407-2.028-9-2.028-4.582 0-8.458 2.028-9 2.028-.553 0-1-.448-1-1zm1.5-.791 6.449-7.691c.289-.344.879-.338 1.16.012 0 0 1.954 2.434 1.954 2.434l1.704-1.283c.319-.24.816-.168 1.054.154l4.679 6.335v-12.44c-1.58.58-4.819 1.798-8.5 1.798-3.672 0-6.918-1.218-8.5-1.799zm2.657-.834c1.623-.471 3.657-.903 5.843-.903 2.309 0 4.444.479 6.105.98l-3.041-4.117-1.065.802.275.344c.259.323.206.796-.117 1.054-.323.259-.795.207-1.054-.117l-2.591-3.236zm.698-9.534c-1.051 0-1.905.854-1.905 1.905s.854 1.904 1.905 1.904 1.904-.853 1.904-1.904-.853-1.905-1.904-1.905zm0 1.3c.333 0 .604.271.604.605 0 .333-.271.604-.604.604-.334 0-.605-.271-.605-.604 0-.334.271-.605.605-.605z" fill-rule="nonzero"/>
                        </svg>
                        <svg class="vid-icon2" clip-rule="evenodd" fill-rule="evenodd" fill="#fff" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="m2 19v-14c0-.552.447-1 1-1 .542 0 4.418 2.028 9 2.028 4.593 0 8.456-2.028 9-2.028.55 0 1 .447 1 1v14c0 .553-.45 1-1 1-.544 0-4.407-2.028-9-2.028-4.582 0-8.458 2.028-9 2.028-.553 0-1-.448-1-1zm8.316-7.209 2.592 3.237c.258.323.731.375 1.054.116.323-.258.375-.731.117-1.054l-.276-.344 1.084-.815s3.307 4.206 3.307 4.206c.256.325.728.381 1.053.126.325-.256.382-.728.126-1.054l-3.761-4.783c-.252-.321-.715-.381-1.041-.135l-1.703 1.282s-1.954-2.433-1.954-2.433c-.282-.351-.871-.357-1.16-.013l-5.112 6.097c-.266.317-.224.79.093 1.056s.79.225 1.056-.093zm-4.139-4.216c-1.051 0-1.904.853-1.904 1.904s.853 1.905 1.904 1.905 1.904-.854 1.904-1.905-.853-1.904-1.904-1.904zm0 1.3c.334 0 .604.271.604.604 0 .334-.27.605-.604.605-.333 0-.604-.271-.604-.605 0-.333.271-.604.604-.604z" fill-rule="nonzero"/>
                        </svg>
                    </div>
                </div>

                <div class="flex h-full relative z-0">
                    <video loop playsinline class="ruubPlayer video h-full object-cover object-center relative" id="vid" src="https://files.catbox.moe/rswxwx.mp4">
                    </video>
                    <div class="ol"></div>
                </div>
                <canvas width="10" height="6" aria-hidden="true" class="canvas rounded-3xl" id="canvas"></canvas>
            </section>
        </div>

    </div>

    <video loop playsinline class="ruubPlayer2 xl:hidden video h-full object-cover object-center fixed -z-10 top-0 left-0 " src="https://files.catbox.moe/rswxwx.mp4"></video>
    <div class="ol flex xl:hidden fixed top-0 left-0 h-full w-full opacity-100"></div>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js" integrity="sha512-cOH8ndwGgPo+K7pTvMrqYbmI8u8k6Sho3js0gOqVWTmQMlLIi6TbqGWRTpf1ga8ci9H3iPsvDLr4X7xwhC/+DQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text/javascript" src="https://res.cloudinary.com/veseylab/raw/upload/v1684982764/magicmouse-2.0.0.cdn.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="script2.js"></script>

</body>