:root,
:root.light-mode {
    --log-title-color: #090909;
    --log-line-color: #c5c5c5;
    --log-dot-bg-color: #1070c9;
    --log-item-bg-color: #fefeff;
    --log-item-border-color: #d3d3d3;
    --log-item-shadow: #8abae7;
    --log-item-title-color: #0060b9;
    --log-text-color: #3f3f3f;
    --log-date-color: #0869ca;
    --log-date-bg-color: #eaf3fe;
    --log-item-focus-color: #000000;
}

:root.dark-mode {
    --log-title-color: #f2f2f2;
    --log-line-color: #5b5b5b;
    --log-dot-bg-color: #30a5fe;
    --log-item-bg-color: #202020;
    --log-item-border-color: #8e8e8e;
    --log-item-shadow: #4c565f;
    --log-item-title-color: #30a5fe;
    --log-text-color: #bababa;
    --log-date-color: #52a9ff;
    --log-date-bg-color: #2d3a4a;
    --log-item-focus-color: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root:not(.light-mode) {
        --log-title-color: #f2f2f2;
        --log-line-color: #5b5b5b;
        --log-dot-bg-color: #30a5fe;
        --log-item-bg-color: #202020;
        --log-item-border-color: #8e8e8e;
        --log-item-shadow: #4c565f;
        --log-item-title-color: #30a5fe;
        --log-text-color: #bababa;
        --log-date-color: #52a9ff;
        --log-date-bg-color: #2d3a4a;
        --log-item-focus-color: #ffffff;
    }
}

.main .timeline > h1 {
    display: block;
    text-align: center;
    margin: 16px 0;
    font-size: 28px;
    text-align: center;
    color: var(--log-title-color);
}

.main .timeline {
    position: relative;
    width: min(880px, calc(100% - 20px));
    margin: 8px auto 30px auto;
    padding: 0 10px;
}

.main .timeline > section {
    position: relative;
    padding: 0 0 28px 52px;
}

.main .timeline > section::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 4px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background-color: var(--log-dot-bg-color);
    border: 3px solid var(--log-item-bg-color);
    box-shadow: 0 0 0 2px var(--log-line-color);
}

.main .timeline > section::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 16px;
    bottom: 0;
    width: 3px;
    background-color: var(--log-line-color);
}

.main .timeline > section:last-child::after {
    height: 0;
}

.main .timeline > section:last-child {
    padding-bottom: 8px;
}

.main .timeline > section > div {
    background-color: var(--log-item-bg-color);
    border: 1px solid var(--log-item-border-color);
    box-shadow: 1px 1px 3px var(--log-item-shadow);
    border-radius: 8px;
    padding: 14px 18px;
}

.main .timeline > section > div:focus-visible {
    outline: 2px solid var(--log-item-focus-color);
    outline-offset: -2px;
}

.main .timeline > section time {
    display: inline-block;
    padding: 2px 10px;
    font-size: 15px;
    font-weight: bold;
    color: var(--log-date-color);
    background-color: var(--log-date-bg-color);
    border-radius: 4px;
}

.main .timeline > section h2 {
    margin: 10px 0 6px 0;
    font-size: 21px;
    color: var(--log-item-title-color);
}

.main .timeline > section p {
    margin: 6px 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--log-text-color);
}

.main .timeline > section ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--log-text-color);
}

@media all and (max-width: 700px) {
    .main .timeline {
        width: calc(100% - 12px);
        padding: 0 6px;
    }

    .main .timeline > section {
        padding-left: 44px;
    }

    .main .timeline > section > div {
        padding: 12px 14px;
    }
}

@media all and (max-width: 430px) {
    .main .timeline {
        display: none;
    }

    .main .timeline > h1 {
        margin: 12px 8px;
    }
}