body { font-family: sans-serif }

:root {
    --alternating-colour-even: hsl(0,0%,96%);
    --alternating-colour-odd:  hsl(0,0%,91%);
}

.post { margin: 0px; }
.post:nth-child(even) { background-color: var(--alternating-colour-even) }
.post:nth-child(odd)  { background-color: var(--alternating-colour-odd) }
.post {
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
    width: 100%
}
.post:last-of-type { border-bottom: 1px solid black; }

.post-heading {
    color: hsl(0,0%,25%);
    font-size: smaller;
}
.post-heading-em { font-weight: bold; }
.post-content   * { margin-bottom: 8px; margin-top: 8px; }
.post-content > *:first-child { margin-top: 2px }
.post-content > *:last-child { margin-bottom: 0}
.post-content { padding: 4px }
.post-heading-a { margin-left: 0.2em }
.post-heading-b { float: right; margin-right: 0.5em }

.post-anchor-link { color: hsl(0,0%,25%); }

.un-col-1 { color: hsl(0, 100%, 30%) }
.un-col-2 { color: hsl(22.5, 100%, 30%) }
.un-col-3 { color: hsl(45.0, 100%, 30%) }
.un-col-4 { color: hsl(67.5, 100%, 30%) }
.un-col-5 { color: hsl(90.0, 100%, 30%) }
.un-col-6 { color: hsl(112.5, 100%, 30%) }
.un-col-7 { color: hsl(135.0, 100%, 30%) }
.un-col-8 { color: hsl(157.5, 100%, 30%) }
.un-col-9 { color: hsl(180.0, 100%, 30%) }
.un-col-10 { color: hsl(202.5, 100%, 30%) }
.un-col-11 { color: hsl(225.0, 100%, 30%) }
.un-col-12 { color: hsl(247.5, 100%, 30%) }
.un-col-13 { color: hsl(270.0, 100%, 30%) }
.un-col-14 { color: hsl(292.5, 100%, 30%) }
.un-col-15 { color: hsl(315.0, 100%, 30%) }
.un-col-16 { color: hsl(337.5, 100%, 30%) }

img { max-width: 100% }


nav { float: right; padding: 5px; margin: 2px; border: 1px solid black; display:flex; align-items: center; flex-wrap: wrap }
nav p { margin-left: 15px; margin-top: 0; margin-bottom: 0; margin-right: 10px; padding: 0 }
nav p:first-of-type { margin-left:0.5em }
nav a { color: blue; text-decoration: none }
nav .links { display: flex; }

/* todo: make the navbar less bad */
.flashmsg { border: 1px solid black; background-color: yellow; max-width: max-content; padding: 5px; clear: both;}

.threadlisting:nth-child(even) { background-color: var(--alternating-colour-even) }
.threadlisting:nth-child(odd) { background-color: var(--alternating-colour-odd) }



/* wide screens */
@media all and (min-width: 800px) {
    .threadlisting { display: contents }
    .threadlistings {
        display: grid;
        grid-template-columns: 2fr 0.8fr 1.2fr 1.2fr 0.8fr 0.4fr;
    }

    .threadlisting-part {
        border-left: 1px solid black;
        border-top: 1px solid black;
    }
    .threadlistings {
        border-right: 1px solid black;
        border-bottom: 1px solid black;
    }

}

/* small screens */
@media not all and (min-width: 800px) {
    .threadlisting {
        display: grid;
        grid-template-columns: repeat(5,1fr);
        margin-bottom: 5px;
    }
    .threadlisting-part-title {
        grid-column: 1 / -1;
    }
    .threadlisting-part {
        border-left: 1px solid black;
        border-top: 1px solid black;
    }
    .threadlisting {
        border-right: 1px solid black;
        border-bottom: 1px solid black;
    }
}


.threadlisting-part {
    background-color: inherit;
    display: table-cell;
    vertical-align: middle;
    padding: 3px;
    text-align: center;
}

.threadlisting-part-title {
    text-overflow: ellipsis;
    overflow: hidden;
}

.threadlisting-header { font-weight: bold }

.actionbutton::before {
    content: "[";
    color: grey;
}
.actionbutton::after {
    content: "]";
    color: grey;
}
.actionbutton { color:blue }

.new-post-box {
    height:20em;
    resize:vertical;
    width:100%;
    border:1px solid black;
    margin-top: 5px;
}

main {
    max-width: 60ch;
    margin: auto;
}

blockquote {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 3px solid grey;
}

.search-form {
    display: inline-block;
}