@font-face {
    font-family: 'Linux Libertime';
    src: url("LinLibertine_R.ttf") format('truetype');
}

body {
    font-family: sans-serif;
    font-size: 1rem;
}

h1, h2, h3 {
    font-family: 'Linux Libertime', serif;
}

a {
    color: black;
}

#paths {
    display: flex;
}

#startPaths, #destinationPaths {
    width: 100%;
}

#startPaths details,
#destinationPaths details {
    margin: 0.5rem 0;
}

#startPaths details.pending-path-group,
#destinationPaths details.pending-path-group {
    opacity: 0.45;
}

#startPaths details.revealing-path-group,
#destinationPaths details.revealing-path-group {
    animation: reveal-path-group 160ms ease-out both;
}

@keyframes reveal-path-group {
    from {
        opacity: 0.45;
        transform: translateY(-0.25rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #startPaths details.pending-path-group,
    #destinationPaths details.pending-path-group {
        opacity: 1;
    }

    #startPaths details.revealing-path-group,
    #destinationPaths details.revealing-path-group {
        animation: none;
    }
}

#startPaths summary,
#destinationPaths summary {
    cursor: pointer;
}

#destinationPaths details > summary {
    list-style: none;
}

#destinationPaths details > summary::-webkit-details-marker {
    display: none;
}

#destinationPaths details > summary::after {
    content: "\25B8";
    display: inline-block;
    margin-left: 0.4rem;
}

#destinationPaths details[open] > summary::after {
    content: "\25BE";
}


#destinationPaths {
    text-align: right;
}

#startPaths {
    border-right: black 1px solid;
}

#parameters {
    margin: auto;
    text-align: center;
    width: 60%;
}

#time {
    font-variant-numeric: tabular-nums;
}

#destinationPaths .indexing-paths {
    margin-left: 0;
    margin-right: 1.25rem;
}

.relevant-path-group > summary {
    font-weight: bold;
}

.indexing-paths {
    margin: 0.25rem 0 0 1.25rem;
}

.indexing-path {
    margin-top: 0.3rem;
}

.indexing-path.relevant-path a,
.indexing-path.relevant-path {
    font-weight: bold;
}