blockquote {
    border-left: 4px solid white;
    padding-left: 10px;
}

hr {
    color: white;
    margin: 20px;
}

#blog-post {
    padding: 10px;
}

#blog-content ul, #blog-content ol {
    padding-left: 50px;
}

#blog-content p, #blog-content ul, #blog-content ol {
    margin-bottom: 10px;
}

/* Blog Post */
#blog-block {
    height: 100%;
}

/* Blog Meta */
#blog-meta {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background-color: black;
}

.blog-meta-item {
    display: flex;
    flex-direction: row;
    color: gray;
    font-size: 0.8em;
}

.blog-meta-key {
    padding-right: 5px;
    margin-bottom: 5px;
}

.blog-meta-key:after {
    content: ': '
}

.blog-meta-value {
    padding-right: 5px;
}

/* Table of Contents */
.table-of-contents {
    width: 40%;
    max-height: 200px;
    overflow-y: scroll;
    background-color: black;
    float: right;
    padding: 10px;
    font-size: 1.2em;
    margin: 0 0 20px 20px;

    border: 2px solid #ffffff38;
    border-radius: 4px;
}

.table-of-contents > ul {
    padding: 0;

    li::before {
        content: '';
    }

    ul {
        padding-left: 50px;
    }

    li {
        padding: 5px 0 5px 0;
        list-style-type: decimal-leading-zero;
        overflow: hidden;
        list-style-position: inside;
        text-overflow: ellipsis;

        a {
            white-space: nowrap;
            max-width: 100%;
        }
    }

    a:hover {
        background-color: rgb(0, 47, 47);
        z-index: 10;
        white-space: normal;
    }
}

/* Hover Menu */
.hover-menu {
    position: absolute;
}

.hover-menu > .hover-content {
    display: block;
    border: 2px solid #ffffff38;
    border-radius: 4px;
    margin: 10px;
    transform-origin: top left;
    transform: scale(0, 0);
    transition: transform 0.5s ease-in-out;
}

.hover-menu:hover .hover-content {
    transform: scale(1, 1);
}

/*.hover-menu:hover .hover-content {
    animation-play-state: running;
    animation: hover-in 0.5s cubic-bezier(0.25,0.1,0.25,1) forwards;
}

.hover-menu:not(:hover) .hover-content {
    animation: hover-in 0.5s cubic-bezier(0.25,0.1,0.25,1) reverse forwards;
}

@keyframes hover-in {
    0% { transform: scale(0, 0); }
    50% { transform: scale(1, 0.1); }
    80% { transform: scale(1, 0.1); }
    100% { transform: scale(1, 1); }
}*/

.hover-menu::before {
    content: '';

    background-image: url('/images/eye.gif');
    background-size: contain;
    background-repeat: no-repeat;

    width: 32px;
    height: 32px;

    display: inline-block;
}