Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- NOTE: This just exists to restart the prototype -->
<button id="start-over">restart</button>

<div id="app" class="app" data-step="0">
  <div class="content-wrapper">
    <div class="contents" id="content-1">
      <h1>Enhanced Sound Perception (E.S.P.)</h1>
      <p>When you hear every detail with audio tuned perfectly to your hearing, you’ll react more quickly, score higher and live longer.</p>
      <button id="button" class="click-button">Hear More</button>
    </div>
    <div class="contents" id="content-2">
      <h1>Supercharge your senses</h1>
      <p>In some games, subtle audio clues can be important. Due to differences in your unique hearing, complex sound effects may mask these clues. E.S.P. tunes the audio to your hearing, so you pick up every detail.</p>
      <p>
        To calibrate E.S.P., you’ll take a hearing test. Once your profile is generated and saved to your headset, you’ll hear every footstep, every distant gunshot and the low rumble of every approaching engine.</p>
      <button id="button" class="click-button">Press Start</button>
    </div>
    <div class="contents" id="content-3">
      <h1>Make sure it’s quiet</h1>
      <p>The hearing test is most accurate when done in a quiet space and when Sidetone, Equalizers or custom audio configurations are turned off.</p>
      <button id="button" class="click-button">Quiet? Check!</button>
    </div>
    <div class="contents" id="content-4">
      <h1>Let’s find the right volume</h1>
      <p>Play the Noise, for 3.5 seconds you’ll hear a low hum. Adjust the volume so you can still hear it but it isn’t irritating.</p>
      <button id="button" class="click-button">Volume? Check!</button>
    </div>

    <div class="contents" id="content-5">
      <h1>What you’ll hear during the test</h1>
      <p>The low hum will continue to play in the background. Now let’s add the beeping sound. During the test, you’ll be listening for a beep. You’ll press the space bar or click with your cursor when you hear it.
        In the next slide, we’ll try a practice test so you know what to listen for.</p>
      <button id="button" class="click-button">continue </button>
    </div>
  </div>
  <!-- NOTE: This overlay is used to darken the grid and orb layers -->
  <div class="overlay"></div>
  <div id="orb" class="orb"></div>
  <div id="horizon-container" class="horizon-container">
    <div class="horizon-top">
    </div>
    <div class="line-container">
      <div class="vertical-line"></div>
      <div class="vertical-line"></div>
      <div class="vertical-line"></div>
      <div class="vertical-line"></div>
      <div class="vertical-line"></div>
      <div class="vertical-line"></div>
      <div class="vertical-line"></div>
      <div class="vertical-line"></div>
      <div class="vertical-line"></div>
      <div class="vertical-line"></div>
      <div class="vertical-line"></div>
      <div>
        <div class="horizontal-line"></div>
        <div class="horizontal-line"></div>
        <div class="horizontal-line"></div>
        <div class="horizontal-line"></div>
        <div class="horizontal-line"></div>
        <div class="horizontal-line"></div>
        <div class="horizontal-line"></div>
        <div class="horizontal-line"></div>
        <div class="horizontal-line"></div>
        <div class="horizontal-line"></div>
        <div class="horizontal-line"></div>
        <div class="horizontal-line"></div>
      </div>
    </div>
  </div>
  <svg id="pixel-footer" class="pixel-footer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 22">
    <defs>
      <style>
        path {
          fill: white;
        }
      </style>
      <linearGradient id="pixelGradient">
        <stop offset="0%" stop-color="#20BDFF">
          <animate attributeName="stop-color" values="#20BDFF; #F31184; #F16355; #F31184; #20BDFF" dur="8s" repeatCount="indefinite"></animate>
        </stop>
        <stop offset="50%" stop-color="#F31184">
          <animate attributeName="stop-color" values="#F31184; #F16355; #F31184; #20BDFF; #F31184" dur="8s" repeatCount="indefinite"></animate>
        </stop>
        <stop offset="100%" stop-color="#F16355">
          <animate attributeName="stop-color" values="#F16355; #F31184; #20BDFF; #F31184; #F16355" dur="8s" repeatCount="indefinite"></animate>
        </stop>

      </linearGradient>
    </defs>
    <mask id="pixelMask">
      <path d="M688.45,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M694.39,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M700.32,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M706.25,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M712.19,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M718.11,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M724.04,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M729.98,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M735.92,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M741.85,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M747.79,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M753.72,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M759.65,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M765.58,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M771.52,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M777.47,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M783.4,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M789.32,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M795.26,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M801.2,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M807.13,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M813.06,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M819,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M824.93,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M830.85,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M836.8,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M842.73,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M848.67,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M682.53,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M516.32,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M522.26,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M528.2,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M534.13,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M540.06,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M546,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M551.93,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M557.85,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M563.79,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M569.73,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M575.66,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M581.6,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M587.53,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M593.46,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M599.4,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M605.33,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M611.26,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M617.2,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M623.14,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M629.06,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M635.01,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M640.94,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M646.87,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M652.81,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M658.75,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M664.69,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M670.61,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M676.54,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M510.4,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M344.24,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M350.19,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M356.13,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M362.06,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M367.98,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M373.91,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M379.85,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M385.79,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M391.72,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M397.66,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M403.58,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M409.52,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M415.45,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M421.39,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M427.33,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M433.26,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M439.19,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M445.11,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M451.05,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M456.99,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M462.93,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M468.86,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M474.78,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M480.71,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M486.65,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M492.61,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M498.54,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M504.47,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M338.31,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M172.11,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M178.04,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M183.98,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M189.92,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M195.86,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M201.79,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M207.71,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M213.66,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M219.6,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M225.54,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M231.47,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M237.4,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M243.34,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M249.26,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M255.2,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M261.14,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M267.07,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M273,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M278.94,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M284.86,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M290.8,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M296.73,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M302.67,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M308.6,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M314.54,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M320.48,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M326.4,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M332.33,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M166.18,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M0,22H3.89v-4.26H0v4.26Z" />
      <path d="M5.94,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M11.87,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M17.79,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M23.73,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M29.67,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M35.6,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M41.53,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M47.47,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M53.4,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M59.33,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M65.28,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M71.21,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M77.15,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M83.08,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M89.02,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M94.95,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M100.88,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M106.81,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M112.75,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M118.69,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M124.61,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M130.55,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M136.48,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M142.41,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M148.35,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M154.29,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M160.22,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M854.59,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M860.54,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M866.47,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M872.4,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M878.34,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M884.26,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M890.19,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M896.12,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M902.07,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M908,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M913.94,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M919.86,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M925.79,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M931.72,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M937.67,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M943.62,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M949.55,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M955.47,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M961.4,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M967.35,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M973.28,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M979.21,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M985.15,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M991.07,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M997.01,22h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1002.95,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1008.88,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1014.82,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1020.74,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1026.68,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1032.62,22h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1038.55,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1044.49,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1050.41,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1056.34,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1062.27,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1068.22,22h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1074.15,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1080.08,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1086.01,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1091.94,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1097.87,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1103.82,22h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1109.76,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1115.7,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1121.62,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1127.55,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1133.49,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1139.43,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1145.37,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1151.3,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1157.22,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1163.15,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1169.1,22h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1175.03,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1180.96,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1186.89,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1192.82,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1198.76,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1204.7,22h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1210.63,22h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1216.55,22h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1222.49,22h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1228.42,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1234.35,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1240.29,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1246.23,22h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1252.15,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1258.08,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1264.02,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1269.95,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1275.92,22h3.87v-4.26h-3.87v4.26Z" />
      <path d="M1281.85,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1287.76,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1293.7,22h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1299.63,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1305.56,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1311.52,22h3.87v-4.26h-3.87v4.26Z" />
      <path d="M1317.45,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1323.36,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1329.3,22h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1335.23,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1341.16,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1347.12,22h3.87v-4.26h-3.87v4.26Z" />
      <path d="M1353.03,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1358.98,22h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1364.91,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1370.84,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1376.79,22h3.87v-4.26h-3.87v4.26Z" />
      <path d="M1382.7,22h3.87v-4.26h-3.87v4.26Z" />
      <path d="M1388.63,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1394.58,22h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1400.51,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1406.44,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1412.39,22h3.87v-4.26h-3.87v4.26Z" />
      <path d="M1418.31,22h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1424.24,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1430.18,22h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1436.11,22h3.89v-4.26h-3.89v4.26Z" />
      <path d="M688.45,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M694.39,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M700.32,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M706.25,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M712.19,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M718.11,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M724.04,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M729.98,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M735.92,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M741.85,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M747.79,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M753.72,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M759.65,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M765.58,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M771.52,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M777.47,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M783.4,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M789.32,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M795.26,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M801.2,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M807.13,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M813.06,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M819,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M824.93,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M830.85,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M836.8,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M842.73,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M848.67,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M516.32,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M522.26,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M528.2,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M534.13,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M540.06,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M546,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M551.93,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M557.85,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M563.79,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M569.73,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M575.66,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M581.6,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M587.53,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M593.46,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M599.4,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M605.33,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M611.26,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M617.2,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M623.14,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M629.06,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M635.01,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M640.94,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M646.87,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M652.81,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M658.75,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M664.69,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M670.61,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M676.54,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M344.24,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M350.19,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M356.13,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M362.06,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M367.98,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M373.91,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M379.85,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M385.79,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M391.72,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M397.66,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M403.58,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M409.52,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M415.45,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M421.39,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M427.33,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M433.26,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M439.19,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M445.11,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M451.05,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M456.99,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M462.93,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M468.86,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M474.78,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M480.71,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M486.65,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M492.61,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M498.54,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M504.47,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M172.11,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M178.04,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M183.98,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M189.92,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M195.86,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M201.79,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M207.71,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M213.66,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M219.6,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M225.54,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M231.47,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M237.4,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M243.34,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M249.26,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M255.2,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M261.14,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M267.07,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M273,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M278.94,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M284.86,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M290.8,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M296.73,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M302.67,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M308.6,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M314.54,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M320.48,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M326.4,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M332.33,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M0,16.4H3.89v-4.26H0v4.26Z" />
      <path d="M5.94,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M11.87,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M17.79,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M23.73,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M29.67,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M35.6,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M41.53,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M47.47,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M53.4,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M59.33,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M65.28,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M71.21,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M77.15,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M83.08,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M89.02,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M94.95,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M100.88,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M106.81,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M112.75,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M118.69,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M124.61,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M130.55,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M136.48,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M142.41,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M148.35,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M154.29,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M160.22,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M854.59,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M860.54,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M866.47,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M872.4,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M878.34,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M884.26,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M890.19,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M896.12,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M902.07,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M908,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M913.94,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M919.86,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M925.79,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M931.72,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M937.67,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M943.62,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M949.55,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M955.47,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M961.4,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M967.35,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M973.28,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M979.21,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M985.15,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M991.07,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M997.01,16.4h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1002.95,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1008.88,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1014.82,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1020.74,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1026.68,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1032.62,16.4h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1038.55,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1044.49,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1050.41,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1056.34,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1062.27,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1068.22,16.4h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1074.15,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1080.08,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1086.01,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1091.94,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1097.87,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1103.82,16.4h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1109.76,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1115.7,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1121.62,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1127.55,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1133.49,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1139.43,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1145.37,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1151.3,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1157.22,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1163.15,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1169.1,16.4h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1175.03,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1180.96,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1186.89,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1192.82,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1198.76,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1204.7,16.4h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1210.63,16.4h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1216.55,16.4h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1222.49,16.4h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1228.42,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1234.35,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1240.29,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1246.23,16.4h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1252.15,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1258.08,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1264.02,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1269.95,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1275.92,16.4h3.87v-4.26h-3.87v4.26Z" />
      <path d="M1281.85,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1287.76,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1293.7,16.4h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1299.63,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1305.56,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1311.52,16.4h3.87v-4.26h-3.87v4.26Z" />
      <path d="M1317.45,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1323.36,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1329.3,16.4h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1335.23,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1341.16,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1347.12,16.4h3.87v-4.26h-3.87v4.26Z" />
      <path d="M1353.03,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1358.98,16.4h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1364.91,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1370.84,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1376.79,16.4h3.87v-4.26h-3.87v4.26Z" />
      <path d="M1382.7,16.4h3.87v-4.26h-3.87v4.26Z" />
      <path d="M1388.63,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1394.58,16.4h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1400.51,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1406.44,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1412.39,16.4h3.87v-4.26h-3.87v4.26Z" />
      <path d="M1418.31,16.4h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1424.24,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M1430.18,16.4h3.88v-4.26h-3.88v4.26Z" />
      <path d="M1436.11,16.4h3.89v-4.26h-3.89v4.26Z" />
      <path d="M694.39,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M706.25,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M712.19,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M718.11,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M729.98,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M735.92,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M741.85,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M747.79,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M753.71,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M765.58,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M777.47,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M789.32,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M801.2,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M813.06,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M819,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M824.92,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M830.85,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M836.8,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M848.67,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M522.25,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M534.13,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M540.06,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M546,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M557.85,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M563.79,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M569.73,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M575.66,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M581.6,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M593.46,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M605.33,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M617.2,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M629.05,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M640.94,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M646.87,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M652.81,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M658.74,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M664.69,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M676.54,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M350.18,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M362.06,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M367.98,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M373.91,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M385.79,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M391.72,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M397.66,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M403.58,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M409.52,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M421.39,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M433.26,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M445.11,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M456.99,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M468.86,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M474.78,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M480.71,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M486.65,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M492.61,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M504.47,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M178.04,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M189.91,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M195.86,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M201.79,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M213.66,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M219.6,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M225.54,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M231.47,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M237.4,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M249.26,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M261.14,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M273,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M284.86,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M296.73,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M302.67,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M308.6,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M314.54,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M320.48,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M332.33,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M5.94,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M17.79,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M23.72,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M29.67,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M41.53,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M47.47,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M53.39,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M59.33,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M65.28,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M77.15,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M89.02,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M100.88,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M112.75,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M124.61,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M130.55,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M136.48,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M142.41,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M148.35,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M160.21,10.8h3.89V6.53h-3.89v4.26h0Z" />
      <path d="M860.53,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M872.4,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M878.34,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M884.26,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M896.12,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M902.07,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M908,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M913.94,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M919.86,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M931.72,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M943.62,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M955.47,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M967.35,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M979.21,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M985.15,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M991.07,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M997,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1002.95,10.79h3.88V6.53h-3.88v4.26Z" />
      <path d="M1014.82,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1026.68,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1038.55,10.79h3.88V6.53h-3.88v4.26Z" />
      <path d="M1044.49,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1050.41,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1062.27,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1068.21,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1074.15,10.79h3.88V6.53h-3.88v4.26Z" />
      <path d="M1080.08,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1086.01,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1097.87,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1109.76,10.79h3.88V6.53h-3.88v4.26Z" />
      <path d="M1121.62,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1133.49,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1145.37,10.79h3.88V6.53h-3.88v4.26Z" />
      <path d="M1151.3,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1157.22,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1163.15,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1169.09,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1180.96,10.79h3.88V6.53h-3.88v4.26Z" />
      <path d="M1192.82,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1204.69,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1210.62,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1216.55,10.79h3.88V6.53h-3.88v4.26Z" />
      <path d="M1228.42,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1234.35,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1240.29,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1246.23,10.79h3.88V6.53h-3.88v4.26Z" />
      <path d="M1252.15,10.79h3.88V6.53h-3.88v4.26Z" />
      <path d="M1264.02,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1275.92,10.79h3.87V6.53h-3.87v4.26Z" />
      <path d="M1287.76,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1299.63,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1311.52,10.79h3.87V6.53h-3.87v4.26Z" />
      <path d="M1317.45,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1323.36,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1329.3,10.79h3.88V6.53h-3.88v4.26Z" />
      <path d="M1335.23,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1347.12,10.79h3.87V6.53h-3.87v4.26Z" />
      <path d="M1358.98,10.79h3.88V6.53h-3.88v4.26Z" />
      <path d="M1370.84,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1376.79,10.79h3.87V6.53h-3.87v4.26Z" />
      <path d="M1382.7,10.79h3.87V6.53h-3.87v4.26Z" />
      <path d="M1394.58,10.79h3.88V6.53h-3.88v4.26Z" />
      <path d="M1400.51,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1406.44,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1412.38,10.79h3.88V6.53h-3.88v4.26Z" />
      <path d="M1418.3,10.79h3.89V6.53h-3.89v4.26Z" />
      <path d="M1430.18,10.79h3.88V6.53h-3.88v4.26Z" />
      <path d="M694.39,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M706.25,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M712.19,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M718.11,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M735.92,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M741.85,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M747.79,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M789.32,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M813.06,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M824.92,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M836.8,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M522.25,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M534.13,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M540.06,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M546,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M563.79,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M569.73,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M575.66,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M617.2,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M640.94,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M652.81,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M664.69,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M350.18,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M362.06,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M367.98,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M373.91,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M391.72,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M397.66,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M403.58,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M445.11,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M468.86,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M480.71,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M492.61,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M178.04,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M189.91,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M195.86,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M201.79,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M219.6,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M225.54,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M231.47,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M273,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M296.73,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M308.6,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M320.48,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M5.94,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M17.79,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M23.72,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M29.67,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M47.47,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M53.39,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M59.33,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M100.88,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M124.61,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M136.48,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M148.35,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M860.53,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M872.4,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M878.34,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M884.26,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M902.07,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M908,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M913.94,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M955.47,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M979.21,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M991.07,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1002.95,5.19h3.88V.93h-3.88V5.19Z" />
      <path d="M1026.68,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1038.55,5.19h3.88V.93h-3.88V5.19Z" />
      <path d="M1044.49,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1050.41,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1068.21,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1074.15,5.19h3.88V.93h-3.88V5.19Z" />
      <path d="M1080.08,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1121.62,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1145.37,5.19h3.88V.93h-3.88V5.19Z" />
      <path d="M1157.22,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1169.09,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1192.82,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1204.7,5.19h3.88V.93h-3.88V5.19Z" />
      <path d="M1210.62,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1216.55,5.19h3.88V.93h-3.88V5.19Z" />
      <path d="M1234.35,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1240.29,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1246.23,5.19h3.88V.93h-3.88V5.19Z" />
      <path d="M1287.76,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1311.52,5.19h3.87V.93h-3.87V5.19Z" />
      <path d="M1323.36,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1335.23,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1358.98,5.19h3.88V.93h-3.88V5.19Z" />
      <path d="M1370.84,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1376.79,5.19h3.87V.93h-3.87V5.19Z" />
      <path d="M1382.7,5.19h3.87V.93h-3.87V5.19Z" />
      <path d="M1400.51,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1406.44,5.19h3.89V.93h-3.89V5.19Z" />
      <path d="M1412.38,5.19h3.88V.93h-3.88V5.19Z" />
    </mask>
    <rect x="0" id="pixel-gradient" class="pixel-gradient" y="0" fill="url(#pixelGradient)" width=" 100%" fill="pink" height="24" mask="url(#pixelMask)" />
  </svg>
</div>
              
            
!

CSS

              
                $horizonHeight: 264px;
$windowHeight: 840px;
$windowWidth: 1440px;
$transitionDuration: 0.6s;
$transitionVertical: 3.5%;
$transitionScale: 0.05;

$gradientBg: radial-gradient(
  54.58% 160.41% at 50% 50%,
  #1c1d1e 0%,
  #141515 56.07%,
  #060606 100%
);

body {
  font-family: "Inter", sans-serif;
  background: #111;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app {
  margin: 0 auto;
  width: $windowWidth;
  height: $windowHeight;
  overflow: hidden;
  position: relative;
  background: $gradientBg;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
}

#start-over {
  padding: 12px 24px;
  position: absolute;
  right: 32px;
  top: 32px;
  margin: 0;
  background: #333;
  color: #ccc;
  z-index: 12;
}

.overlay {
  background: $gradientBg;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 8;
  opacity: 0;
  transition: opacity $transitionDuration * 2 ease-out;
  // NOTE: no overlay in step 1
  .app-active & {
    opacity: 0;
  }

  // NOTE: Overlay fades to 50% at step 2 & 3
  .app-active[data-step="2"] &,
  .app-active[data-step="3"] & {
    opacity: 0.5;
  }

  // NOTE: Overlay is 100% opaque to completely hide the orb and grid in subsequent steps
  .app-active[data-step="4"] &,
  .app-active[data-step="5"] &,
  .app-active[data-step="6"] &,
  .app-active[data-step="7"] &,
  .app-active[data-step="8"] & {
    opacity: 1;
  }
}

// type
.content-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 640px;
  height: 640px;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.contents {
  position: absolute;
  display: flex;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  text-align: center;
  color: #fff;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  transform: translateY($transitionVertical * -1) scale(#{1-$transitionScale});
  transition: all $transitionDuration;

  &.active {
    z-index: 10;
    opacity: 1;
    transform: translateY(0%) scale(1);
    transition-timing-function: ease-out;
  }

  &#content-1.active {
    transition-duration: $transitionDuration;
  }

  &.fade-out {
    display: flex;
    z-index: 10;
    opacity: 0;
    transform: translateY($transitionVertical) scale(#{$transitionScale + 1});
    transition-timing-function: ease-in;
  }
}

h1 {
  font-family: tachyon, sans-serif;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 2rem;
  line-height: 130%;
  margin: 0 auto 1rem auto;
}

p {
  font-size: 18px;
  line-height: 150%;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0 0 1.5em 0;

  &:last-of-type {
    margin-bottom: 0;
  }
}

button {
  -webkit-appearance: none;
  border: 0;
  border-radius: 2px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  padding: 16px 60px;
  line-height: 1em;
  background: #fafafa;
  margin: 3rem 0 0 0;
  cursor: pointer;
}

@keyframes orbAnimation {
  0% {
    transform: translate(-50%, -50%);
  }

  50% {
    transform: translate(-50%, -52.5%);
  }

  100% {
    transform: translate(-50%, -50%);
  }
}

// orb
.orb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 424px;
  height: 424px;
  border: 3px solid #999;
  border-radius: 50%;
  background: radial-gradient(
    100% 100% at 50% 0%,
    #20bdff 0%,
    #1b1838 52.6%,
    #42165a 70.31%,
    #f31184 100%
  );
  box-shadow: 0px 0px 30px #f31184;
  z-index: 2;
  transition: all ($transitionDuration * 2) ease-out;
  opacity: 0;
  transform: translate(-50%, -54%) scale(0.93);

  .app-active & {
    transition: all 0.8s ease-out;
    transform: translate(-50%, -50%) scale(1);
  }

  .app-active[data-step="1"] &,
  .app-active[data-step="2"] & {
    opacity: 1;
    animation: orbAnimation 4s infinite ease-in-out;
  }
}

.horizon-container {
  top: $windowHeight - $horizonHeight;
  position: relative;
  height: $horizonHeight;
  z-index: 1;
  transition: all $transitionDuration ease-out;
  opacity: 0;

  .app-active & {
    opacity: 1;
  }

  &.fade-out {
    opacity: 0;
  }
}

.horizon-top {
  height: 3px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #444;
  box-shadow: 0 0 2px 0 rgba(255, 255, 255, 0.2);
}

.line-container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
}

.horizontal-line,
.vertical-line {
  background: #444;
  box-shadow: 0 0 2px 0 rgba(255, 255, 255, 0.2);
  position: absolute;
}

$horizontalMultiplier: 0.08;

.vertical-line {
  height: 150%;
  width: 2px;
  left: 50%;
  transform-origin: top center;

  &:nth-child(2) {
    transform: translateX(($windowWidth * $horizontalMultiplier)) rotate(-15deg);
  }

  &:nth-child(3) {
    transform: translateX(($windowWidth * $horizontalMultiplier * -1))
      rotate(15deg);
  }

  &:nth-child(4) {
    transform: translateX(($windowWidth * $horizontalMultiplier * 2))
      rotate(-30deg);
  }

  &:nth-child(5) {
    transform: translateX(($windowWidth * $horizontalMultiplier * -2))
      rotate(30deg);
  }

  &:nth-child(6) {
    transform: translateX(($windowWidth * $horizontalMultiplier * 3))
      rotate(-45deg);
  }

  &:nth-child(7) {
    transform: translateX(($windowWidth * $horizontalMultiplier * -3))
      rotate(45deg);
  }

  &:nth-child(8) {
    transform: translateX(($windowWidth * $horizontalMultiplier * 4))
      rotate(-60deg);
  }

  &:nth-child(9) {
    transform: translateX(($windowWidth * $horizontalMultiplier * -4))
      rotate(60deg);
  }

  &:nth-child(10) {
    transform: translateX(($windowWidth * $horizontalMultiplier * 5))
      rotate(-68deg);
  }

  &:nth-child(11) {
    transform: translateX(($windowWidth * $horizontalMultiplier * -5))
      rotate(68deg);
  }
}

@keyframes drivin {
  0% {
    transform: translateY($horizonHeight * -0.4);
  }
  100% {
    transform: translateY(0vh);
  }
}

.horizontal-line {
  height: 2px;
  width: 100%;
  top: 0;
  position: absolute;

  .animating & {
    animation: drivin 1.4s 1 cubic-bezier(0.45, 0, 0.55, 1);
  }

  @for $i from 0 through 9 {
    &:nth-of-type(#{$i + 1}) {
      top: 20% * $i;
    }
  }
}

.pixel-footer {
  position: absolute;
  z-index: 11;
  bottom: 0;
  left: 0;
  transition: all $transitionDuration ease-out;
  opacity: 0;

  &.active {
    opacity: 1;
  }
}

              
            
!

JS

              
                const $buttons = document.querySelectorAll(".click-button");
const $horizonContainer = document.getElementById("horizon-container");
const $app = document.getElementById("app");
const $contents = document.querySelectorAll(".contents");
const $pixelFooter = document.getElementById("pixel-footer");
const transitionDuration = 600;
const horizonDuration = transitionDuration * 2; // ms for horizonlines to move
let counter = 0;
totalItems = $contents.length;

function startApp() {
  console.log("restart");
  counter = 0;
  $app.classList.add("app-active");
  nextStep();
}

function restartApp() {
  $app.classList.remove("app-active");
  $pixelFooter.classList.remove("active");
  $contents.forEach((item) => {
    item.classList.remove("active");
    item.classList.remove("fade-out");
  });
  setTimeout(startApp,(transitionDuration * 2) + 10);
}

function nextStep() {
  $app.dataset.step = counter + 1;
  console.log("counter", counter);

  //start over
  if (counter === 5) {
    restartApp();
    return false;
  }

  const $prevContent = document.getElementById("content-" + counter);
  //remove active effect from content element and add fade-out effect
  if ($prevContent) {
    $prevContent.classList.add("fade-out");
    $prevContent.classList.remove("active");
  }

  //after duration remove fade out so the content box is back to default
  setTimeout(() => {
    if ($prevContent) {
      $prevContent.classList.remove("fade-out");
    }
    counter++;
    // active to fade in new content box
    document.getElementById("content-" + counter).classList.add("active");
  }, transitionDuration);

  // control the horizon line animations
  if (counter < 4) {
    console.log("trigger horizon");
    $horizonContainer.classList.add("animating");
    setTimeout(() => {
      $horizonContainer.classList.remove("animating");
    }, horizonDuration);
  }

  // show the pixel footer
  if (counter === 3) {
    setTimeout(() => {
      $pixelFooter.classList.add("active");
    }, transitionDuration * 2);
  }
}

$buttons.forEach((item) => {
  item.addEventListener("click", nextStep);
});

setTimeout(startApp, 500);

document.getElementById("start-over").addEventListener("click", restartApp);

              
            
!
999px

Console