body{margin:0;font-family:monospace}#top{display:flex;position:absolute;top:0;bottom:0;left:0;right:0;justify-content:space-around;overflow:hidden;color:#FFF;transition:color 2s}#top.brt{color:#000}#ti{padding:0;font-size:4vmin;color:rgba(192,192,192,0.8);padding:1vmin;background-size:100% 100%}#ti b{color:#FFF;padding-left:0.3em}#shr{font-size:3vmin;text-align:left;display:none}#shr div{border:#00F solid 1px;cursor:pointer;color:#99F;display:inline-block;padding:.5em;border-radius:.5em}#shr.act{display:block}.tf{opacity:0;transition:opacity 1s}.tf.act{opacity:1}div.sb{border-radius:2vmin;padding:0.5vmin;text-align:center;background:linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(64,64,64,0.4) 50%, rgba(0,0,0,0.8) 100%);border:ridge 4px rgba(128,128,128,0.8);color:rgba(255,255,255,0.8)}.tc{margin:1vmin;display:inline-block}.tc div{border:#CCC 1px solid;background-color:#000;width:10vmin;height:10vmin;background-size:100% 100%;border-radius:2vmin;margin:0.1vmin;display:inline-block;box-sizing:border-box;font-size:2vmin;cursor:pointer}.tc div.active{background-color:#550;border:#FF0 3px solid}#title{flex-grow:1;writing-mode:vertical-lr;font-size:5vmin;padding-top:0.25em;padding-left:0.1em;text-shadow:0px 0px 10vmin gray}#panel{flex-grow:3;display:flex;flex-direction:column;justify-content:space-around;align-items:center}@media (orientation: portrait){#top{flex-direction:column}#title{writing-mode:horizontal-tb}#panel{flex-direction:row;flex-wrap:wrap}}div#mainf{height:100vmin;width:100vmin;margin:0;position:relative;perspective:50vmin;perspective-origin:50% 100%}div.main{height:100vmin;width:100vmin;color:#000;font-size:5vmin;margin:0;position:relative;transform:rotateX(15deg) translateY(-15vmin);transform-style:preserve-3d}div#dp{position:absolute;width:80%;height:80%;z-index:500;top:-100%;left:10%;text-align:center;font-size:4vmin;padding:0.5vmin;transition:top 1s}div#dp i{display:block;font-variant:small-caps;text-align:left;opacity:.8;font-size:3vmin;margin-top:.5em;font-style:normal}div#dp div#dpt{opacity:.9;font-size:3vmin}div#dp div#dpt b{color:#FF8;font-variant:small-caps;transform:rotate(-8deg)}div#dp div#dpl{box-sizing:border-box;font-size:15vmin;padding-top:2vmin;width:25vmin;height:25vmin;margin-left:auto;margin-right:auto;background-size:100% 100%}div#dp div#dpst{position:absolute;top:0;right:0;width:25vmin;height:25vmin;background-size:100% 100%}div#dp div#dpst div.str{width:8vmin;height:8vmin;background-size:100% 100%}div#dp div#dpst div.str.off{opacity:.2}div#dp div.cmd{padding:.5em;margin:1vmin;font-size:120%;border:#FFF 1px solid;border-radius:0.25em;font-variant:small-caps;display:none;width:25vmin;cursor:pointer;background:linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(128,128,64,0.3) 50%, rgba(0,0,0,0.8) 100%);border:outset 2px rgba(128,128,128,0.8)}div#dp div.cmd.df{width:63vmin;color:#FF8;background:linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(128,128,0,0.9) 50%, rgba(0,0,0,0.8) 100%)}div#dp.st{top:10%}div#dp.st #scmd{display:inline-block}div#dp.fst{top:10%}div#dp.fst #fcmd{display:inline-block}div#dp.ed{top:10%}div#dp.ed #ncmd{display:inline-block}div#dp.ed #rcmd{display:inline-block}div#dp.ed #lcmd{display:inline-block}div#menu{display:flex;flex-wrap:wrap;justify-content:space-around;align-content:space-around;position:absolute;width:98%;height:98%;z-index:500;bottom:-200%;transition:bottom 1s;left:1%;text-align:center;font-size:5vmin;box-sizing:border-box;padding:0.5vmin}div#menu div{width:20vmin;height:15vmin;display:inline-block;font-size:8vmin;border:ridge #888 3px;border-radius:2vmin;position:relative;cursor:pointer}div#menu div div{position:absolute;left:0;top:0vmin;box-sizing:border-box;padding-top:2vmin;height:15vmin;width:15vmin;background-size:100% 100%;border:none}div#menu div div.str{right:1vmin;left:auto;width:5vmin;height:5vmin}div#menu div div.str.off{opacity:.2}div#menu div div.str:nth-child(1){top:1vmin;right:3vmin}div#menu div div.str:nth-child(2){top:5vmin;right:.5vmin}div#menu div div.str:nth-child(3){top:9vmin;right:3vmin}div#menu div.brt{color:#000}div#menu.act{bottom:1%}@keyframes round{0%{transform:rotateZ(0deg)}100%{transform:rotateZ(72deg)}}@keyframes home0{0%{transform:translateZ(0.2vmin) scale(1, 1);opacity:1}100%{transform:translateZ(20vmin) scale(3, 3);opacity:0}}@keyframes hop0{0%{transform:rotateZ(0deg)}50%{transform:rotateZ(90deg)}100%{transform:rotateZ(0deg)}}@keyframes death0{0%{opacity:1;transform:translate3d(0, 0, 0.5vmin) rotateY(0deg)}50%{opacity:1;transform:translate3d(0, 0, -1vmin) rotateY(180deg)}100%{transform:translate3d(0, 0, -10vmin) rotateY(0deg);opacity:0}}@keyframes start0{0%{transform:translateZ(-50vmin)}100%{transform:translateZ(0.2vmin)}}@keyframes chirp0{0%{transform:translateZ(0vmin) scale3d(1, 1, 1)}40%{transform:translateZ(1vmin) scale3d(2, 1, 1)}60%{transform:translateZ(1vmin) scale3d(1, 2, 1)}100%{transform:translateZ(0vmin) scale3d(1, 1, 1)}}@keyframes home1{0%{transform:translateZ(0.2vmin) scale(1, 1);opacity:1}100%{transform:translateZ(20vmin) scale(3, 3);opacity:0}}@keyframes hop1{0%{transform:rotateZ(0deg)}50%{transform:rotateZ(90deg)}100%{transform:rotateZ(0deg)}}@keyframes death1{0%{opacity:1;transform:translate3d(0, 0, 0.5vmin) rotateY(0deg)}50%{opacity:1;transform:translate3d(0, 0, -1vmin) rotateY(180deg)}100%{transform:translate3d(0, 0, -10vmin) rotateY(0deg);opacity:0}}@keyframes start1{0%{transform:translateZ(-50vmin)}100%{transform:translateZ(0.2vmin)}}@keyframes chirp1{0%{transform:translateZ(0vmin) rotateX(0deg)}20%{transform:translateZ(0.2vmin) rotateX(0deg)}50%{transform:translateZ(0.5vmin) rotateX(20deg)}80%{transform:translateZ(0.2vmin) rotateX(30deg)}100%{transform:translateZ(0vmin) rotateX(0deg)}}@keyframes home2{0%{transform:translateZ(0.2vmin) scale(1, 1);opacity:1}100%{transform:translateZ(20vmin) scale(3, 3);opacity:0}}@keyframes hop2{0%{transform:rotateZ(0deg)}50%{transform:rotateZ(90deg)}100%{transform:rotateZ(0deg)}}@keyframes death2{0%{opacity:1;transform:translate3d(0, 0, 0.5vmin) rotateY(0deg)}50%{opacity:1;transform:translate3d(0, 0, -1vmin) rotateY(180deg)}100%{transform:translate3d(0, 0, -10vmin) rotateY(0deg);opacity:0}}@keyframes start2{0%{transform:translateZ(-50vmin)}100%{transform:translateZ(0.2vmin)}}@keyframes chirp2{0%{transform:translateZ(0vmin) rotateX(0deg)}20%{transform:translateZ(1vmin) rotateX(50deg)}50%{transform:translateZ(1.5vmin) rotateX(20deg)}80%{transform:translateZ(0.5vmin) rotateX(-10deg)}100%{transform:translateZ(0vmin) rotateX(0deg)}}div.tile{position:absolute;width:25vmin;height:25vmin;background-size:100% 100%;color:#FFF;text-align:left;display:inline-block;box-sizing:border-box;transition:transform 0.5s;transform-style:preserve-3d}div.tile div.top{position:absolute;top:0;bottom:0;left:0;right:0;z-index:10;background-size:100% 100%;pointer-events:none}div.tile div.bot{z-index:2;position:absolute;top:0;bottom:0;left:0;right:0;background-size:100% 100%;transform-style:preserve-3d}div.tile div.act{z-index:5;position:absolute;top:10%;bottom:10%;left:10%;right:10%;background-size:100% 100%;animation:round 3s infinite}div.tile div.spk{pointer-events:none;z-index:100;width:6vmin;height:6vmin;position:absolute;left:-3vmin;top:-3vmin;transform-origin:50% 50%;transform-style:preserve-3d;will-change:transform}div.tile div.spk div{position:absolute;top:0;bottom:0;left:0;right:0;background-size:100% 100%}@keyframes introt{0%{transform:rotateX(10deg) translate3d(0, 100vmin, 5vmin);opacity:0}20%{opacity:1}100%{transform:rotateX(10deg) translate3d(0, -100vmin, 5vmin);opacity:0}}#intro{animation:introt 40s 1 forwards;font-size:5vmin;transform:translate3d(0, 100vmin, 5vmin) rotateX(20deg);text-align:center;padding:2em;position:absolute;background:rgba(0,0,0,0.6);border-radius:2em;color:#FFF;z-index:500}#intro b{color:#FF8}