:root {
    --col-background: #0c0c0cd8;
}

html::before,
html::after,
body::before {
    filter: grayscale(1.0);
}

.timeline {
    --year-scale: 12rem;

    margin: 1rem 2rem;
    height: calc(var(--year-scale) * 30);

    border-left: 1px dashed var(--col-main-a075);
}

.timestamp,
.mark {
    --timestamp: 0;

    position: relative;
    top: calc(var(--timestamp) * var(--year-scale));

    line-height: 0;
}

.mark {
    --width: 0.75rem;
    --text: '';

    font-size: 0.8rem;

    &::before {
        content: '';

        position: absolute;
        left: calc(var(--width) / -2);

        width: var(--width);
        border: 1px solid var(--col-main-a075);
    }

    &::after {
        position: absolute;
        right: calc(var(--width) / 2 + 0.5rem + 100%);

        content: var(--text);
    }

    &.year {
        --width: 1.5rem;
    }

    &.year::after {
        font-weight: bold;
    }
}

.timestamp {
    &::before {
        --size: 0.5rem;

        content: '';
        z-index: 5;
        font-size: 0.8rem;
        
        position: absolute;
        width: var(--size);
        height: var(--size);
        left: calc(var(--size) / -2);
        top: calc(var(--size) / -2);

        background-color: var(--col-main);
        border: 1px solid var(--col-highlight-dark);
        border-radius: 50%;
    }
}

.timestamptext {
    position: absolute;
    left: 1rem;
    top: -0.5rem;

    font-size: 0.8rem;
    line-height: 1.0;
}