#article-heading {
    display: flex;
    align-items: baseline;
    flex-flow: row;
    padding: 10px;
    border: 1px solid rgb(153 124 104);
    -webkit-box-shadow: inset 0px 1px #fffffe;
    box-shadow: inset 0px 1px #fffffe;
    background: -webkit-gradient(linear, left top, left bottom, from(antiquewhite), to(#e2d3bf));
    -webkit-box-reflect: below 4px linear-gradient(transparent 50%, rgba(0, 0, 0, 0.3));
    margin-bottom: 8px
}

#article-content { font-size: 13px }

.comment {
    display: flex;
    min-height: 47px;
    flex-direction: row;
    padding: 4px;
    width: inherit;
    #profile {
        display: flex;
        flex-direction: column;
        align-items: anchor-center;
        flex-wrap: wrap;
        img {
            width: 36px;
            object-fit: scale-down;
            border: 1px solid #00000070;
            box-shadow: 0 1px 4px rgb(0 0 0 / 56%) inset, 0 2px 0 rgba(255, 255, 255, 0.3), inset 0px 8px 6px -6px rgb(106 106 106 / 88%);
        }
    }
}

#username :not(input) {
    line-height: 0.4;
    padding: 5px 7px 5px 8px;
    word-break: auto-phrase;
    text-shadow: none;
}

#post {
    display: flex;
    flex-grow: 1;
    min-width: 0;
}

#avatar img {
    border: 1px solid #74583e;
    width: 37px;
    height: 30px;
    object-fit: cover;
    box-shadow: 0 1px 4px rgb(0 0 0 / 56%) inset, 0 2px 0 rgba(255, 255, 255, 0.3), inset 0px 8px 6px -6px rgb(106 106 106 / 88%);
}

#comment-section {
    padding: 10px;
    display: flex;
    flex-direction: column;
    background-color: #b09175;
    background-image: url("/images/textures/brick-wall-dark.png");
    min-height: 58px;
}

#comment-heading {
    display: flex;
    align-items: baseline;
    flex-flow: row;
    padding: 10px;
    border: 1px solid rgb(153 124 104);
    -webkit-box-shadow: inset 0px 1px wheat, 0px 0px 4px #caaa3f;
    box-shadow: inset 0px 1px wheat, 0px 0px 4px #caaa3f;
    background: -webkit-gradient(linear, left top, left bottom, from(#d58c2a), to(#d28151));
    -webkit-box-reflect: below 4px linear-gradient(transparent 50%, rgba(0, 0, 0, 0.3));
    margin-bottom: 4px;
}

#comment-box {
    background: linear-gradient(173deg, white, #e3ebec);
    display: flex;
    flex-grow: 1;
    border: 1px solid #778899;
    padding: 0px 5px 0px 5px;
    flex-direction: column;
    min-width: 0px;
    box-shadow: 1px 2px 4px #0000008c;
    transition: box-shadow 1.3s ease-in-out;
}

.glow {
    box-shadow: 0 0 16px 8px white !important;
    -webkit-box-shadow: 0 0 16px 8px white !important;
    -moz-box-shadow: 0 0 16px 8px white !important;
    transition: box-shadow 1.3s ease-in-out;
}

#comment-textbox { display: flex; word-break: break-all }
#textarea {
    border: 1px solid #74583e;
    box-shadow: 0 1px 4px rgb(0 0 0 / 56%) inset, 0 2px 0 rgba(255, 255, 255, 0.3), inset 0px 8px 6px -6px rgb(106 106 106 / 88%);
    display: flex;
    flex-grow: 1;
    margin-bottom: 6px;
    background-color: white;
    padding: 10px;
    flex-direction: column;
    border-radius: 0px 0px 5px 5px;
}

#bbcode-editor {
    border-bottom: 1px dotted #ccc;
    height: 18px;
    display: flex;
}

#typebox { 
    outline: none;
    font-size: small;
    color: dimgrey;
    padding-top: 3px;
    white-space: pre-wrap;
}

.buttons {
    display: flex;
    align-self: end;
    margin-bottom: 6px;
}

#avatar {
    width: 48px;
    justify-items: center;
}

.history {
    background-color: #c6ab90;
    border: 1px solid #978574;
    padding: 4px;
    margin: 2px;
}