.node {
    width: 1.68vw;
    height: 1.68vw;
    background-color: #47b8e0;
    color: white;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visiting {
    background-color: #ff7473;
    font-size: 0.85vw;
}

.path {
    background-color: #34314c;
    box-shadow: inset 0 0 0 1px #aaa;
}

.bs {
    background-image: url(../img/bs.svg);
    background-color: #ffc952;
    box-shadow: inset 0 0 0 2px #333;
}

.node-visited {
    animation-name: visitedAnimation;
    animation-duration: 0.6s;
    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% {
        transform: scale(1);
        background-color: rgba(255, 146, 145, 0.8);
        border-radius: 0px;
    }

    25% {
        transform: scale(1.25);
        background-color: rgba(255, 131, 130, 0.8);
    }

    50% {
        transform: scale(1.5);
        background-color: rgba(255, 116, 115, 0.8);
        border-radius: 100%;
    }

    75% {
        transform: scale(1.25);
        background-color: rgba(255, 131, 130, 0.8);
    }

    100% {
        transform: scale(1);
        background-color: rgba(255, 146, 145, 0.8);
        border-radius: 0px;
    }
}

.handoff {
    background-image: url(../img/handoff3.svg);
    background-size: cover;
    filter: invert(50%) sepia(98%) saturate(2300%) hue-rotate(4deg) brightness(96%) contrast(101%);

    animation-name: handoffAnimation;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

@keyframes handoffAnimation {
    0% {
        transform: scale(1);
        border-radius: 0px;
    }

    25% {
        transform: scale(1.25);
    }

    50% {
        transform: scale(1.5);
        border-radius: 100%;
    }

    75% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
        border-radius: 0px;
    }
}