@font-face{font-family:Orbitron;font-style:normal;font-weight:800;src:url(https://fonts.gstatic.com/s/orbitron/v35/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nymymBoWgz.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--purple: #a63bf3;--dark: #25075c;--teal: #24c4ee;--red: #f71584;--pink: #fd88fc;--blue: #45ccd8}*{box-sizing:border-box}body{margin:0;font-size:16px;font-family:Orbitron,sans-serif}.bot,.top{display:grid;place-items:center;height:100vh;width:100%;position:absolute}.bot{background-color:var(--pink);padding-left:100px;--s: min(10vw, 10vh);.scale{position:relative;width:calc(7 * var(--s));height:calc(7 * var(--s));display:grid;place-items:center}.board{position:relative;display:grid;place-items:center;width:calc(7 * var(--s));height:calc(7 * var(--s));perspective:1200px;perspective-origin:center}.cube{position:absolute;transform-style:preserve-3d;width:calc(100% - 10px);height:calc(100% - 10px);transform-origin:calc(var(--s) * 3.5) calc(var(--s) * 3.5) calc(var(--s) * -3.5)}.side{width:100%;height:100%;transform-style:preserve-3d;position:absolute;background-image:linear-gradient(var(--pink) 1px,transparent 1px),linear-gradient(to right,var(--pink) 1px,var(--dark) 1px);background-position:0 0;background-size:calc(100% / 7) calc(100% / 7);display:grid;grid-template:repeat(7,1fr) / repeat(7,1fr);.chess-piece{position:relative;width:var(--s);height:var(--s);background-image:var(--chess-piece);background-size:calc(6 * var(--s)) var(--s)}&.pawn{transform:translatez(0);.chess-piece{background-position-x:calc(var(--s) * 0);grid-area:2 / 2}.target{grid-area:2 / 2}}&.knight{transform-origin:bottom center;transform:translateY(-100%) rotatex(90deg);.chess-piece{background-position-x:calc(var(--s) * -2);grid-area:4 / 4}.target{grid-area:4 / 4}}&.rook{transform-origin:left center;transform:translate(100%) rotatey(90deg);.chess-piece{background-position-x:calc(var(--s) * -1);grid-area:4 / 4}.target{grid-area:4 / 4}}&.bishop{transform:translatez(calc(-7 * var(--s) + 10px)) rotatey(-180deg);.chess-piece{background-position-x:calc(var(--s) * -3);grid-area:4 / 4}.target{grid-area:4 / 4}}&.queen{transform-origin:right center;transform:translate(-100%) rotatey(-90deg);.chess-piece{background-position-x:calc(var(--s) * -4);grid-area:4 / 4}.target{grid-area:4 / 4}}&.king{transform-origin:top center;transform:translatey(100%) rotatex(-90deg);.chess-piece{background-position-x:calc(var(--s) * -5);grid-area:4 / 4}.target{grid-area:4 / 4}}}}.top{background-color:var(--dark);max-width:100%;--s: 200px;h1{text-align:center;color:var(--red);font-size:3rem;font-weight:600;grid-area:1 / span 3}.grid{display:grid;grid-template:150px repeat(2,var(--s)) / repeat(3,var(--s))}}.piece{position:relative;cursor:pointer;overflow:hidden;border:1px solid var(--purple);font-size:2rem;background-image:var(--chess-piece);background-size:calc(6 * var(--s)) var(--s);background-repeat:no-repeat;transition:background .3s ease-in-out;&:after{content:attr(data-piece);text-transform:uppercase;position:absolute;color:var(--blue);text-align:center;font-weight:800;width:100%;transform:translateY(-100%);transition:transform .3s ease-out}&.pawn{background-position:0 0}&.knight{background-position:calc(var(--s) * -2) 0}&.rook{background-position:calc(var(--s) * -1) 0}&.bishop{background-position:calc(var(--s) * -3) 0}&.queen{background-position:calc(var(--s) * -4) 0}&.king{background-position:calc(var(--s) * -5) 0}&:hover,&.selected{background-color:var(--purple);background-position-y:20px;&:after{transform:translateY(10px)}}}.top.side{--s: 80px;max-width:calc(var(--s) + 20px);.grid{grid-template:50px repeat(6,var(--s)) / var(--s);gap:10px}.piece{font-size:1rem;transition-duration:0s}h1{grid-area:1 / 1;font-size:1.25rem}}.target{position:relative;width:100%;height:100%;background:var(--purple);opacity:.35}:root{--gradient: linear-gradient(to bottom, #00f, transparent)}body{--sb-track-color: #000;--sb-thumb-color: var(--gradient);--sb-size: .7vmax}*,*:after,*:before{box-sizing:border-box;margin:0;padding:0;font-family:sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue}a,button,img{-webkit-tap-highlight-color:transparent;user-select:none}button{background-color:transparent;border:none;outline:none}body{min-height:100vh;height:max-content;width:100%;flex-direction:column}body::-webkit-scrollbar{width:var(--sb-size)}body::-webkit-scrollbar-track{background:var(--sb-track-color)}body::-webkit-scrollbar-thumb{background:var(--sb-thumb-color)}@supports not selector(::-webkit-scrollbar){body{scrollbar-color:var(--sb-thumb-color) var(--sb-track-color)}}