.main-grid-container{

    display: flex;

    flex-flow: row nowrap;

    justify-content: center;

    align-items: center;

}

.grid-container{

    display: inline-block;

}

.grid{

    display: flex;

    flex-flow: column nowrap;

    justify-content: center;

    align-items: center;

    background: var(--unexplored-path);

    border: 2px solid var(--grid-border);

    overflow: hidden;

}

.row{

    display: flex;

    flex-flow: row nowrap;

    height: 31px;

}

.row.odd{

    margin-left: 37px;

}

.cell{

    margin: 0 1px 0 0;

    width: 36px;

    height: 40px;

    overflow: visible;

    position: relative;

}

.cell::after{

    content: "";

    display: block;

    position: absolute;

    background-color: transparent;

    width: 40px;

    height: 40px;

    transition: background-color 0.15s linear;

    clip-path: polygon(20px 0, 38px 10px, 38px 30px, 20px 40px, 2px 30px, 2px 10px);;

    top: 0;

    left: 0;

}



.cell::before{

    content: "";

    display: block;

    position: absolute;

    background-color: rgba(255, 255, 255, 0.03);

    width: 40px;

    height: 40px;

    clip-path: polygon(20px 0, 38px 10px, 38px 30px, 20px 40px, 2px 30px, 2px 10px);;

    top: 0px;

    left: 0px;

}



/* Cell States */

.cell.start::after{

    background-color: var(--start);

}

.cell.end::after{

    background-color: var(--end);

}

.cell.null::after{

    background-color: transparent;

}

.cell.null::before{

    /*transform: scale(1.05);*/

}

.cell.open::after{

    background-color: var(--open-path);

}

.cell.closed::after{

    background-color: var(--closed-path);

}

.cell.path::after{

    background-color: var(--path);

}

.cell.wall::after{

    background: linear-gradient(var(--wall) 0px, var(--open-path) 1400px);

    background-attachment: fixed;

}

.cell.wall::before{

    background: linear-gradient(var(--wall) 0px, var(--open-path) 1400px);

    background-attachment: fixed;

}

.cell.animate{

    animation-name: cell-anim;

    animation-duration: 0.4s;

}



@keyframes cell-anim {

    0%{

        transform: scale(1.0);

        z-index: 2;

    }

    50%{

        transform: scale(1.25);

    }

    100%{

        transform: scale(1.0);

        z-index: 1;

    }

}