:root {
    --bg-dark: #131316;
    --text-main: rgb(234, 226, 226);
    --text-muted: rgb(202, 192, 192);
    --text-primary: #c70808;

    --track-line-color: rgba(255, 255, 255, 0.08);
    --bezetting-color: rgb(235, 217, 13);

    --dash-length: 50;
    --gap-length: 1200;
    --travel: -1117;
    --start: var(--dash-length);

}

body {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-main);
}

main {
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1ch;
}

.muted {
    color: var(--text-muted)
}

main>hr {
    width: 11rem;
}

/* Socials */
.socials {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.social:visited {
    color: inherit;

}

.social>svg,
img {
    width: 2rem;
    height: auto;
    opacity: 0.9;
    transition: linear 100ms;
}

.social:hover>svg,
img {
    opacity: 1;
    cursor: pointer;
}

.social-gh {
    /* https://brand.github.com/foundations/color */
    color: #F2F5F3 !important;

}

.social-forgejo {
    /*https://codeberg.org/forgejo/meta/src/branch/readme/branding/README.md#logo*/
    color: #FB923C !important;
}

.social-discord {
    /*https://discord.com/branding*/
    color: #5865F2 !important;
}

.social-mail {
    /*https://discord.com/branding*/
    color: #ffffff !important;
}


/* Trains */
.i-like-trains {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
    color: var(--track-line-color);
}

.bg-track {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bezetting {
    color: var(--bezetting-color);
    stroke-width: 2;

    stroke-dasharray: var(--dash-length) var(--gap-length);
    stroke-dashoffset: var(--start);
    opacity: 0;
    filter: drop-shadow(0 0 0.35rem #fb9b3c);
}

/*Wave 1*/
.train-1-top {
    animation: train-1-top 20s linear infinite;
}

.train-1-middle {
    animation: train-1-middle 20s linear infinite;
}

.train-1-bottom {
    animation: bezetting-bottom 20s linear infinite;
}

/*Wave 2*/
.train-2-top-slow {
    animation: train-2-top-slow 20s linear infinite;
}

.train-2-bottom-fast {
    animation: train-2-bottom-fast 20s linear infinite;
}

.train-2-bottom-slow {
    animation: train-2-bottom-slow 20s linear infinite;
}


@keyframes train-1-top {

    0%,
    7.14% {
        stroke-dashoffset: var(--start);
        opacity: 0;
    }

    7.141% {
        stroke-dashoffset: var(--start);
        opacity: 1;
    }

    35% {
        stroke-dashoffset: var(--travel);
        opacity: 1;
    }

    35.001%,
    100% {
        stroke-dashoffset: var(--travel);
        opacity: 0;
    }
}

@keyframes train-1-middle {

    0%,
    10% {
        stroke-dashoffset: var(--start);
        opacity: 0;
    }

    10.001% {
        stroke-dashoffset: var(--start);
        opacity: 1;
    }

    25% {
        stroke-dashoffset: var(--travel);
        opacity: 1;
    }

    25.001%,
    100% {
        stroke-dashoffset: var(--travel);
        opacity: 0;
    }
}

@keyframes bezetting-bottom {
    0% {
        stroke-dashoffset: var(--start);
        opacity: 1;
    }

    30% {
        stroke-dashoffset: var(--travel);
        opacity: 1;
    }

    30.001%,
    100% {
        stroke-dashoffset: var(--travel);
        opacity: 0;
    }
}


@keyframes train-2-bottom-fast {

    0%,
    50% {
        stroke-dashoffset: var(--start);
        opacity: 0;
    }

    50.001% {
        stroke-dashoffset: var(--start);
        opacity: 1;
    }

    65% {
        stroke-dashoffset: var(--travel);
        opacity: 1;
    }

    65.001%,
    100% {
        stroke-dashoffset: var(--travel);
        opacity: 0;
    }
}

@keyframes train-2-top-slow {

    0%,
    55% {
        stroke-dashoffset: var(--start);
        opacity: 0;
    }

    55.001% {
        stroke-dashoffset: var(--start);
        opacity: 1;
    }

    85% {
        stroke-dashoffset: var(--travel);
        opacity: 1;
    }

    85.001%,
    100% {
        stroke-dashoffset: var(--travel);
        opacity: 0;
    }
}

@keyframes train-2-bottom-slow {

    0%,
    60% {
        stroke-dashoffset: var(--start);
        opacity: 0;
    }

    60.001% {
        stroke-dashoffset: var(--start);
        opacity: 1;
    }

    90% {
        stroke-dashoffset: var(--travel);
        opacity: 1;
    }

    90.001%,
    100% {
        stroke-dashoffset: var(--travel);
        opacity: 0;
    }
}