.tilting-maze-game{--background-color:#ede6e3;--wall-color:#36382e;--joystick-color:#210124;--joystick-head-color:#f06449;--ball-color:#f06449;--end-color:#7d82b8;--text-color:#210124;background-color:var(--background-color);justify-content:center;align-items:center;width:100%;height:100%;margin:0;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex;overflow:hidden}.tilting-maze-game #center{justify-content:center;align-items:center;height:100%;display:flex}.tilting-maze-game #game{perspective:600px;grid-template-rows:1fr auto 1fr;grid-template-columns:auto 150px;gap:30px;display:grid}.tilting-maze-game #maze{grid-area:1/1/-1;justify-content:center;align-items:center;width:350px;height:315px;display:flex;position:relative}.tilting-maze-game #end{border:5px dashed var(--end-color);border-radius:50%;width:65px;height:65px}.tilting-maze-game #joystick{background-color:var(--joystick-color);border-radius:50%;grid-row:2;justify-content:center;align-items:center;width:50px;height:50px;margin:10px 50px;display:flex;position:relative}.tilting-maze-game #joystick-head{background-color:var(--joystick-head-color);cursor:grab;border-radius:50%;width:20px;height:20px;animation-name:tilting-maze-glow;animation-duration:.6s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;animation-delay:4s;position:relative}@keyframes tilting-maze-glow{0%{transform:scale(1)}to{transform:scale(1.2)}}.tilting-maze-game .joystick-arrow:first-of-type{border-left:10px solid #0000;border-right:10px solid #0000;border-bottom:10px solid var(--joystick-color);width:0;height:0;position:absolute;bottom:55px}.tilting-maze-game .joystick-arrow:nth-of-type(2){border-left:10px solid #0000;border-right:10px solid #0000;border-top:10px solid var(--joystick-color);width:0;height:0;position:absolute;top:55px}.tilting-maze-game .joystick-arrow:nth-of-type(3){border-top:10px solid #0000;border-bottom:10px solid #0000;border-left:10px solid var(--joystick-color);width:0;height:0;position:absolute;left:55px}.tilting-maze-game .joystick-arrow:nth-of-type(4){border-top:10px solid #0000;border-bottom:10px solid #0000;border-right:10px solid var(--joystick-color);width:0;height:0;position:absolute;right:55px}.tilting-maze-game #note{text-align:center;color:var(--text-color);grid-area:3/2;font-size:.8em;transition:opacity 2s}.tilting-maze-game #note a,.tilting-maze-game #note a:visited{color:inherit}.tilting-maze-game .ball{background-color:var(--ball-color);border-radius:50%;width:10px;height:10px;margin-top:-5px;margin-left:-5px;position:absolute}.tilting-maze-game .wall{background-color:var(--wall-color);transform-origin:top;margin-left:-5px;position:absolute}.tilting-maze-game .wall:before,.tilting-maze-game .wall:after{content:"";background-color:inherit;border-radius:50%;width:10px;height:10px;display:block;position:absolute}.tilting-maze-game .wall:before{top:-5px}.tilting-maze-game .wall:after{bottom:-5px}.tilting-maze-game .black-hole{background-color:#000;border-radius:50%;width:18px;height:18px;margin-top:-9px;margin-left:-9px;position:absolute}@media (max-width:600px){.tilting-maze-game #game{grid-template-rows:auto auto auto;grid-template-columns:1fr;gap:20px;padding:20px}.tilting-maze-game #maze{grid-area:1/1;transform:scale(.8)}.tilting-maze-game #joystick{grid-area:2/1;justify-self:center}.tilting-maze-game #note{grid-area:3/1}}