@keyframes node-select {
    from {
        outline-offset: 0px;
    }

    to {
        outline       : 2px solid var(--grey-light);
        outline-offset: 10px;
    }
}

@keyframes node-select-revert {
    from {
        outline       : 2px solid var(--grey-light);
        outline-offset: 10px;
    }

    to {
        outline-offset: 0px;
    }
}

@keyframes description-select {
    from {
        outline-offset: 0px;
    }

    to {
        outline       : 2px solid var(--grey);
        outline-offset: 10px;
    }
}

@keyframes description-select-revert {
    from {
        outline       : 2px solid var(--grey);
        outline-offset: 10px;
    }

    to {
        outline-offset: 0px;
    }
}

section.graph {
    z-index   : 0;
    width     : 100vw;
    height    : 100vh;
    position  : absolute;
    transition: unset;
}

section.graph * {
    transition: unset;
}

section.graph:active {
    cursor: move;
}

section.graph article.node {
    z-index                  : 500;
    position                 : absolute;
    display                  : flex;
    cursor                   : grab;
    border-radius            : 100%;
    background-color         : var(--node-background);
}

section.graph article.node.animated {
    animation-duration       : 0.1s;
    animation-name           : node-select-revert;
    animation-fill-mode      : forwards;
}

section.graph article.node.animated:hover {
    animation-duration       : 0.1s;
    animation-name           : node-select;
    animation-fill-mode      : forwards;
}

section.graph article.node:active {
    cursor          : grabbing;
    background-color: var(--node-background-important);
}

section.graph article.node>h4.title {
    margin    : auto;
    text-align: center;
    cursor    : pointer;
}

section.graph article.node>div.description {
    z-index         : 1000;
    position        : absolute;
    text-align      : justify;
    text-align-last : center;
    border-radius   : 100%;
    overflow        : hidden;
    background-color: var(--node-background-completed);
}

/* section.graph article.node>div.description.animated {
    animation-duration       : 0.1s;
    animation-name           : description-select-revert;
    animation-fill-mode      : forwards;
}

section.graph article.node>div.description.animated:hover {
    animation-duration       : 0.1s;
    animation-name           : description-select;
    animation-fill-mode      : forwards;
} */

section.graph article.node * {
    transition: 0.1s ease-in;
}

section.graph article.node>div.description>span.wrapper {
    width       : 50%;
    height      : 100%;
    shape-margin: 15px;
}

section.graph article.node>div.description>span.left.wrapper {
    float        : left;
    shape-outside: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%, 68% 98%, 38% 90%, 10% 72%, 0% 50%, 10% 28%, 20% 20%, 100% 20%);
}

section.graph article.node>div.description>span.right.wrapper {
    float        : right;
    shape-outside: polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%, 0% 20%, 82% 20%, 90% 28%, 100% 50%, 90% 72%, 60% 90%, 32% 98%);
}

section.graph article.node>div.description>p {
    z-index   : 1500;
    position  : relative;
    margin    : 0;
    opacity   : 0;
    word-break: break-all;
    color     : var(--text-inverse);
}

section.graph article.node>div.description:hover>p {
    opacity: 1;
}

section.graph article.node>div.description>a.source {
    z-index    : 2000;
    top        : calc(20% - 1.3em + (1em - 1.3ex));
    left       : 0;
    position   : absolute;
    font-weight: bold;
    font-size  : 1.3em;
    opacity    : 0;
}

section.graph article.node.white>div.description>a.source {
    color: var(--text-inverse);
}

section.graph article.node.white>div.description>a.source:active {
    color: var(--text-inverse-active);
}

section.graph article.node.white>div.description>a.source:hover {
    color: var(--text-inverse-hover);
}

section.graph article.node.red>div.description>a.source {
    color: var(--text-red);
}

section.graph article.node.red>div.description>a.source:active {
    color: var(--text-red-active);
}

section.graph article.node.red>div.description>a.source:hover {
    color: var(--text-red-hover);
}

section.graph article.node>div.description>a.source.red:active {
    color: var(--text-red-active);
}

section.graph article.node>div.description:hover>a.source {
    opacity: 1;
}

section.graph article.node>div.description>a.source:visited ::after {
    content         : '';
    width           : 100%;
    height          : 100%;
    background-color: var(--node-background-completed);
}

section.graph article.node>div.description>img.cover {
    left          : 0;
    top           : 0;
    position      : absolute;
    width         : 100%;
    height        : 100%;
    object-fit    : cover;
    pointer-events: none;
    filter        : unset;
}

section.graph article.node>div.description:hover>img.cover {
    filter: blur(5px) brightness(0.5);
}

section.graph article.node>i.close {
    z-index   : -2000;
    top       : -10%;
    right     : -10%;
    position  : absolute;
    scale     : 0;
    opacity   : 0;
    cursor    : pointer;
    color     : var(--text);
    transition: 0.2s ease-out;
}

section.graph article.node>i.close:hover {
    scale     : 1.4 !important;
    color     : var(--text-hover);
    transition: 0.1s ease-in;
}

section.graph article.node>i.close:active {
    scale     : 1.2 !important;
    color     : var(--text-active);
    transition: unset;
}

section.graph svg.connection {
    z-index : -500;
    position: absolute;
    width   : 100%;
    height  : 100%;
}

section.graph svg.connection>line {
    stroke: var(--connection);
}