:root{--bg: #c5c5c5;--primary: ;--second: ;--accent: }body{margin:0;display:flex;justify-content:center;align-items:center;min-width:320px;min-height:100vh;background:var(--bg);font-family:Arial}#app{max-width:50rem;margin:0 auto;padding:2rem;text-align:center}info{font-size:1.5rem;width:100%;color:#fff;text-align:center;border-bottom:solid .3rem #38bdf8;padding:.5rem 0}@media (prefers-color-scheme: dark){:root{--bg: #000}}#score-board{position:relative;display:grid;place-items:center;left:calc(50% - 5rem);height:3rem;width:10rem;background:transparent;border:solid orange 2px;font-size:2rem;padding:.1rem;border-radius:.5rem;color:#fff}#thecube{position:relative;height:20rem;width:20rem;margin:5.5rem;background:#fff;display:flex;justify-content:center;align-items:center;z-index:1;color:red;transform:rotateX(55deg) rotate(45deg);perspective:1rem}#theplayer{position:absolute;height:20px;width:20px;background:#000}.player{animation:move .75s ease forwards}.portal{position:absolute;height:2rem;width:2rem;background:#000;opacity:.75}.portal:nth-of-type(2){background:red;bottom:0;left:0}.portal:nth-of-type(3){background:orange;top:0;left:0}.portal:nth-of-type(4){background:#00f;right:0;top:0}.portal:nth-of-type(5){background:green;bottom:0;right:0}@keyframes move{30%{transform:translate(var(--move-x),var(--move-y));opacity:0}50%{transform:translate(calc(-1 * var(--move-x)),calc(-1 * var(--move-y)));opacity:0}}@keyframes spin{50%{box-shadow:4rem 4rem}}