Untitled

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BOOM</title>
    <style>

        @keyframes smecherie {
            0%   { transform: rotateY(0deg); }
            100% { transform: rotateY(30deg); }
        }

        h1 {
            font-size: var(--titlu-size);
            animation: smecherie 2s infinite;
        }

        .cul {
            color: var(--culoare);
            animation: smecherie 2s infinite;
        }

        .cul2 {
            color: var(--culoare2);
            animation: smecherie 2s infinite;
        }

        .cul3 {
            color: var(--culoare3);
            animation: smecherie 2s infinite;
        }
    </style>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            var size = 10;
            var direction = 'up';
            var root = document.documentElement;
            var i = 0;
            var numar = document.getElementById("numar");
            var cod = document.getElementById("cod");
            var txt = 'a';
            setInterval(function () {
                root.style.setProperty('--titlu-size', size + "px");

                if (i%2 === 0) {
                    root.style.setProperty('--culoare', "red");
                    root.style.setProperty('--culoare2', "blue");
                    root.style.setProperty('--culoare3', "red");
                } else {
                    root.style.setProperty('--culoare', "green");
                    root.style.setProperty('--culoare2', "black");
                    root.style.setProperty('--culoare3', "pink");
                }

                if (direction === 'up') {
                    size = size + 1;
                } else {
                    size = size - 1;
                }

                if(size > 120) {
                    direction = 'down';
                }

                if (size === 9) {
                    direction = 'up';
                }

                i = i+1;

                numar.innerHTML = (i * i * i * i * i * i) + 3 * i * i;
                cod.innerHTML = txt + "<br/>" + window.btoa(i * i * i * i);

                txt = txt += "a";

            }, 0.1);
        });

    </script>
</head>
<body>
<h1>Ai fost <span class="cul">hackuit</span>.<br/><br/><div id="numar" class="cul2"></div><div id="cod" class="cul3"></div></h1>
</body>
</html>