div#timeline {
    display: flex;
    flex-direction: column;
    overflow: auto;
}

div.eventContainer {
    margin-top: 5em;
    display: flex;
    align-items: center;
    overflow: auto;
    padding-bottom: 100px;
}

div.event {
    border: 2px solid var(--tile-border-color);
    padding: 1em;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    align-items: center;
    background: var(--tile-background-color);
    color: var(--event-color);
}

div.eventLine {
    border-bottom: 5px solid var(--button-color);
}

.eventLine.gap {
    border-bottom: 5px dashed var(--button-color);
}

.eventDate {
    font-size: 1.5em;
    margin-bottom: 0.5em;
    white-space: nowrap;
}

.eventName {
    font-style: italic;
    text-align: center;
}

.event.minor {
    background: var(--event-minor-background-color);
    font-size: 0.75em;
}

.event.death {
    background: var(--event-death-background-color);
    font-size: 0.75em;
}

.event.birth {
    background: var(--event-birth-background-color);
    font-size: 0.75em;
}