*{
    padding: 0px;
    margin: 0px;
}
body{
    padding: 0px;
    margin: 0px;
    background-color: #0e2727;
}

table{
    border-collapse: collapse;
}

tr{
    padding: 0px;
    margin: 0px;
    width: 100%;
  
}
td{
    border: 0px solid #a9d8ff;
    background-color: antiquewhite;
    
}
.square{
    height: 25px;
    width: 25px;
}



.pathFindingArea{
    width: 100%;
    height: 90vh;
    
}

.pathFindingArea table{
    margin: auto;
    
}


*{
    --wall-col: #454949;
    --visited-col: #575fcf;
    --closed-col: #0fbcf9;
    --path-col: #f9ca24;
    --start-col: #1ce74f;
    --end-col: #ff602f;
  }

@keyframes pathAnimation {
    from {background-color: white;}
    to {background-color: var(--path-col)}
  }

@keyframes wallAnimation {
from {background-color: white;}
to {background-color: var(--wall-col);}
}

@keyframes startAnimation {
    from {background-color: antiquewhite;}
    to {background-color: var(--start-col);}
  }

@keyframes endAnimation {
    from {background-color: antiquewhite;}
    to {background-color: var(--end-col);}
  }

@keyframes visistedAnimation {
    from {background-color: white;}
    to {background-color: var(--visited-col);}
  }

  @keyframes scaleAnimation {
    from {transform:scale(1.3)}
    to {transform:scale(1)}
  }

@keyframes closedAnimation {
    from {background-color: var(--visisted-col);}
    to {background-color: var(--closed-col);}
  }


.wall{
    animation-name: wallAnimation;
    animation-duration: 0.2s;
    animation-name: scaleAnimation;
    animation-duration: 0.4s;
    background-color: var(--wall-col);
}

.visisted{
    animation-name: visistedAnimation;
    animation-duration: 0.2s;
    animation-name: scaleAnimation;
    animation-duration: 0.4s;
    background-color: var(--visited-col);
    
}

.closed{
    animation-name: visistedAnimation;
    animation-duration: 0.2s;
    background-color: var(--closed-col);
    animation-name: scaleAnimation;
    animation-duration: 0.4s;
    
}

.path{
    animation-name: pathAnimation;
    animation-duration: 0.2s;
    background-color: var(--path-col);
    animation-name: scaleAnimation;
    animation-duration: 0.5s;
}
.start{
    animation-name: startAnimation;
    animation-duration: 0.2s;
    animation-name: scaleAnimation;
    animation-duration: 0.5s;
    background-color: var(--start-col);
    
    
}

.end{
    animation-name: endAnimation;
    animation-duration: 0.2s;
    animation-name: scaleAnimation;
    animation-duration: 0.5s;
    background-color: var(--end-col);
}

a.button4{
    display:inline-block;
    padding:0.3em 1.2em;
    margin:0 0.1em 0.1em 0;
    border:0.16em solid rgba(255,255,255,0);
    border-radius:2em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
    font-weight:300;
    color:#FFFFFF;
    text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
    text-align:center;
    transition: all 0.2s;
    }
    a.button4:hover{
    border-color: rgba(255,255,255,1);
    }
    @media all and (max-width:30em){
    a.button4{
        display:block;
        margin:0.2em auto;
    }
    }

    .nav{
        margin: auto;;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 20px;
        margin-bottom: 20px;

    }
.nav ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

li{
    list-style-type: none;
    white-space: nowrap;
}

footer h6{
    margin: auto;
    text-align: center;
    color: white;
}



/* document.querySelector('.row[id="5"] .col[id="7"]').classList.remove("path") */