.writeup_content {
    margin: 0 auto;
}
@media (max-width: 871px) {
    .writeup_content {
        padding-top: 5%;
    }
}

.writeup_notes {
    margin: 0.4em 0 0 0;
    display: inline-block;
}
.writeup_notes_list {
    margin: 5px 0 0 0;
}

/* anchors */

.content a {
    color: #70b8ff;
    outline: none;
}
.content a:hover {
    color: #70d7ff;
}

.anchor_wrapper {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2em 0 2em 0;
}
/*.anchor_wrapper:after {
    content: '¶';
    opacity: 0;
}
.anchor_wrapper:hover:after {
    opacity: 1;
}*/

a.writeup_anchor {
    color: #fff;
    font-size: 2em;
    text-align: center;
    display: inline-block;
    border-bottom: 1px solid;
}
a.writeup_anchor:target {
    border-color: #83e9d6;
}
a.writeup_anchor:hover {
    color: #fff;
}

h2.writeup_title {
    margin-top: 0.4em;
}

/* dates */

.writeup_content p.dates {
    text-align: center;
}
span.creation_date,
span.modified_date {
    font-size: 0.8em;
    font-style: italic;
}

/* timeline */

@keyframes timelinebounce {
    0%  { top: 10px; }
    30% { top: 0px; }
    90% { top: 20px; }
    91% { top: 15px; }
    92% { top: 10px; }
    93% { top: 5px; }
    94% { top: 12px; }
    95% { top: 6px; }
    96% { top: 11px; }
    97% { top: 5px; }
    98% { top: 11px; }
    99% { top: 9px; }
    100% { top: 10px; }
}

#timeline_wrapper {
    display: block;
}
#timeline_list {
    list-style: none;
    padding-left: 1px;
}
#timeline_list > li {
    margin-bottom: 20px;
    border-bottom: 1px solid #fff;
}
#timeline_list .timeline_date {
    font-style: italic;
}
#timeline_list .timeline_time {
    display: inline-block;
}
#timeline_list .timeline_time::before {
    content: '@';
}
@media (min-width: 678px) {
    #timeline_list > li {
        overflow: hidden;
        margin: 0;
        position: relative;
        border: none;
    }
    #timeline_list .timeline_date {
        width: 110px;
        float: left;
        margin-top: 6px;
    }
    #timeline_list .timeline_time::before {
        content: '';
    }
    #timeline_list .timeline_content {
        width: 75%;
        float: left;
        border-left: 4px #e5e5d1 solid;
        padding-left: 30px;
    }
    #timeline_list .timeline_content:hover::before {
        border: 1px solid #b1fff7;
        left: 6.59em;
        animation: timelinebounce 1s ease;
        animation-iteration-count: 1;
        animation-delay: 0s;
        transform-origin: center top;
    }
    #timeline_list .timeline_content:target {
        background: rgba(111, 167, 194, 0.2);
    }
    #timeline_list .timeline_content:target::before {
        width: 15px;
        height: 15px;
        left: 6.53em;
    }
    #timeline_list .timeline_content p {
        margin: 0.1em 0 1em 0;
    }
    #timeline_list .timeline_content h3 {
        margin: 0.1em 0 0.1em 0;
    }
    #timeline_list .timeline_content::before {
        content: '';
        width: 12px;
        height: 12px;
        background: #6397bd;
        position: absolute;
        left: 6.599em;
        top: 9px;
        border-radius: 100%;
    }
    #timeline_list li .timeline_content.response {
        padding-left: 45px;
    }
    #timeline_list li.response > .timeline_content::before {
        background: #63bd6a;
    }
}