@import "highlight.min.css";

#post-header {
    display: flex;
    justify-content: space-between;
}

#metadata {
    text-align: right;
    align-self: center;
    margin-bottom: 15px;
}

#title {
    align-self: center;
    margin-bottom: 15px;
}

#title-hr {
    margin-top: -10px;
}

#tags {
    display: flex;
    padding-top: 1em;
}

.tag {
    padding: 0 5px;
    margin-right: 10px;
    border: #8f062b solid 1px;
    border-radius: 10px;
    background-color: rgba(157, 18, 18, 0.1);
}

hr {
    margin-top: 25px;
    margin-bottom: 25px;
}

img {
    margin: auto;
    display: block;
}

pre > code {
    border: 2px solid #909898;
    border-radius: 10px;
    font-size: 1.2em;
}

:target {
    border-radius: 5px;
    animation: highlight 1750ms ease-out;
}

@keyframes highlight {
    25%, 60% {
        background-color: rgba(157, 18, 18, 0.2);
    }

    100% {
        background-color: #f3f3f3;
    }
}