1body{
  2    gap:20px;
  3}
  4
  5#maze {
  6    margin-top: 20px;
  7    border: 1px solid white;
  8    position: relative;
  9    width: 300px;
 10    height: 300px;
 11    grid-template-columns: repeat(15,1fr);
 12    grid-template-rows: repeat(15,1fr);
 13    display: grid;
 14    background-color: black;
 15}
 16.cell {
 17    width: 20px;
 18    height: 20px;
 19    border: 1px solid white;
 20}
 21
 22.final::before{
 23    content: "👑";
 24    font-size: 13px;
 25    text-align: center;
 26    position: relative;
 27    top: -3px;
 28}
 29
 30.current-gen{
 31    background-color: var(--gold);
 32}
 33
 34.current{
 35    color: var(--gold);
 36}
 37.current::before{
 38    content: "♟";
 39    font-size: 18px;
 40    position: relative;
 41    top: -3px;
 42  
 43}
 44
 45.won::before{
 46    content: "🎉";
 47    font-size: 13px;
 48    text-align: center;
 49    position: relative;
 50    top: -3px;
 51}
 52
 53#tooltip{
 54    color: var(--gold);
 55}
 56
 57.controls {
 58    position: relative;
 59    width: 110px;
 60    height: 70px;
 61    margin-top:30px;
 62    visibility: hidden;
 63}
 64    
 65.controls button {
 66    color : white;
 67    text-decoration: none;
 68    border: 3px solid white;
 69    border-radius: 5px;
 70    box-shadow: -2px 2px;
 71    flex-grow: 1;
 72    font-family: monospace;
 73    background: black;
 74    font-size: 14px;
 75    position: absolute;
 76    width: 30px;
 77    height: 30px;
 78    display: flex;
 79    justify-content: center;
 80    align-items: center;
 81    cursor: pointer;
 82}
 83
 84.left {
 85    left: 0;
 86}
 87
 88.right {
 89    right: 0;
 90    transform: scale(-1, -1);
 91    box-shadow: 2px -2px !important;
 92}
 93
 94.top, .bottom {
 95    left: 50%;
 96    transform: translateX(-50%);
 97}
 98
 99.bottom, .left, .right {
100    bottom: 0px;
101}
102
103.lit{
104    background: 3px solid var(--gold) !important;
105    color: var(--gold) !important;
106    border: 3px solid var(--gold) !important;
107}