*{
    margin: 0;
    padding: 0;

    outline: none;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;

    color: #d7d7d7;
    fill: #d7d7d7;
}

:root {
    --panelFillColor: #272727;
    --panelStrokeColor: none;

    --pathWidth: 0.87px; /* triangle edge: sqrt(3)/2 = 0.86602540378 /  +0.01 */
    --pathGlowRadius: calc(var(--pathWidth) * 0.1);
    --pathColor: #ff007f; /* default */
    --pathColorLight: #ff3f9f; /* mix white 25% */
    --pathColorBright: #ff7fbf; /* mix white 50% */
    /* cant use this because chrome doesnt smoothly blend it in animations u-u
    --pathColorBright: color-mix(in srgb, var(--pathColor), #ffffff 50%); */
}

body {
    display: grid;

    width: 100vw;
    height: 100vh;
    
    background-color: #1f1f1f;
    overflow: hidden;
}

#panel {
    display: grid;
    height: 100%;
}

#panel svg {
    max-width: 100%;
    max-height: 100vh;
    margin: auto;
}

[id="panel"] svg * { /* [] lowers specificity so other stuff will overwrite this */
    fill: var(--panelFillColor);
    stroke: var(--panelStrokeColor);
}

#pathElement {
    fill: none;
    stroke: var(--pathColorLight);
    stroke-width: var(--pathWidth);
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 var(--pathGlowRadius) var(--pathColorLight));
}

#pathElement.endable {
    animation: endable 500ms infinite;
}

@keyframes endable {
    50% {
        stroke: var(--pathColorBright);
        filter: drop-shadow(0 0 var(--pathGlowRadius) var(--pathColorBright));
    }
}

#pathElement.completed {
    pointer-events: none;
    animation: completed 500ms forwards;
}

@keyframes completed {
    100% {
        stroke: var(--pathColor);
        filter: drop-shadow(0 0 var(--pathGlowRadius) var(--pathColor));
    }
}

#pathElement.storageCompleted {
    pointer-events: none;
    stroke: var(--pathColor);
    filter: drop-shadow(0 0 var(--pathGlowRadius) var(--pathColor));
}

#pathElement.canceled {
    pointer-events: none;
    animation: canceled 1500ms forwards;
}

@keyframes canceled {
    25% {
        opacity: 0.75;
        stroke: #0f0f0f;
        filter: none;
    }
    100% {
        opacity: 0;
        stroke: #0f0f0f;
        filter: none;
    }
}

#pathElement.failed {
    pointer-events: none;
    animation: failed 1500ms forwards;
}

@keyframes failed {
    25% {
        opacity: 0.75;
        stroke: #ff0000;
        filter: none;
    }
    100% {
        opacity: 0;
        stroke: #000000;
        filter: none;
    }
}