html{color:#fff;background-color:#000}body{font-family:sans-serif}h1,h2{text-align:center}a{color:#4fe8fb;font-weight:700;text-decoration:none}div#nav{max-width:400px;margin:0 auto;position:relative}div#nav div#help{position:absolute;top:5px}div.grid div.row{justify-content:center;margin-bottom:10px;display:flex}div.grid div.row div.cell{width:48px;height:48px;margin-left:4px;margin-right:4px;font-size:1.8em}div.grid div.row .front,div.grid div.row .back{backface-visibility:hidden;width:100%;height:100%;line-height:48px;position:absolute}div.grid div.row .front{background-color:#000;border:2px solid #3a3a3c}div.grid div.row .back{border:2px solid #000;transform:rotateX(180deg)}div.grid div.row .correct{background-color:#538d4e}div.grid div.row .wrong-position{background-color:#b59f3b}div.grid div.row .wrong{background-color:#3a3a3c}div.grid div.row .none{background-color:#000}div.grid div.row div.inner{text-align:center;transform-style:preserve-3d;width:100%;height:100%;transition:transform 1s;position:relative}div.grid div.row div.inner-flipped{text-align:center;transform-style:preserve-3d;width:100%;height:100%;transition:transform 1s;position:relative;transform:rotateX(180deg)}div.grid div.row div.inner-flipped.delay0{transition-delay:0s}div.grid div.row div.inner-flipped.delay1{transition-delay:.25s}div.grid div.row div.inner-flipped.delay2{transition-delay:.5s}div.grid div.row div.inner-flipped.delay3{transition-delay:.75s}div.grid div.row div.inner-flipped.delay4{transition-delay:1s}div.grid div.row div.inner-flipped.delay5{transition-delay:1.25s}div.grid div.row div.inner-flipped.delay6{transition-delay:1.5s}#control{flex-direction:row;justify-content:space-between;max-width:400px;margin:0 auto;display:flex}div.button{-webkit-user-select:none;user-select:none;background-color:gray;border-radius:5px;margin:20px;padding:10px;font-size:1.5em;display:inline-block}div.button:hover{cursor:pointer}#canvas-wrapper{justify-content:center;display:flex}div.modal{z-index:1;color:#fff;background-color:#2c2d2c;border-radius:5px;max-width:400px;margin:0 auto;padding:20px 20px 50px;animation-name:fadein;animation-duration:.3s;position:fixed;left:0;right:0}div.modal div.button{background-color:#538d4e;justify-content:center;align-items:center;max-width:50%;margin:20px auto 0;display:flex}div.modal div.content{flex-direction:column;justify-content:center;display:flex}@keyframes fadein{0%{opacity:0}to{opacity:1}}.close{color:#aaa;float:right;font-size:14px;font-weight:700}.close:hover,.close:focus{color:#000;cursor:pointer;text-decoration:none}span.share{margin-right:10px}svg{fill:#fff}