<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="assets/css/paulgriffinpetty.css">
    <title>Paul Griffin Petty</title>

    <style type="text/css">
    </style>

    <link rel="apple-touch-icon" sizes="300x300" href="https://world.hey.com/petty/avatar-20210313130525000000-300304897">
    <link rel="icon" type="image/png" sizes="300x300" href="https://world.hey.com/petty/avatar-20210313130525000000-300304897">

</head>

<body>

    <div class="scroll">
        <div class="scroll-inner">

        </div>
    </div>



    <header class="Letters">

        <div class="Letter" style="--number:1px">
            <label for="P">P</label>
        </div>
        <div class="Letter" style="--number:2px">
            <label for="A">A</label>
        </div>
        <div class="Letter" style="--number:3px">
            <label for="U">U</label>
        </div>
        <div class="Letter" style="--number:4px">
            <label for="L">L</label>
        </div>

        <div class="Letter" style="--number:5px">
            <label for="G">G</label>
        </div>
        <div class="Letter" style="--number:6px">
            <label for="R">R</label>
        </div>
        <div class="Letter" style="--number:7px">
            <label for="I">I</label>
        </div>
        <div class="Letter" style="--number:8px">
            <label for="F">F</label>
        </div>
        <div class="Letter" style="--number:9px">
            <label for="F">F</label>
        </div>
        <div class="Letter" style="--number:10px">
            <label for="I">I</label>
        </div>
        <div class="Letter" style="--number:11px">
            <label for="N">N</label>
        </div>

        <div class="Letter" style="--number:12px">
            <label for="P">P</label>
        </div>
        <div class="Letter" style="--number:13px">
            <label for="E">E</label>
        </div>
        <div class="Letter" style="--number:14px">
            <label for="T">T</label>
        </div>
        <div class="Letter" style="--number:15px">
            <label for="T">T</label>
        </div>
        <div class="Letter" style="--number:16px">
            <label for="Y">Y</label>
        </div>

    </header>

    <main>
        <div id="app">
            <div class="gradient-box"></div>
            <input style="display:none" type="range" min="0" max="360" v-model="angleAdjust">
            <input style="display:none" type="range" min="0" max="360" v-model="hueAdjust">
        </div>
    </main>

    <footer>
    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
    <script src="assets/js/paulgriffinpetty.js"></script>

</body>
</html>
