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