Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

Save Automatically?

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

              
                <! DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link type="text/css" rel="stylesheet" href="css/style.css" />
</head>

<body>
  <!-- more settings (not click) -->
  <input type="checkbox" id="one" checked>
  <input type="checkbox" id="two">
  <input type="checkbox" id="three" checked>
  <!-- game menu button (not click) -->
  <input type="checkbox" name="menu-button" id="play">
  <input type="checkbox" name="menu-button" id="about">
  <!-- more settings (click) -->
  <label for="one">+</label>
  <label for="two">-</label>
  <label for="three">Show map</label>
  <label for="play" class="play-in-game">Back</label>
  <!-- game menu -->
  <nav>
    <!-- game menu button (click) -->
    <div class="menu">
      <h1><a>100</a><a>blocks</a><a>around</a></h1>
      <label for="play">Play</label>
      <label for="about">About me</label>
      <div>
  </nav>
  <!-- window with results -->
  <div class="box">
    <!-- about me -->
    <div class="about_me">
      <p>About me:</p>
      <p> Hello my name is Andrew and I am a web programmer. Learning in Ivano-Frankivsk - Ukraine in the School of Computer skills. Currently I work in web studio "Contact" in Ivano-Frankivsk. Very good 2 know programming languages: CSS3 i html5, and I am
        now studying graphic design and other programming languages such as jquery and others. Most of my sites I'm trying to do a clean language: CSS3 and html5, pick the most desired design and beautiful logo. I always udoskonalyuyus and learning something
        new and develop those skills that already have, so I think - web programming is something that I really like. </p>
      <p> My interests are: </p>
      <p> Continuing where I work or just sitting at the computer I listen to his beloved music. Music for me is very important, without it, I'm sad. Now I prefer my loved groups: Romie & amp; Friends, Three Days Grace and System of a Down. Also I like to
        travel home town on velesopedi, like walking with friends in the yard and play football. </p>
      <p> Technical Skill: </p>
      <p> My beloved programs for working with web programming is: Google Chome, Notepad ++, ColorMania, mySize, Adobe Photoshop CC. I focused on developing unique and stable in operation and simplicity sites. Sites that help me in Web Development: htmlbook.ru,
        codepen.io, colorzilla.com/gradient-editor, google.com/fonts, w3.org. </p>
      <label for="about">Back</label>
    </div>
  </div>
  <!-- game -->
  <div class="game">
    <!-- game floor (not see) -->
    <input type="checkbox" id="a1" disabled>
    <input type="checkbox" id="a2" disabled>
    <input type="checkbox" id="a3" disabled>
    <input type="checkbox" id="a4" disabled>
    <input type="checkbox" id="a5" disabled>
    <input type="checkbox" id="a6" disabled>
    <input type="checkbox" id="a7" disabled>
    <input type="checkbox" id="a8" disabled>
    <input type="checkbox" id="a9" disabled>
    <input type="checkbox" id="a10" disabled>
    <input type="checkbox" id="a11" disabled>
    <input type="radio" name="floor" id="a12">
    <input type="checkbox" id="a13" disabled>
    <input type="radio" name="floor" id="a14">
    <input type="checkbox" id="a15" disabled>
    <input type="checkbox" id="a16" disabled>
    <input type="radio" name="floor" id="a17">
    <input type="radio" name="floor" id="a18">
    <input type="radio" name="floor" id="a19">
    <input type="checkbox" id="a20" disabled>
    <input type="checkbox" id="a21" disabled>
    <input type="radio" name="floor" id="a22">
    <input type="checkbox" id="a23" disabled>
    <input type="radio" name="floor" id="a24">
    <input type="checkbox" id="a25" disabled>
    <input type="radio" name="floor" id="a26">
    <input type="radio" name="floor" id="a27">
    <input type="checkbox" id="a28" disabled>
    <input type="radio" name="floor" id="a29">
    <input type="checkbox" id="a30" disabled>
    <input type="radio" name="floor" id="a31" checked>
    <!-- start -->
    <input type="radio" name="floor" id="a32">
    <input type="radio" name="floor" id="a33">
    <input type="radio" name="floor" id="a34">
    <input type="checkbox" id="a35" disabled>
    <input type="checkbox" id="a36" disabled>
    <input type="radio" name="floor" id="a37">
    <input type="checkbox" id="a38" disabled>
    <input type="checkbox" id="a39" disabled>
    <input type="checkbox" id="a40" disabled>
    <input type="checkbox" id="a41" disabled>
    <input type="radio" name="floor" id="a42">
    <input type="checkbox" id="a43" disabled>
    <input type="radio" name="floor" id="a44">
    <input type="radio" name="floor" id="a45">
    <input type="radio" name="floor" id="a46">
    <input type="radio" name="floor" id="a47">
    <input type="radio" name="floor" id="a48">
    <input type="radio" name="floor" id="a49">
    <input type="checkbox" id="a50" disabled>
    <input type="checkbox" id="a51" disabled>
    <input type="radio" name="floor" id="a52">
    <input type="checkbox" id="a53" disabled>
    <input type="checkbox" id="a54" disabled>
    <input type="checkbox" id="a55" disabled>
    <input type="checkbox" id="a56" disabled>
    <input type="checkbox" id="a57" disabled>
    <input type="checkbox" id="a58" disabled>
    <input type="radio" name="floor" id="a59">
    <input type="checkbox" id="a60" disabled>
    <input type="checkbox" id="a61" disabled>
    <input type="radio" name="floor" id="a62">
    <input type="checkbox" id="a63" disabled>
    <input type="radio" name="floor" id="a64">
    <input type="checkbox" id="a65" disabled>
    <input type="radio" name="floor" id="a66">
    <input type="radio" name="floor" id="a67">
    <input type="radio" name="floor" id="a68">
    <input type="radio" name="floor" id="a69">
    <input type="checkbox" id="a70" disabled>
    <input type="checkbox" id="a71" disabled>
    <input type="radio" name="floor" id="a72">
    <input type="checkbox" id="a73" disabled>
    <input type="radio" name="floor" id="a74">
    <input type="checkbox" id="a75" disabled>
    <input type="radio" name="floor" id="a76">
    <input type="checkbox" id="a77" disabled>
    <input type="checkbox" id="a78" disabled>
    <input type="checkbox" id="a79" disabled>
    <input type="checkbox" id="a80" disabled>
    <input type="checkbox" id="a81" disabled>
    <input type="radio" name="floor" id="a82">
    <input type="radio" name="floor" id="a83">
    <input type="radio" name="floor" id="a84">
    <input type="checkbox" id="a85" disabled>
    <input type="radio" name="floor" id="a86">
    <input type="radio" name="floor" id="a87">
    <input type="radio" name="floor" id="a88">
    <input type="radio" name="floor" id="a89">
    <input type="radio" name="floor" id="a90">
    <input type="checkbox" id="a91" disabled>
    <input type="checkbox" id="a92" disabled>
    <input type="checkbox" id="a93" disabled>
    <input type="checkbox" id="a94" disabled>
    <input type="checkbox" id="a95" disabled>
    <input type="checkbox" id="a96" disabled>
    <input type="checkbox" id="a97" disabled>
    <input type="checkbox" id="a98" disabled>
    <input type="checkbox" id="a99" disabled>
    <input type="checkbox" id="a100" disabled>
    <!-- text for winner -->
    <div class="winner">Welcome!
      <br> You passed the maze. Your time:
      <br>
      <br>
      <br>
      <br> Visit the developer of this game:<a href="https://vk.com/bhorc" target="_blank"> click for visit </a></div>
    <!-- timer -->
    <div class="container">
      <!-- time to add the controls -->
      <div class="timer">
        <div class="cell">
          <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
        <div class="cell">
          <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
        <div class="cell divider">
          <div class="numbers">:</div>
        </div>
        <div class="cell">
          <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
        </div>
        <div class="cell">
          <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
        <div class="cell divider">
          <div class="numbers">:</div>
        </div>
        <div class="cell">
          <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
        </div>
        <div class="cell">
          <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
        <div class="cell divider">
          <div class="numbers">:</div>
        </div>
        <div class="cell">
          <div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
        <div class="cell">
          <div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
        <div class="cell">
          <div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
        </div>
      </div>
    </div>
    <!-- floor -->
    <div class="floor">
      <!-- game floor (see) -->
      <div>
        <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
      </div>
      <label for="a1" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a2" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a3" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a4" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a5" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a6" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a7" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a8" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a9" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a10" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a11" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a12"></label>
      <label for="a13" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a14"></label>
      <label for="a15" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a16" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a17"></label>
      <label for="a18"></label>
      <label for="a19"></label>
      <label for="a20" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a21" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a22"></label>
      <label for="a23" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a24"></label>
      <label for="a25" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a26"></label>
      <label for="a27"></label>
      <label for="a28" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a29"></label>
      <label for="a30" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a31"></label>
      <label for="a32"></label>
      <label for="a33"></label>
      <label for="a34"></label>
      <label for="a35" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a36" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a37"></label>
      <label for="a38" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a39" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a40" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a41" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a42"></label>
      <label for="a43" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a44"></label>
      <label for="a45"></label>
      <label for="a46"></label>
      <label for="a47"></label>
      <label for="a48"></label>
      <label for="a49"></label>
      <label for="a50" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a51" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a52"></label>
      <label for="a53" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a54" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a55" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a56" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a57" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a58" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a59"></label>
      <label for="a60" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a61" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a62"></label>
      <label for="a63" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a64"></label>
      <label for="a65" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a66"></label>
      <label for="a67"></label>
      <label for="a68"></label>
      <label for="a69"></label>
      <label for="a70" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a71" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a72"></label>
      <label for="a73" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a74"></label>
      <label for="a75" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a76"></label>
      <label for="a77" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a78" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a79" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a80" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a81" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a82"></label>
      <label for="a83"></label>
      <label for="a84"></label>
      <label for="a85" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a86"></label>
      <label for="a87"></label>
      <label for="a88"></label>
      <label for="a89"></label>
      <label for="a90"></label>
      <label for="a91" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a92" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a93" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a94" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a95" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a96" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a97" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a98" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a99" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <label for="a100" class="disabled">
        <ul class="block">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </label>
      <!-- player -->
      <div class="player">
        <!-- player skin -->
        <ul class="player-skin">
          <li class="n1"></li>
          <li class="n2"></li>
          <li class="n3"></li>
          <li class="n4"></li>
          <li class="n5"></li>
          <li class="n6"></li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Lily+Script+One);
@font-face {
font-family: 'digital';
src: url('http://thecodeplayer.com/uploads/fonts/DS-DIGI.TTF');
}

*{
margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body{overflow-x:hidden;}
a{outline-style: none; text-decoration:none;color:#000;}
input{outline-style: none;}
ol, ul, li{list-style:none;}
a img{border:none;}
:focus{outline:0;}

.container {
text-align: center;
position:absolute;
left:calc(50% - 197px);
top:10px;
z-index:9999;
}
.timer {
padding: 10px;
background: #ccc;
overflow: hidden;
display: inline-block;
border: 7px solid #333;
border-radius: 5px;
position: relative;
}
.cell {
width: 0.60em;
height: 40px;
font-size: 50px;
overflow: hidden;
position: relative;
float: left;
}
.numbers {
width: 0.6em;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
color: #000;
position: absolute;
top: 0;
left: 0;
text-shadow: 0 0 5px rgba(255, 255, 255, 1);
}
#timer_controls {margin-top: -5px;}
#timer_controls label {
cursor: pointer;
padding: 5px 10px;
background: #efefef;
font-family: arial, verdana, tahoma;
font-size: 11px;
border-radius: 0 0 3px 3px;
}
input[name="controls"] {display: none;}
.moveten {
-webkit-animation: moveten 1s steps(10, end) infinite;
-moz-animation: moveten 1s steps(10, end) infinite;
-o-animation: moveten 1s steps(10, end) infinite;
-ms-animation: moveten 1s steps(10, end) infinite;
animation: moveten 1s steps(10, end) infinite;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused;
}
.movesix {
-webkit-animation: movesix 1s steps(6, end) infinite;
-moz-animation: movesix 1s steps(6, end) infinite;
-o-animation: movesix 1s steps(6, end) infinite;
-ms-animation: movesix 1s steps(6, end) infinite;
animation: movesix 1s steps(6, end) infinite;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused;
}
.second {
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-o-animation-duration: 10s;
-ms-animation-duration: 10s;
animation-duration: 10s;
}
.tensecond {
-webkit-animation-duration: 60s;
-moz-animation-duration: 60s;
-o-animation-duration: 60s;
-ms-animation-duration: 60s;
animation-duration: 60s;
}
.milisecond {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
-ms-animation-duration: 1s;
animation-duration: 1s;
}
.tenmilisecond {
-webkit-animation-duration: 0.1s;
-moz-animation-duration: 0.1s;
-o-animation-duration: 0.1s;
-ms-animation-duration: 0.1s;
animation-duration: 0.1s;
}
.hundredmilisecond {
-webkit-animation-duration: 0.01s;
-moz-animation-duration: 0.01s;
-o-animation-duration: 0.01s;
-ms-animation-duration: 0.01s;
animation-duration: 0.01s;
}
.minute {
-webkit-animation-duration: 600s;
-moz-animation-duration: 600s;
-o-animation-duration: 600s;
-ms-animation-duration: 600s;
animation-duration: 600s;
}
.tenminute {
-webkit-animation-duration: 3600s;
-moz-animation-duration: 3600s;
-o-animation-duration: 3600s;
-ms-animation-duration: 3600s;
animation-duration: 3600s;
}
.hour {
-webkit-animation-duration: 36000s;
-moz-animation-duration: 36000s;
-o-animation-duration: 36000s;
-ms-animation-duration: 36000s;
animation-duration: 36000s;
}
.tenhour {
-webkit-animation-duration: 360000s;
-moz-animation-duration: 360000s;
-o-animation-duration: 360000s;
-ms-animation-duration: 360000s;
animation-duration: 360000s;
}
@-webkit-keyframes moveten {0%{top:0;}100%{top:-400px;}}
@-moz-keyframes moveten {0%{top:0;}100%{top:-400px;}}
@-o-keyframes moveten {0%{top:0;}100%{top:-400px;}}
@-ms-keyframes moveten {0%{top:0;}100%{top:-400px;}}
@keyframes moveten {0%{top:0;}100%{top:-400px;}}
@-webkit-keyframes movesix {0%{top:0;}100%{top:-240px;}}
@-moz-keyframes movesix {0%{top:0;}100%{top:-240px;}}
@-o-keyframes movesix {0%{top:0;}100%{top:-240px;}}
@-ms-keyframes movesix {0%{top:0;}100%{top:-240px;}}
@keyframes movesix {0%{top:0;}100%{top:-240px;}}
.winner{
width:400px;
height:245px;
font: normal normal 26px cursive;
position:absolute;
text-align:center;
margin:0 0 0 -7px;
top:calc(50% - 130px);
left:calc(50% - 195px);
visibility:hidden;
}
.winner a{
height:34px;
display:inline-block;
border-bottom:2px solid red;
}
.winner a:hover{border-bottom:2px solid blue;}
input#play:checked ~ .game .container .timer .numbers {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;
}
.game input#a90:checked ~ .container .timer .numbers {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused;
}
.game input#a90:checked ~ .container{
-webkit-transition:all 1s linear 2s;
-moz-transition:all 1s linear 2s;
-o-transition:all 1s linear 2s;
-ms-transition:all 1s linear 2s;
transition:all 1s linear 2s;
top:calc(50% - 37px);
}
.game input#a90:checked ~ .winner{
-webkit-transition:all 1s linear 3s;
-moz-transition:all 1s linear 3s;
-o-transition:all 1s linear 3s;
-ms-transition:all 1s linear 3s;
transition:all 1s linear 3s;
visibility:visible;
}
nav{
z-index:50;
position:fixed;
width:100%;
height:100%;
background: #add385; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #add385 0%, #94c45e 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#add385), color-stop(100%,#94c45e)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #add385 0%,#94c45e 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #add385 0%,#94c45e 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #add385 0%,#94c45e 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #add385 0%,#94c45e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#add385', endColorstr='#94c45e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
nav div{
width:400px;
height:200px;
position:absolute;
top:calc(50% - 100px);
left:calc(50% - 200px);
}
nav label{
width:400px;
height:50px;
margin:0 0 20px 0;
position: relative;
z-index:99999;
text-align:center;
display: inline-block;
color: #f1f1f1;
outline: none;
background: #33bbff;
background: -moz-linear-gradient(#1ab2ff, #4dc3ff), #33bbff;
background: -o-linear-gradient(#1ab2ff, #4dc3ff), #33bbff;
background: -webkit-linear-gradient(#1ab2ff, #4dc3ff), #33bbff;
background: linear-gradient(#1ab2ff, #4dc3ff), #33bbff;
text-shadow: -1px -1px 0 rgba(26, 26, 26, 0.5);
box-shadow: inset 0 -1px 1px #66ccff, 0 8px 0 #0088cc, 0 10px 15px rgba(0, 0, 0, 0.35);
-moz-transition: all 100ms ease-in-out;
-o-transition: all 100ms ease-in-out;
-webkit-transition: all 100ms ease-in-out;
-ms-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
padding:10px 0 0 0;
font: normal normal 2em/1 'Lily Script One', cursive;
text-decoration: none;
}
nav h1{margin:-250px 0 0 0;}
nav h1 a{
height:138px;
display:block;
text-align:center;
color: #f1f1f1;
text-shadow: -1px -1px 0 rgba(26, 26, 26, 0.5);
font: normal normal 100px 'Lily Script One', cursive;
width:400px;
float:left;
margin:-40px auto 0 auto;
}
.box{
position:fixed;
width:100%;
height:100%;
background: #add385;
background: -moz-radial-gradient(center, ellipse cover, #add385 0%, #94c45e 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#add385), color-stop(100%,#94c45e));
background: -webkit-radial-gradient(center, ellipse cover, #add385 0%,#94c45e 100%);
background: -o-radial-gradient(center, ellipse cover, #add385 0%,#94c45e 100%);
background: -ms-radial-gradient(center, ellipse cover, #add385 0%,#94c45e 100%);
background: radial-gradient(ellipse at center, #add385 0%,#94c45e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#add385', endColorstr='#94c45e',GradientType=1 ); 
}
.box .about_me label{
color: #f1f1f1;
text-shadow: -1px -1px 0 rgba(26, 26, 26, 0.5);
position:absolute;
bottom:10px;
left:calc(50% - 50px);
width:100px;
}
.box .about_me label{font: normal normal 2em/1 'Lily Script One', cursive;}
.box .about_me{
display:none;
width:800px;
position:relative;
left:calc(50% - 400px);
top:calc(50% - 400px);
z-index:51;
color: #f1f1f1;
background: #33bbff;
background: -moz-linear-gradient(#1ab2ff, #4dc3ff), #33bbff;
background: -o-linear-gradient(#1ab2ff, #4dc3ff), #33bbff;
background: -webkit-linear-gradient(#1ab2ff, #4dc3ff), #33bbff;
background: linear-gradient(#1ab2ff, #4dc3ff), #33bbff;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: inset 0 -1px 1px #66ccff, 0 8px 0 #0088cc, 0 10px 15px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: inset 0 -1px 1px #66ccff, 0 8px 0 #0088cc, 0 10px 15px rgba(0, 0, 0, 0.35);
box-shadow: inset 0 -1px 1px #66ccff, 0 8px 0 #0088cc, 0 10px 15px rgba(0, 0, 0, 0.35);
padding:40px;
}
.box .about_me > p{font: normal normal 1.4em Arial;text-shadow: -1px -1px 0 rgba(26, 26, 26, 0.5);}
.floor{
position: absolute;
width:400px;
height:600px;
left:calc(50% - 200px);
top:calc(50% - 300px);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-style: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: perspective(900px) translate3d(0,0,-450px) rotate3d(1,0,0,45deg);
-moz-transform: perspective(900px) translate3d(0,0,-450px) rotate3d(1,0,0,45deg);
-o-transform: perspective(900px) translate3d(0,0,-450px) rotate3d(1,0,0,45deg);
-ms-transform-style: perspective(900px) translate3d(0,0,-450px) rotate3d(1,0,0,45deg);
transform: perspective(900px) translate3d(0,0,-450px) rotate3d(1,0,0,45deg);
}
.player{
margin:-30px -20px;
position: absolute;
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-ms-transition: all 1s linear;
transition: all 1s linear;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: perspective(900px) translate3d(0,0,1px);
-moz-transform: perspective(900px) translate3d(0,0,1px);
-ms-transform: perspective(900px) translate3d(0,0,1px);
-o-transform: perspective(900px) translate3d(0,0,1px);
transform: perspective(900px) translate3d(0,0,1px);
}
.player-skin, .block{
position: absolute;
width:40px;
height:60px;
-webkit-transition: all 0s linear;
-moz-transition: all 0s linear;
-o-transition: all 0s linear;
-ms-transition: all 0s linear;
transition: all 0s linear;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: translate3d(0,0,60px);
-moz-transform: translate3d(0,0,60px);
-o-transform: translate3d(0,0,60px);
-ms-transform: translate3d(0,0,60px);
transform: translate3d(0,0,60px);
}
.block{
-webkit-transform: translate3d(0,0,60px);
-moz-transform: translate3d(0,0,60px);
-o-transform: translate3d(0,0,60px);
-ms-transform: translate3d(0,0,60px);
transform: translate3d(0,0,60px);
}
.n1{
top: 0;
left: 0;
-webkit-transform: translate3d(0,0,-60px);
-moz-transform: translate3d(0,0,0px);
-o-transform: translate3d(0,0,0px);
-ms-transform: translate3d(0,0,0px);
transform: translate3d(0,0,0px);
}
.n2{
top: 0;
left: calc(100% - 1px);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translate3d(0,0,0px) rotate3d(0,1,0,90deg);
-moz-transform: translate3d(0,0,0px) rotate3d(0,1,0,90deg);
-o-transform: translate3d(0,0,0px) rotate3d(0,1,0,90deg);
-ms-transform: translate3d(0,0,0px) rotate3d(0,1,0,90deg);
transform: translate3d(0,0,0px) rotate3d(0,1,0,90deg);
}
.n3{
top: calc(100% - 1px);
left: 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translate3d(0,0,0px) rotate3d(1,0,0,-90deg);
-moz-transform: translate3d(0,0,0px) rotate3d(1,0,0,-90deg);
-o-transform: translate3d(0,0,0px) rotate3d(1,0,0,-90deg);
-ms-transform: translate3d(0,0,0px) rotate3d(1,0,0,-90deg);
transform: translate3d(0,0,0px) rotate3d(1,0,0,-90deg);
}	
.n4{
top: 100%;
right: calc(100% - 1px);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: translate3d(0,0,0px) rotateZ(0deg) rotateX(180deg) rotateY(90deg) rotate3d(0,0,0,180deg);
-moz-transform: translate3d(0,0,0px) rotateZ(0deg) rotateX(180deg) rotateY(90deg) rotate3d(0,0,0,180deg);
-ms-transform: translate3d(0,0,0px) rotateZ(0deg) rotateX(180deg) rotateY(90deg) rotate3d(0,0,0,180deg);
-o-transform: translate3d(0,0,0px) rotateZ(0deg) rotateX(180deg) rotateY(90deg) rotate3d(0,0,0,180deg);
transform: translate3d(0,0,0px) rotateZ(0deg) rotateX(180deg) rotateY(90deg) rotate3d(0,0,0,180deg);

}
.n5{
bottom: calc(100% - 1px);
left: 100%;
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-transform: translate3d(0,0,0px) rotateY(90deg) rotate3d(1,0,0,90deg);
-moz-transform: translate3d(0,0,0px) rotateY(90deg) rotate3d(1,0,0,90deg);
-o-transform: translate3d(0,0,0px) rotateY(90deg) rotate3d(1,0,0,90deg);
-ms-transform: translate3d(0,0,0px) rotateY(90deg) rotate3d(1,0,0,90deg);
transform: translate3d(0,0,0px) rotateY(90deg) rotate3d(1,0,0,90deg);
}
.n6{
top: 0;
left: 0;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: translate3d(0,0,0) rotate3d(1,0,0,180deg);
-moz-transform: translate3d(0,0,0) rotate3d(1,0,0,0deg);
-o-transform: translate3d(0,0,0) rotate3d(1,0,0,180deg);
-ms-transform: translate3d(0,0,0) rotate3d(1,0,0,180deg);
transform: translate3d(0,0,0) rotate3d(1,0,0,180deg);
}
.n1, .n3, .n6{width: 40px;}
.n2, .n4, .n5{width: 60px;}
.player-skin li:not(.n5), .block li:not(.n5){height: 60px;}
.n5{height:40px;}
.player-skin li, .block li {
position: absolute;
display: block;
box-shadow: inset 0 0 15px rgba(255,255,255,0.3), inset -30px -30px 80px rgba(0,0,0,0.3);
}

.player-skin .n1{background-color: #d00;}
.player-skin .n2{background-color: #dd0;}
.player-skin .n3{background-color: #999;}
.player-skin .n4{background-color: #04d;}
.player-skin .n5{background-color: #0dd;}
.player-skin .n6{background-color: #6a0;}
.block li{background:#000;}

label[for="one"], label[for="two"], label[for="three"], .play-in-game{
width:50px;
height:50px;
display:block;
position:absolute;
text-align:center;
line-height:50px;
z-index:99999;
}
label[for="one"], label[for="two"], label[for="three"], label.play-in-game{
background:#ccc;
font-family:Arial;
}
label[for="one"], label[for="two"], label[for="three"], .game{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
opacity:0;
}
label[for="one"], label[for="two"], label[for="three"], label.play-in-game, .game, .container{display:none;}
label[for="one"]{top:10px;left:10px;}
label[for="two"]{left:70px;top:10px;}
label[for="three"]{width:110px;top:70px;left:10px;}
label.play-in-game{width:100px;top:10px;right:10px;}
input[type="radio"], input[type="checkbox"]{display:none;}
input#one:checked ~ .game .floor{
-webkit-transform: perspective(900px) translate3d(0,0,0) rotate3d(1,0,0,45deg);
-moz-transform: perspective(900px) translate3d(0,0,0) rotate3d(1,0,0,45deg);
-o-transform: perspective(900px) translate3d(0,0,0) rotate3d(1,0,0,45deg);
-ms-transform: perspective(900px) translate3d(0,0,0) rotate3d(1,0,0,45deg);
transform: perspective(900px) translate3d(0,0,0) rotate3d(1,0,0,45deg);
}
input#two:checked ~ .game .floor{
-webkit-transform: perspective(900px) translate3d(0,0,-900px) rotate3d(1,0,0,45deg);
-moz-transform: perspective(900px) translate3d(0,0,-900px) rotate3d(1,0,0,45deg);
-o-transform: perspective(900px) translate3d(0,0,-900px) rotate3d(1,0,0,45deg);
-ms-transform: perspective(900px) translate3d(0,0,-900px) rotate3d(1,0,0,45deg);
transform: perspective(900px) translate3d(0,0,-900px) rotate3d(1,0,0,45deg);
}
input#three:checked ~ .game .floor{
-webkit-transform: perspective(900px) translate3d(0,0,-450px) rotate3d(0,0,1,90deg) rotateZ(-90deg);
-moz-transform: perspective(900px) translate3d(0,0,-450px) rotate3d(0,0,1,90deg) rotateZ(-90deg);
-o-transform: perspective(900px) translate3d(0,0,-450px) rotate3d(0,0,1,90deg) rotateZ(-90deg);
-ms-transform: perspective(900px) translate3d(0,0,-450px) rotate3d(0,0,1,90deg) rotateZ(-90deg);
transform: perspective(900px) translate3d(0,0,-450px) rotate3d(0,0,1,90deg) rotateZ(-90deg);
}
input#one:checked ~ input#three:checked ~ .game .floor, input#three:checked ~ input#one:checked ~ .game .floor{
-webkit-transform: perspective(900px) translate3d(0,0,0) rotate3d(0,0,1,90deg) rotateZ(-90deg);
-moz-transform: perspective(900px) translate3d(0,0,0) rotate3d(0,0,1,90deg) rotateZ(-90deg);
-o-transform: perspective(900px) translate3d(0,0,0) rotate3d(0,0,1,90deg) rotateZ(-90deg);
-ms-transform: perspective(900px) translate3d(0,0,0) rotate3d(0,0,1,90deg) rotateZ(-90deg);
transform: perspective(900px) translate3d(0,0,0) rotate3d(0,0,1,90deg) rotateZ(-90deg);
}
input#two:checked ~ input#three:checked ~ .game .floor, input#three:checked ~ input#two:checked ~ .game .floor{
-webkit-transform: perspective(900px) translate3d(0,0,-900px) rotate3d(0,0,1,90deg) rotateZ(-90deg);
-moz-transform: perspective(900px) translate3d(0,0,-900px) rotate3d(0,0,1,90deg) rotateZ(-90deg);
-o-transform: perspective(900px) translate3d(0,0,-900px) rotate3d(0,0,1,90deg) rotateZ(-90deg);
-ms-transform: perspective(900px) translate3d(0,0,-900px) rotate3d(0,0,1,90deg) rotateZ(-90deg);
transform: perspective(900px) translate3d(0,0,-900px) rotate3d(0,0,1,90deg) rotateZ(-90deg);
}
input#play:checked ~ .game .container, input#play:checked ~ .game, input#play:checked ~ label[for="one"], input#play:checked ~ label[for="two"], input#play:checked ~ label[for="three"], input#play:checked ~ .play-in-game{opacity:1;display:block;}
input#play:checked ~ nav{display:none;}
input#about:checked ~ .box div.about_me, input#about:checked ~ .box{
display:block;
z-index:51;
}
input#about ~ .box div.about_me, input#about ~ .box{
display:none;
z-index:49;
}
.floor > div{position:absolute;}
.floor label, .floor i{
display:block;
width:40px;
height:60px;
float:left;
background:lightgreen;
border:1px solid #000;
position:relative;
}
input#a90:checked ~ .floor, input#a90:checked ~ .floor .player, input#a90:checked ~ .floor label{
-webkit-animation: show 1.3s linear !important;
-moz-animation: show 1.3s linear !important;
-ms-animation: show 1.3s linear !important;
-o-animation: show 1.3s linear !important;
-ms-animation: show 1.3s linear !important;
visibility:hidden !important;
}
input#a90:checked ~ .floor label[for="a86"],
input#a90:checked ~ .floor label[for="a87"],
input#a90:checked ~ .floor label[for="a88"],
input#a90:checked ~ .floor label[for="a89"],
input#a90:checked ~ .floor label[for="a90"]{
-webkit-animation: show-1 1s linear 1s;
-moz-transition:show-1 1s linear 1s;
-o-transition:show-1 1s linear 1s;
-ms-transition:show-1 1s linear 1s;
transition:show-1 1s linear 1s;
opacity:0;
}
@-webkit-keyframes show {from {visibility:visible;}to {visibility:hidden;}}
@-moz-keyframes show {from {visibility:visible;}to {visibility:hidden;}}
@-o-keyframes show {from {visibility:visible;}to {visibility:hidden;}}
@-ms-keyframes show {from {visibility:visible;}to {visibility:hidden;}}
@keyframes show {from {visibility:visible;}to {visibility:hidden;}}

@-webkit-keyframes show-1 {from {opacity:1;}to {opacity:0;}}
@-moz-keyframes show-1 {from {opacity:1;}to {opacity:0;}}
@-o-keyframes show-1 {from {opacity:1;}to {opacity:0;}}
@-ms-keyframes show-1 {from {opacity:1;}to {opacity:0;}}
@keyframes show-1 {from {opacity:1;}to {opacity:0;}}

/* grid (мозги карти) */

/* left */
.game input:nth-child(10n-9):checked ~ .floor .player{left:20px;}
.game input:nth-child(10n-8):checked ~ .floor .player{left:60px;}
.game input:nth-child(10n-7):checked ~ .floor .player{left:100px;}
.game input:nth-child(10n-6):checked ~ .floor .player{left:140px;}
.game input:nth-child(10n-5):checked ~ .floor .player{left:180px;}
.game input:nth-child(10n-4):checked ~ .floor .player{left:220px;}
.game input:nth-child(10n-3):checked ~ .floor .player{left:260px;}
.game input:nth-child(10n-2):checked ~ .floor .player{left:300px;}
.game input:nth-child(10n-1):checked ~ .floor .player{left:340px;}
.game input:nth-child(10n):checked ~ .floor .player{left:380px;}
/* top */
.game input:nth-child(-n+10):checked ~ .floor .player{top:30px;}
.game input:nth-child(n+11):nth-child(-n+20):checked ~ .floor .player{top:90px;}
.game input:nth-child(n+21):nth-child(-n+30):checked ~ .floor .player{top:150px;}
.game input:nth-child(n+31):nth-child(-n+40):checked ~ .floor .player{top:210px;}
.game input:nth-child(n+41):nth-child(-n+50):checked ~ .floor .player{top:270px;}
.game input:nth-child(n+51):nth-child(-n+60):checked ~ .floor .player{top:330px;}
.game input:nth-child(n+61):nth-child(-n+70):checked ~ .floor .player{top:390px;}
.game input:nth-child(n+71):nth-child(-n+80):checked ~ .floor .player{top:450px;}
.game input:nth-child(n+81):nth-child(-n+90):checked ~ .floor .player{top:510px;}
.game input:nth-child(n+91):nth-child(-n+100):checked ~ .floor .player{top:570px;}
/* карта руху ігрока */
input#a31:checked ~ .floor label:not([for="a32"]):not([for="a33"]):not([for="a34"]),
input#a32:checked ~ .floor label:not([for="a31"]):not([for="a33"]):not([for="a34"]),
input#a33:checked ~ .floor label:not([for="a31"]):not([for="a32"]):not([for="a34"]),
input#a34:checked ~ .floor label:not([for="a31"]):not([for="a32"]):not([for="a33"]),
input#a82:checked ~ .floor label:not([for="a83"]):not([for="a84"]),
input#a83:checked ~ .floor label:not([for="a82"]):not([for="a84"]),
input#a84:checked ~ .floor label:not([for="a82"]):not([for="a83"]),
input#a84:checked ~ .floor label:not([for="a74"]):not([for="a64"]):not([for="a54"]),
input#a74:checked ~ .floor label:not([for="a84"]):not([for="a64"]):not([for="a54"]),
input#a64:checked ~ .floor label:not([for="a74"]):not([for="a84"]):not([for="a54"]),
input#a54:checked ~ .floor label:not([for="a74"]):not([for="a64"]):not([for="a84"]),
input#a14:checked ~ .floor label:not([for="a24"]):not([for="a34"]):not([for="a44"]),
input#a24:checked ~ .floor label:not([for="a14"]):not([for="a34"]):not([for="a44"]),
input#a44:checked ~ .floor label:not([for="a14"]):not([for="a24"]):not([for="a34"]):not([for="a45"]):not([for="a46"]):not([for="a47"]):not([for="a48"]):not([for="a49"]),
input#a45:checked ~ .floor label:not([for="a44"]):not([for="a46"]):not([for="a47"]):not([for="a48"]):not([for="a49"]),
input#a46:checked ~ .floor label:not([for="a44"]):not([for="a45"]):not([for="a47"]):not([for="a48"]):not([for="a49"]),
input#a47:checked ~ .floor label:not([for="a44"]):not([for="a45"]):not([for="a46"]):not([for="a48"]):not([for="a49"]):not([for="a17"]):not([for="a27"]):not([for="a37"]),
input#a48:checked ~ .floor label:not([for="a44"]):not([for="a45"]):not([for="a46"]):not([for="a47"]):not([for="a49"]),
input#a49:checked ~ .floor label:not([for="a44"]):not([for="a45"]):not([for="a46"]):not([for="a47"]):not([for="a48"]):not([for="a59"]):not([for="a69"]),
input#a37:checked ~ .floor label:not([for="a17"]):not([for="a27"]):not([for="a47"]),
input#a27:checked ~ .floor label:not([for="a17"]):not([for="a37"]):not([for="a47"]):not([for="a26"]),
input#a17:checked ~ .floor label:not([for="a27"]):not([for="a37"]):not([for="a47"]):not([for="a18"]):not([for="a19"]),
input#a26:checked ~ .floor label:not([for="a27"]),
input#a18:checked ~ .floor label:not([for="a17"]):not([for="a19"]),
input#a19:checked ~ .floor label:not([for="a17"]):not([for="a18"]):not([for="a29"]),
input#a29:checked ~ .floor label:not([for="a19"]),
input#a59:checked ~ .floor label:not([for="a49"]):not([for="a69"]),
input#a69:checked ~ .floor label:not([for="a49"]):not([for="a59"]):not([for="a68"]):not([for="a67"]):not([for="a66"]),
input#a68:checked ~ .floor label:not([for="a66"]):not([for="a67"]):not([for="a69"]),
input#a67:checked ~ .floor label:not([for="a66"]):not([for="a68"]):not([for="a69"]),
input#a66:checked ~ .floor label:not([for="a67"]):not([for="a68"]):not([for="a69"]):not([for="a76"]):not([for="a86"]),
input#a76:checked ~ .floor label:not([for="a66"]):not([for="a86"]),
input#a86:checked ~ .floor label:not([for="a66"]):not([for="a76"]):not([for="a87"]):not([for="a88"]):not([for="a89"]):not([for="a90"]),
input#a87:checked ~ .floor label:not([for="a86"]):not([for="a88"]):not([for="a89"]):not([for="a90"]),
input#a88:checked ~ .floor label:not([for="a86"]):not([for="a87"]):not([for="a89"]):not([for="a90"]),
input#a89:checked ~ .floor label:not([for="a86"]):not([for="a87"]):not([for="a88"]):not([for="a90"]),
input#a90:checked ~ .floor label:not([for="a86"]):not([for="a87"]):not([for="a88"]):not([for="a89"]),
input:nth-child(10n-8):checked ~ .floor label:not([for="a12"]):not([for="a22"]):not([for="a32"]):not([for="a42"]):not([for="a52"]):not([for="a62"]):not([for="a72"]):not([for="a82"]){
-webkit-transition:all .2s linear;
-moz-transition:all .2s linear;
-ms-transition:all .2s linear;
-o-transition:all .2s linear;
transition:all .2s linear;
visibility:hidden;
}

input#a31:checked ~ .floor label[for="a31"],
input#a31:checked ~ .floor label[for="a32"],
input#a31:checked ~ .floor label[for="a33"],
input#a31:checked ~ .floor label[for="a34"],
input#a32:checked ~ .floor label[for="a31"],
input#a32:checked ~ .floor label[for="a32"],
input#a32:checked ~ .floor label[for="a33"],
input#a32:checked ~ .floor label[for="a34"],
input#a33:checked ~ .floor label[for="a31"],
input#a33:checked ~ .floor label[for="a32"],
input#a33:checked ~ .floor label[for="a33"],
input#a33:checked ~ .floor label[for="a34"],
input#a34:checked ~ .floor label[for="a31"],
input#a34:checked ~ .floor label[for="a32"],
input#a34:checked ~ .floor label[for="a33"],
input#a34:checked ~ .floor label[for="a34"],
input#a34:checked ~ .floor label[for="a14"],
input#a34:checked ~ .floor label[for="a24"],
input#a34:checked ~ .floor label[for="a44"],
input#a82:checked ~ .floor label[for="a82"],
input#a82:checked ~ .floor label[for="a83"],
input#a82:checked ~ .floor label[for="a84"],
input#a83:checked ~ .floor label[for="a82"],
input#a83:checked ~ .floor label[for="a83"],
input#a83:checked ~ .floor label[for="a84"],
input#a84:checked ~ .floor label[for="a82"],
input#a84:checked ~ .floor label[for="a83"],
input#a84:checked ~ .floor label[for="a84"],
input#a84:checked ~ .floor label[for="a54"],
input#a84:checked ~ .floor label[for="a64"],
input#a84:checked ~ .floor label[for="a74"],
input#a54:checked ~ .floor label[for="a64"],
input#a54:checked ~ .floor label[for="a74"],
input#a54:checked ~ .floor label[for="a84"],
input#a64:checked ~ .floor label[for="a64"],
input#a64:checked ~ .floor label[for="a74"],
input#a64:checked ~ .floor label[for="a84"],
input#a74:checked ~ .floor label[for="a64"],
input#a74:checked ~ .floor label[for="a74"],
input#a74:checked ~ .floor label[for="a84"],
input#a24:checked ~ .floor label[for="a14"],
input#a24:checked ~ .floor label[for="a24"],
input#a24:checked ~ .floor label[for="a34"],
input#a24:checked ~ .floor label[for="a44"],
input#a14:checked ~ .floor label[for="a14"],
input#a14:checked ~ .floor label[for="a24"],
input#a14:checked ~ .floor label[for="a34"],
input#a14:checked ~ .floor label[for="a44"],
input#a44:checked ~ .floor label[for="a14"],
input#a44:checked ~ .floor label[for="a24"],
input#a44:checked ~ .floor label[for="a34"],
input#a44:checked ~ .floor label[for="a44"],
input#a44:checked ~ .floor label[for="a45"],
input#a44:checked ~ .floor label[for="a46"],
input#a44:checked ~ .floor label[for="a47"],
input#a44:checked ~ .floor label[for="a48"],
input#a44:checked ~ .floor label[for="a49"],
input#a45:checked ~ .floor label[for="a44"],
input#a45:checked ~ .floor label[for="a45"],
input#a45:checked ~ .floor label[for="a46"],
input#a45:checked ~ .floor label[for="a47"],
input#a45:checked ~ .floor label[for="a48"],
input#a45:checked ~ .floor label[for="a49"],
input#a46:checked ~ .floor label[for="a44"],
input#a46:checked ~ .floor label[for="a45"],
input#a46:checked ~ .floor label[for="a46"],
input#a46:checked ~ .floor label[for="a47"],
input#a46:checked ~ .floor label[for="a48"],
input#a46:checked ~ .floor label[for="a49"],
input#a17:checked ~ .floor label[for="a17"],
input#a17:checked ~ .floor label[for="a18"],
input#a17:checked ~ .floor label[for="a19"],
input#a17:checked ~ .floor label[for="a27"],
input#a17:checked ~ .floor label[for="a37"],
input#a17:checked ~ .floor label[for="a47"],
input#a18:checked ~ .floor label[for="a17"],
input#a18:checked ~ .floor label[for="a18"],
input#a18:checked ~ .floor label[for="a19"],
input#a19:checked ~ .floor label[for="a17"],
input#a19:checked ~ .floor label[for="a18"],
input#a19:checked ~ .floor label[for="a19"],
input#a19:checked ~ .floor label[for="a29"],
input#a29:checked ~ .floor label[for="a19"],
input#a29:checked ~ .floor label[for="a29"],
input#a26:checked ~ .floor label[for="a26"],
input#a26:checked ~ .floor label[for="a27"],
input#a27:checked ~ .floor label[for="a17"],
input#a27:checked ~ .floor label[for="a26"],
input#a27:checked ~ .floor label[for="a27"],
input#a27:checked ~ .floor label[for="a37"],
input#a27:checked ~ .floor label[for="a47"],
input#a29:checked ~ .floor label[for="a19"],
input#a29:checked ~ .floor label[for="a29"],
input#a37:checked ~ .floor label[for="a17"],
input#a37:checked ~ .floor label[for="a27"],
input#a37:checked ~ .floor label[for="a37"],
input#a37:checked ~ .floor label[for="a47"],
input#a47:checked ~ .floor label[for="a17"],
input#a47:checked ~ .floor label[for="a27"],
input#a47:checked ~ .floor label[for="a37"],
input#a47:checked ~ .floor label[for="a44"],
input#a47:checked ~ .floor label[for="a45"],
input#a47:checked ~ .floor label[for="a46"],
input#a47:checked ~ .floor label[for="a47"],
input#a47:checked ~ .floor label[for="a48"],
input#a47:checked ~ .floor label[for="a49"],
input#a48:checked ~ .floor label[for="a44"],
input#a48:checked ~ .floor label[for="a45"],
input#a48:checked ~ .floor label[for="a46"],
input#a48:checked ~ .floor label[for="a47"],
input#a48:checked ~ .floor label[for="a48"],
input#a48:checked ~ .floor label[for="a49"],
input#a49:checked ~ .floor label[for="a44"],
input#a49:checked ~ .floor label[for="a45"],
input#a49:checked ~ .floor label[for="a46"],
input#a49:checked ~ .floor label[for="a47"],
input#a49:checked ~ .floor label[for="a48"],
input#a49:checked ~ .floor label[for="a49"],
input#a49:checked ~ .floor label[for="a59"],
input#a49:checked ~ .floor label[for="a69"],
input#a59:checked ~ .floor label[for="a49"],
input#a59:checked ~ .floor label[for="a59"],
input#a59:checked ~ .floor label[for="a69"],
input#a69:checked ~ .floor label[for="a49"],
input#a69:checked ~ .floor label[for="a59"],
input#a69:checked ~ .floor label[for="a69"],
input#a69:checked ~ .floor label[for="a68"],
input#a69:checked ~ .floor label[for="a67"],
input#a69:checked ~ .floor label[for="a66"],
input#a68:checked ~ .floor label[for="a66"],
input#a68:checked ~ .floor label[for="a67"],
input#a68:checked ~ .floor label[for="a68"],
input#a68:checked ~ .floor label[for="a69"],
input#a67:checked ~ .floor label[for="a66"],
input#a67:checked ~ .floor label[for="a67"],
input#a67:checked ~ .floor label[for="a68"],
input#a67:checked ~ .floor label[for="a69"],
input#a66:checked ~ .floor label[for="a66"],
input#a66:checked ~ .floor label[for="a67"],
input#a66:checked ~ .floor label[for="a68"],
input#a66:checked ~ .floor label[for="a69"],
input#a66:checked ~ .floor label[for="a76"],
input#a66:checked ~ .floor label[for="a86"],    
input#a76:checked ~ .floor label[for="a66"], 
input#a76:checked ~ .floor label[for="a76"], 
input#a76:checked ~ .floor label[for="a86"], 
input#a86:checked ~ .floor label[for="a66"], 
input#a86:checked ~ .floor label[for="a76"], 
input#a86:checked ~ .floor label[for="a86"], 
input#a86:checked ~ .floor label[for="a87"], 
input#a86:checked ~ .floor label[for="a88"], 
input#a86:checked ~ .floor label[for="a89"], 
input#a86:checked ~ .floor label[for="a90"], 
input#a87:checked ~ .floor label[for="a86"], 
input#a87:checked ~ .floor label[for="a87"], 
input#a87:checked ~ .floor label[for="a88"], 
input#a87:checked ~ .floor label[for="a89"], 
input#a87:checked ~ .floor label[for="a90"], 
input#a88:checked ~ .floor label[for="a86"], 
input#a88:checked ~ .floor label[for="a87"], 
input#a88:checked ~ .floor label[for="a88"], 
input#a88:checked ~ .floor label[for="a89"], 
input#a88:checked ~ .floor label[for="a90"],
input#a89:checked ~ .floor label[for="a86"], 
input#a89:checked ~ .floor label[for="a87"], 
input#a89:checked ~ .floor label[for="a88"], 
input#a89:checked ~ .floor label[for="a89"], 
input#a89:checked ~ .floor label[for="a90"],  
input#a90:checked ~ .floor label[for="a86"], 
input#a90:checked ~ .floor label[for="a87"], 
input#a90:checked ~ .floor label[for="a88"], 
input#a90:checked ~ .floor label[for="a89"], 
input#a90:checked ~ .floor label[for="a90"], 
input#a12:checked ~ .floor label[for="a12"],
input#a12:checked ~ .floor label[for="a22"],
input#a12:checked ~ .floor label[for="a32"],
input#a12:checked ~ .floor label[for="a42"],
input#a12:checked ~ .floor label[for="a52"],
input#a12:checked ~ .floor label[for="a62"],
input#a12:checked ~ .floor label[for="a72"],
input#a12:checked ~ .floor label[for="a82"],
input#a22:checked ~ .floor label[for="a12"],
input#a22:checked ~ .floor label[for="a22"],
input#a22:checked ~ .floor label[for="a32"],
input#a22:checked ~ .floor label[for="a42"],
input#a22:checked ~ .floor label[for="a52"],
input#a22:checked ~ .floor label[for="a62"],
input#a22:checked ~ .floor label[for="a72"],
input#a22:checked ~ .floor label[for="a82"],
input#a32:checked ~ .floor label[for="a12"],
input#a32:checked ~ .floor label[for="a22"],
input#a32:checked ~ .floor label[for="a32"],
input#a32:checked ~ .floor label[for="a42"],
input#a32:checked ~ .floor label[for="a52"],
input#a32:checked ~ .floor label[for="a62"],
input#a32:checked ~ .floor label[for="a72"],
input#a32:checked ~ .floor label[for="a82"],
input#a42:checked ~ .floor label[for="a12"],
input#a42:checked ~ .floor label[for="a22"],
input#a42:checked ~ .floor label[for="a32"],
input#a42:checked ~ .floor label[for="a42"],
input#a42:checked ~ .floor label[for="a52"],
input#a42:checked ~ .floor label[for="a62"],
input#a42:checked ~ .floor label[for="a72"],
input#a42:checked ~ .floor label[for="a82"],
input#a52:checked ~ .floor label[for="a12"],
input#a52:checked ~ .floor label[for="a22"],
input#a52:checked ~ .floor label[for="a32"],
input#a52:checked ~ .floor label[for="a42"],
input#a52:checked ~ .floor label[for="a52"],
input#a52:checked ~ .floor label[for="a62"],
input#a52:checked ~ .floor label[for="a72"],
input#a52:checked ~ .floor label[for="a82"],
input#a62:checked ~ .floor label[for="a12"],
input#a62:checked ~ .floor label[for="a22"],
input#a62:checked ~ .floor label[for="a32"],
input#a62:checked ~ .floor label[for="a42"],
input#a62:checked ~ .floor label[for="a52"],
input#a62:checked ~ .floor label[for="a62"],
input#a62:checked ~ .floor label[for="a72"],
input#a62:checked ~ .floor label[for="a82"],
input#a72:checked ~ .floor label[for="a12"],
input#a72:checked ~ .floor label[for="a22"],
input#a72:checked ~ .floor label[for="a32"],
input#a72:checked ~ .floor label[for="a42"],
input#a72:checked ~ .floor label[for="a52"],
input#a72:checked ~ .floor label[for="a62"],
input#a72:checked ~ .floor label[for="a72"],
input#a72:checked ~ .floor label[for="a82"],
input#a82:checked ~ .floor label[for="a12"],
input#a82:checked ~ .floor label[for="a22"],
input#a82:checked ~ .floor label[for="a32"],
input#a82:checked ~ .floor label[for="a42"],
input#a82:checked ~ .floor label[for="a52"],
input#a82:checked ~ .floor label[for="a62"],
input#a82:checked ~ .floor label[for="a72"],
input#a82:checked ~ .floor label[for="a82"]{
-webkit-transition:all .1s linear 1s !important;
-moz-transition:all .1s linear 1s !important;
-ms-transition:all .1s linear 1s !important;
-o-transition:all .1s linear 1s !important;
transition:all .1s linear 1s !important;
visibility:visible !important;
background:darkred;
-webkit-transform: perspective(900px) translate3d(0,0,1px);
-moz-transform: perspective(900px) translate3d(0,0,1px);
-ms-transform: perspective(900px) translate3d(0,0,1px);
-o-transform: perspective(900px) translate3d(0,0,1px);
transform: perspective(900px) translate3d(0,0,1px);
}
.game input:checked ~ .floor label.disabled{visibility:visible !important;}
              
            
!

JS

              
                
              
            
!
999px

Console