.node {
    width: 2.04vw;
    height: 3.55vh;
    outline: 2px solid #57534E;
    display: inline-block;
}

.start {
    background-color: #00BAFF;
    width: 2.04vw;
    height: 3.55vh;
    display: block;
}

.finish {
    background-color: #e62146;
    width: 2.04vw;
    height: 3.55vh;
    display: block;
}


.gridM {
    font-size: 0;
    outline: 3px solid #57534E;
    display: inline-block;
    margin: auto;
    width: 100%;
    top: 20%;
}


/*Animations
*/
.visited {
    animation-name: visitedAnimation;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

@keyframes visitedAnimation {
    0% {
        background-color: rgb(60, 0, 255);
        border-radius: 100%;
        transform: scale(0.3);
        outline: none;
    }

    30% {
        background-color: rgb(0, 171, 255);
        outline: none;
    }

    60% {
        border-radius: 80%;
        transform: scale(0.6);
        outline: none;
    }

    75% {
        outline: none;
    }

    80% {
        border-radius: 100%;
        transform: scale(1.2);
        background-color: rgb(0, 239, 255);
        outline: none;
    }

    100% {
        background-color: rgb(0, 222, 255);
        transform: scale(1);
        outline: none;
    }
}

.path {
    animation-name: shortestPath;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

@keyframes shortestPath {
    0% {
        transform: scale(0);
        background-color: #e621a8;
        outline: none;
    }

    70% {
        transform: scale(1.25);
        background-color: #e65f21;
    }

    100% {
        transform: scale(1);
        background-color: #e62146;
        outline: none;
    }
}