:root{--animation-speed: 1s;--font: -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;--background-color: #000000;--text-color: #fff;--label-font-size: 39.33px ;--data-header-font-size: calc( 60px * 1.15 * .9 );--received-data-font-size: 41.4px ;--button-font-size: 41.4px ;--header-font-size: 41.4px ;--normal-padding: 18px ;--small-screen-padding: 9px ;--theme-button-font-size: 22px }@media screen and (max-width: 1000px){:root{--label-font-size: calc(24px * 1.15);--data-header-font-size: calc(45px * 1.15);--received-data-font-size: 34.5px ;--button-font-size: 34.5px ;--header-font-size: 29.9px }#receivedData div{min-width:305px}}@media screen and (max-width: 800px){:root{--label-font-size: calc(14px * 1.15);--data-header-font-size: 46px ;--received-data-font-size: calc(25px * 1.15);--button-font-size: calc(25px * 1.15);--header-font-size: 18.4px ;--normal-padding: var( --small-screen-padding )}#receivedData div{min-width:180px}}*{margin:0;padding:0}.hide{display:none}.pause-animation{-o-animation-play-state:paused;-moz-animation-play-state:paused;-webkit-animation-play-state:paused;animation-play-state:paused}body{top:50%;left:50%;text-align:center;position:absolute;padding:var(--normal-padding);font-family:var(--font);transform:translate(-50%,-50%);background-color:var(--background-color);color:var(--text-color)}.received-data{font-size:var(--received-data-font-size)}.header{background:transparent;position:sticky;top:0;left:0;width:100%;height:auto;padding:10px 0;display:flex;justify-content:space-between;align-items:center;z-index:-2}.dataHeader{font-size:var(--header-font-size);margin-bottom:10px;font-weight:600;justify-content:center}button{color:#e7e7e7;margin:25px;outline:none;cursor:pointer;font-size:var(--button-font-size);font-weight:700;background:#ffffff10;padding:20px 45px;border:3px solid white;border-radius:2.5vh;transition:background-color 1s ease;position:relative;box-shadow:0 0 0 8px #000}button:hover{background:transparent}button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom right,#00ff8c66,#aeff0066,#ff06,#ffb70066,#f406);z-index:-1;opacity:.7;transition:opacity .3s ease}button.neon,button.mango{font-size:var(--theme-button-font-size);border:3px solid rgb(255,255,255);border-radius:35px;margin:20px 0 0;padding:25px;box-shadow:0 0 0 8px #000}button.connect,button.connect.neon{font-size:var(--button-font-size);border-radius:25px;margin:0 20px 0 0;padding:20px 35px}button.mango:before{font-size:var(--theme-button-font-size);content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom right,#00ff8ccc,#aeff00cc,#ff0c,#ffb700cc,#f40c);z-index:-1;opacity:.5;transition:opacity .5s ease}button.neon:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom right,#00ffe5cc,#0efc,#4c00ffcc,#ae00ffcc,#ff006fcc);z-index:-1;opacity:.5;transition:opacity .5s ease}button.connect.neon:before{background:linear-gradient(to bottom right,#00ffe5,#0ef,#4c00ff,#ae00ff,#ff006f);opacity:.3;transition:opacity .5s ease}button:hover:before{opacity:1}.container{border:3px solid white;border-radius:15px;padding:var(--normal-padding);margin-bottom:10px;display:inline-block}button.connected{margin:10px;outline:none;cursor:pointer;font-size:var(--button-font-size);font-weight:700;background:#000;padding:20px 45px;border:3px solid white;border-radius:2.5vh;background-image:linear-gradient(to right,#00ff8c,#aeff00,#ff0,#ffb700,#f40);-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-image .6s}button.connected.neon{background-image:linear-gradient(to right,#00ffe5,#0ef,#4c00ff,#ae00ff,#ff006f);-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-image .6s}.ui{padding:20px;border-radius:15px;border:3px solid white}.error{margin-top:10px}#receivedData div{text-align:left;min-width:450px}.label-0{color:#fffc;font-size:var(--label-font-size)}.label-0.neon{color:#fff}.label-1,.label-1.neon{color:#0f9;font-size:var(--label-font-size)}.label-2{color:#0f3;font-size:var(--label-font-size)}.label-2.neon{color:#00ffaf;font-size:var(--label-font-size)}.label-3{color:#2bff00;font-size:var(--label-font-size)}.label-3.neon{color:#0fb;font-size:var(--label-font-size)}.label-4{color:#aeff00;font-size:var(--label-font-size)}.label-4.neon{color:#00ffd0;font-size:var(--label-font-size)}.label-5{color:#fbff00;font-size:var(--label-font-size)}.label-5.neon{color:#00fffb;font-size:var(--label-font-size)}.label-6{color:#ffe100;font-size:var(--label-font-size)}.label-6.neon{color:#00c3ff;font-size:var(--label-font-size)}.label-7{color:#ffdb10;font-size:var(--label-font-size)}.label-7.neon{color:#105cff;font-size:var(--label-font-size)}.label-8{color:#ffb300;font-size:var(--label-font-size)}.label-8.neon{color:#9600ff;font-size:var(--label-font-size)}.label-9{color:#f80;font-size:var(--label-font-size)}.label-9.neon{color:#dc00ff;font-size:var(--label-font-size)}.label-10{color:#ff3700;font-size:var(--label-font-size)}.label-10.neon{color:#ff0069;font-size:var(--label-font-size)}@media screen and (max-width: 1279px){.content-container{margin-left:100px}.viewport{transform:scale(.7)}.cube-container{margin-left:150px;margin-right:100px}}@media screen and (max-width: 1079px){.viewport{transform:scale(.6)}.cube-container{margin-left:100px;margin-right:50px}.content-container{margin-left:50px}}@media screen and (max-width: 899px){.viewport{transform:scale(.5)}.cube-container{margin-left:50px;margin-right:0}.content-container{margin-left:20px}}.container-wrapper{margin-top:20px;display:flex;justify-content:space-between;align-items:center;flex-direction:row;opacity:0;transform:translateY(00px);transition:opacity 2s ease,transform 1.2s ease}.container-wrapper.animate{opacity:1;transform:translateY(0)}.content-container{flex:1}.cube-container{margin-left:250px;margin-right:200px;margin-top:00px;flex:1;display:flex;justify-content:center;align-items:center}#cubeCanvas{width:100%;height:100%}.cube{transition:transform var(--animation-speed) ease-in-out;position:relative;margin:0 auto;height:300px;width:300px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateX(136deg) rotateY(1122deg);-moz-transform:rotateX(136deg) rotateY(1122deg);-ms-transform:rotateX(136deg) rotateY(1122deg);-o-transform:rotateX(136deg) rotateY(1122deg);transform:rotateX(136deg) rotateY(1122deg)}.cube>div{overflow:hidden;position:absolute;opacity:1;height:300px;width:300px;background:#0009;-webkit-touch-callout:none;-moz-touch-callout:none;-ms-touch-callout:none;-o-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.cube>div>div.cube-image{width:300px;height:300px;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);line-height:300px;font-size:50px;text-align:center;color:#fff;-webkit-transition:color .6s;-moz-transition:color .6s;-ms-transition:color .6s;-o-transition:color .6s;transition:color .6s}.cube>div:hover{cursor:pointer;transform:scale(1.1);background:#ffffff26}.cube>div:active{cursor:pointer}.cube>div:first-child{-webkit-transform:rotateX(90deg) translateZ(150px);-moz-transform:rotateX(90deg) translateZ(150px);-ms-transform:rotateX(90deg) translateZ(150px);-o-transform:rotateX(90deg) translateZ(150px);transform:rotateX(90deg) translateZ(150px);outline:6px solid rgb(0,255,162)}.cube.neon>div:first-child{outline:6px solid rgb(0,255,162)}.cube>div:nth-child(2){-webkit-transform:translateZ(150px);-moz-transform:translateZ(150px);-ms-transform:translateZ(150px);-o-transform:translateZ(150px);transform:translateZ(150px);outline:6px solid rgb(0,255,0)}.cube.neon>div:nth-child(2){outline:6px solid rgb(0,255,217)}.cube>div:nth-child(3){-webkit-transform:rotateY(90deg) translateZ(150px);-moz-transform:rotateY(90deg) translateZ(150px);-ms-transform:rotateY(90deg) translateZ(150px);-o-transform:rotateY(90deg) translateZ(150px);transform:rotateY(90deg) translateZ(150px);outline:6px solid rgb(255,251,0)}.cube.neon>div:nth-child(3){outline:6px solid rgb(0,200,255)}.cube>div:nth-child(4){-webkit-transform:rotateY(180deg) translateZ(150px);-moz-transform:rotateY(180deg) translateZ(150px);-ms-transform:rotateY(180deg) translateZ(150px);-o-transform:rotateY(180deg) translateZ(150px);transform:rotateY(180deg) translateZ(150px);outline:6px solid rgb(255,183,0)}.cube.neon>div:nth-child(4){outline:6px solid rgb(225,0,255)}.cube>div:nth-child(5){-webkit-transform:rotateY(-90deg) translateZ(150px);-moz-transform:rotateY(-90deg) translateZ(150px);-ms-transform:rotateY(-90deg) translateZ(150px);-o-transform:rotateY(-90deg) translateZ(150px);transform:rotateY(-90deg) translateZ(150px);outline:6px solid rgb(255,77,0)}.cube.neon>div:nth-child(5){outline:6px solid rgb(255,0,111)}.cube>div:nth-child(6){-webkit-transform:rotateX(-90deg) rotate(180deg) translateZ(150px);-moz-transform:rotateX(-90deg) rotate(180deg) translateZ(150px);-ms-transform:rotateX(-90deg) rotate(180deg) translateZ(150px);-o-transform:rotateX(-90deg) rotate(180deg) translateZ(150px);transform:rotateX(-90deg) rotate(180deg) translateZ(150px);outline:6px solid rgb(255,0,93)}.cube.neon>div:nth-child(6){outline:6px solid blue}object{opacity:.5}object:hover{opacity:1}@media screen and (max-width: 768px){.container-wrapper{flex-direction:column;justify-content:center;align-items:center}#receivedData div{min-width:180px}.content-container{margin-right:0;margin-top:40px;margin-left:0}.ui{padding:5px}.connected{margin:5px;padding:15px 35px}.cube-container{margin:100px 0}}@media screen and (max-height: 750px) and (max-width: 400px){.container-wrapper{flex-direction:column;justify-content:center;align-items:center}#receivedData div{min-width:180px}.content-container{margin-right:0;margin-top:200px;margin-left:0}.ui{padding:5px}.connected{margin:5px;padding:15px 35px}.cube-container{margin:100px 0}}@media screen and (min-width: 1000px) and (max-width: 1100px) and (min-height: 765px) and (max-height: 790px){:root{--label-font-size: 21px ;--data-header-font-size: 52.5px ;--received-data-font-size: 35px ;--button-font-size: 35px ;--header-font-size: 24.5px ;--normal-padding: var( --small-screen-padding )}.container-wrapper.animate{flex-direction:row;justify-content:center;align-items:center;margin-top:0}#receivedData div{min-width:240px}.content-container{margin-right:0;margin-top:00px;margin-left:0}.ui{padding:5px}.connected{margin:10px;padding:15px 35px}.cube-container{margin:0 100px 0 200px}}@media screen and (min-width: 800px) and (max-width: 850px) and (min-height: 1150px) and (max-height: 1200px){:root{--label-font-size: 24px ;--data-header-font-size: 60px ;--received-data-font-size: 40px ;--button-font-size: 40px ;--header-font-size: 28px ;--normal-padding: var( --small-screen-padding )}.container-wrapper.animate{flex-direction:column;justify-content:center;align-items:center;margin-top:0}#receivedData div{min-width:280px}.content-container{margin-right:0;margin-top:00px;margin-left:0}.ui{padding:10px}.connected{margin:10px;padding:15px 35px}.cube-container{margin:180px 0 120px 00px}}@media screen and (min-width: 1150px) and (max-width: 1200px) and (min-height: 800px) and (max-height: 850px){:root{--label-font-size: 24px ;--data-header-font-size: 60px ;--received-data-font-size: 40px ;--button-font-size: 40px ;--header-font-size: 28px ;--normal-padding: var( --small-screen-padding )}.container-wrapper.animate{flex-direction:row;justify-content:center;align-items:center;margin-top:0}#receivedData div{min-width:280px}.content-container{margin-right:0;margin-top:00px;margin-left:0}.ui{padding:10px}.connected{margin:10px;padding:15px 35px}.cube-container{margin:0 180px 0 280px}}@media screen and (min-width: 520px) and (max-width: 560px) and (min-height: 700px) and (max-height: 750px){:root{--label-font-size: 15px ;--data-header-font-size: 37.5px ;--received-data-font-size: 25px ;--button-font-size: 25px ;--header-font-size: 17.5px ;--normal-padding: var( --small-screen-padding )}.container-wrapper.animate{flex-direction:column;justify-content:center;align-items:center;margin-top:0}#receivedData div{min-width:180px}.content-container{margin-right:0;margin-top:200px;margin-left:0}.ui{padding:10px}.connected{margin:10px;padding:15px 35px}.cube-container{margin:100px 0 60px 00px}}@media screen and (min-width: 700px) and (max-width: 750px) and (min-height: 520px) and (max-height: 560px){:root{--label-font-size: 15px ;--data-header-font-size: 37.5px ;--received-data-font-size: 25px ;--button-font-size: 25px ;--header-font-size: 17.5px ;--normal-padding: var( --small-screen-padding )}.container-wrapper.animate{flex-direction:row;justify-content:center;align-items:center;margin-top:0}#receivedData div{min-width:180px}.content-container{margin-right:0;margin-top:00px;margin-left:0}.ui{padding:10px}.connected{margin:10px;padding:15px 35px}.cube-container{margin:0 60px 0 80px}}@media screen and (min-width: 900px) and (max-width: 1050px) and (min-height: 1350px) and (max-height: 1400px){:root{--label-font-size: 27px ;--data-header-font-size: 67.5px ;--received-data-font-size: 45px ;--button-font-size: 45px ;--header-font-size: 31.5px ;--normal-padding: var( --small-screen-padding )}.container-wrapper.animate{flex-direction:column;justify-content:center;align-items:center;margin-top:0}#receivedData div{min-width:320px}.content-container{margin-right:0;margin-top:00px;margin-left:0}.ui{padding:15px}.connected{margin:10px;padding:15px 35px}.cube-container{margin:230px 0 170px 00px}}@media screen and (min-width: 1350px) and (max-width: 1400px) and (min-height: 900px) and (max-height: 1050px){:root{--label-font-size: 27px ;--data-header-font-size: 67.5px ;--received-data-font-size: 45px ;--button-font-size: 45px ;--header-font-size: 31.5px ;--normal-padding: var( --small-screen-padding )}.container-wrapper.animate{flex-direction:row;justify-content:center;align-items:center;margin-top:0}#receivedData div{min-width:320px}.content-container{margin-right:0;margin-top:00px;margin-left:0}.ui{padding:15px}.connected{margin:10px;padding:15px 35px}.cube-container{margin:0 230px 0 330px}}@media screen and (min-width: 820px) and (max-width: 870px) and (min-height: 1250px) and (max-height: 1300px){:root{--label-font-size: 27px ;--data-header-font-size: 67.5px ;--received-data-font-size: 45px ;--button-font-size: 45px ;--header-font-size: 31.5px ;--normal-padding: var( --small-screen-padding )}.container-wrapper.animate{flex-direction:column;justify-content:center;align-items:center;margin-top:0}#receivedData div{min-width:320px}.content-container{margin-right:0;margin-top:00px;margin-left:0}.ui{padding:15px}.connected{margin:10px;padding:15px 35px}.cube-container{margin:230px 0 170px 00px}}@media screen and (min-width: 1250px) and (max-width: 1300px) and (min-height: 820px) and (max-height: 870px){:root{--label-font-size: 27px ;--data-header-font-size: 67.5px ;--received-data-font-size: 45px ;--button-font-size: 45px ;--header-font-size: 31.5px ;--normal-padding: var( --small-screen-padding )}.container-wrapper.animate{flex-direction:row;justify-content:center;align-items:center;margin-top:0}#receivedData div{min-width:320px}.content-container{margin-right:0;margin-top:00px;margin-left:0}.ui{padding:15px}.connected{margin:10px;padding:15px 35px}.cube-container{margin:0 230px 0 330px}}@media screen and (min-width: 1250px) and (max-width: 1300px) and (min-height: 780px) and (max-height: 820px){:root{--label-font-size: 27px ;--data-header-font-size: 67.5px ;--received-data-font-size: 45px ;--button-font-size: 45px ;--header-font-size: 31.5px ;--normal-padding: var( --small-screen-padding )}.container-wrapper.animate{flex-direction:row;justify-content:center;align-items:center;margin-top:0}#receivedData div{min-width:320px}.content-container{margin-right:0;margin-top:00px;margin-left:0}.ui{padding:15px}.connected{margin:10px;padding:15px 35px}.cube-container{margin:0 230px 0 330px}}@media screen and (min-width: 1000px) and (max-width: 1040px) and (min-height: 590px) and (max-height: 610px){:root{--label-font-size: 21px ;--data-header-font-size: 52.5px ;--received-data-font-size: 35px ;--button-font-size: 35px ;--header-font-size: 24.5px ;--normal-padding: var( --small-screen-padding )}.container-wrapper.animate{flex-direction:row;justify-content:center;align-items:center;margin-top:0}#receivedData div{min-width:220px}.content-container{margin-right:0;margin-top:00px;margin-left:0}.ui{padding:15px}.connected{margin:10px;padding:15px 35px}.cube-container{margin:0 70px 0 170px}}@media screen and (max-height: 500px){:root{--label-font-size: 12px ;--data-header-font-size: 30px ;--received-data-font-size: 20px ;--button-font-size: 20px ;--header-font-size: 14px ;--normal-padding: var( --small-screen-padding )}.content-container{font-size:.8rem}#receivedData div{min-width:156px}.container{max-width:160px}.content-container{max-width:260px}.cube-container{margin-left:100px;margin-right:100px}.container-wrapper.animate{margin-top:0}.ui{padding:5px}.connected{margin:5px;padding:15px 35px}}@media screen and (max-height: 350px){:root{--label-font-size: 12px ;--data-header-font-size: 30px ;--received-data-font-size: 20px ;--button-font-size: 20px ;--header-font-size: 14px ;--normal-padding: var( --small-screen-padding )}.content-container{font-size:.6rem}#receivedData div{min-width:140px;max-width:156px}.container{max-width:160px}.content-container{max-width:260px}.cube-container{margin-left:100px;margin-right:100px}.container-wrapper.animate{margin-top:0}.ui{padding:5px}.connected{margin:5px;padding:15px 35px}}@media screen and (max-width: 750px) and (max-height: 400px){.container-wrapper{flex-direction:row;justify-content:center;align-items:center}.container-wrapper.animate{margin-top:0}#receivedData div{min-width:130px}.content-container{margin-right:0;margin-top:00px;margin-left:00px}.ui{padding:5px}.connected{margin:5px;padding:15px 35px}.cube-container{margin:0 40px 0 80px}}