.App{text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.grid{display:grid;grid-template-rows:repeat(20,20px);grid-template-columns:repeat(20,20px);gap:2px;margin:20px auto;position:relative;border:5px solid black}.row{display:contents}.cell{width:20px;height:20px;border:1px solid #ccc;display:flex;align-items:center;justify-content:center}.city{background-color:red}.visited{background-color:green}.path{position:absolute;top:0;left:0;pointer-events:none}button{margin:20px;padding:10px 20px;font-size:16px;border-radius:15px;background-color:#faebd7;border:none}button:hover{background-color:bisque;transform:scale(1.05)}body{background-color:#242424}h1{color:#fff;font-size:3.2em;line-height:1.1}@media screen and (max-width : 450px){h1{font-size:2em}.App{width:143%}.city-inputs{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;width:100%!important;justify-content:space-around}button{margin:5px 5px 20px}}.city-inputs{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;width:60%;justify-content:space-around}.city-input{display:flex;align-items:center;margin-bottom:10px}.city-input label{margin-right:15px;color:#fff}.city-input input{border:1px solid grey;border-radius:5px;width:50px;margin-right:10px;background-color:#d1cece}