.controls-container{display:flex;flex-direction:column;align-items:center;width:260px;height:254px;gap:20px;position:relative}.controls-container .rotation-btn{display:flex;justify-content:space-between;width:100%;margin-bottom:20px}.controls-container .rotation-btn .rotate-btn{width:70px;height:30px;font-size:35px;display:flex;align-items:center;justify-content:center;background-color:#e15a1d;color:#fff;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s,transform .2s,box-shadow .1s;box-shadow:-3px 12px 29px -19px #00000091}.controls-container .rotation-btn .rotate-btn:active{transform:scale(.95);box-shadow:inset 0 0 5px #0000004d}.controls-container .direction-btns{display:grid;grid-template-areas:". up ." "left . right" ". down .";grid-gap:10px}.controls-container .direction-btns .direction-btn{width:50px;height:50px;font-size:24px;display:flex;align-items:center;justify-content:center;background-color:#e15a1d;color:#fff;border:none;border-radius:10px;cursor:pointer;transition:transform .1s,box-shadow .1s;box-shadow:-3px 12px 29px -19px #00000091}.controls-container .direction-btns .direction-btn:active{transform:scale(.95);box-shadow:inset 0 0 5px #0000004d}.controls-container .direction-btns .direction-btn.up-btn{grid-area:up}.controls-container .direction-btns .direction-btn.left-btn{grid-area:left}.controls-container .direction-btns .direction-btn.right-btn{grid-area:right}.controls-container .direction-btns .direction-btn.down-btn{grid-area:down}.gridbox-container{display:inline-block;margin-bottom:20px}.gridbox-container .row{display:flex}.gridbox-container .row .cell{width:50px;height:50px;border:1px solid black;display:flex;align-items:center;justify-content:center;position:relative}.robot{max-width:40px;max-height:40px;width:100%;height:100%;transform-origin:center;transition:transform .3s ease}.app-container{max-width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;background-image:url(https://bellroy-cms-images.imgix.net/1259/background-texture-repeat.jpg?auto=format&fit=max);padding:50px}@media (min-width: 500px){.app-container{width:500px}}.app-container .title{font-family:GTUltra,serif;color:#333;text-decoration:underline;text-align:center;margin-bottom:20px}.app-container .info{display:flex;align-items:center;justify-content:center;flex-direction:column}:root{background:#efeae5;height:100vh;width:100vw;display:flex;justify-content:center;align-items:center}*{margin:0;padding:0;box-sizing:border-box}