@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@100..900&family=Noto+Serif+Bengali:wght@100..900&display=swap');

:root {
    --white:#F8F8FF;
    --black:black;
    --gray:lightgray;
    --red:#C0261D;
    --yellow:#E6AF2E;
    --green:#A4D65E;
    --lgreen:#D0E7D4;
    --dgreen:#4A7A2E;
    --wgreen:#F2F8F3;
    --blue:teal;

    --fg:var(--black);
    --bg:var(--lgreen);
    --border:var(--black);
    --thread-bg:white;
    --reply-bg:white;
    --quote:var(--green);
    --ref:var(--blue);
}

body {
    background-color: var(--bg);
    color: var(--fg);
    font-family: Helvetica, 'Noto Sans Bengali', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    margin: 0px;
}

h1 {
    background-color: var(--wgreen);
    box-shadow: inset 0 0 20px var(--green);
    max-width: 700px;
    margin: auto;
    border-radius: 5px;
}

#logo {
    text-decoration: none; 
    color: var(--red);
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    letter-spacing: 2px;
    font-family: 'Impact', Bold;
}

.quote {
    color: var(--quote);
}

.ref {
    color: var(--ref);
}

.img-comment {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    margin: auto;
}

#boards, #highlights, #announcements {
    margin: 5px auto;
    background-color: var(--wgreen);
    border: 1px solid var(--border);
    max-width: 980px;
}

#boards > h2,
#highlights > h2,
#announcements > h2 {
    text-align: center;
    background-color: var(--green);
    margin: 0;
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: auto;
}

.container > .column {
    flex: 1;
    margin: 0 10px;
    min-width: 250px;
}

.container > .column > ul {
    list-style-type: none;
    padding: 0;
}

.container > .column > ul > li {
    padding-bottom: 10px;
}

.container > .column > h3 {
    text-decoration: underline;
}

#new-thread-button {
    text-decoration: none;
}

#postFormContainer {
    display: none;
}

#postFormContainer > table {
    flex: 1;
    margin: 0 10px;
    min-width: 150px;
}

#postForm {
    margin: 10px;
    border-spacing: 1px;
    width: 468px;
}

#postForm > tbody > tr > td:first-child {
    border: 1px solid var(--border);
    border-radius: 2px;
    background-color: var(--green);
}

#style-format,
#link-format {
    border-collapse: collapse;
    padding: 5px;
    max-width: 450px;
}

#style-format > tbody > tr > td,
#link-format > tbody > tr > td {
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 5px;
    background: white;
}

#style-format > tbody > tr > td:first-child,
#link-format > tbody > tr > td:first-child {
    font-family: "Lucida Console", "Courier New", monospace;
}

#board-title {
    color: var(--red);
}

.thread-container {
    padding: 5px;
    max-width: 700px;
    margin: auto;
}

.thread {
    margin: 12px 7px;
}

.thread-body,
.reply-body {
    border: 1px solid var(--border);
    border-radius: 5px;
    background-color: var(--thread-bg);
    padding: 13px 20px;
    margin: 0;
}

.reply-body {
    background-color: var(--reply-bg);
}

.thread-body > a {
    display: block;
    color: inherit;
}

.thread-tagline,
.thread-headline,
.thread-comment,
.reply-tagline,
.reply-comment {
    margin: 3px;
}

.thread-headline {
    text-align: center;
}

.thread-comment,
.reply-comment {
    max-width: 90%;
    margin: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.thread-tagline,
.reply-tagline {
    color: #0E3D55;
    margin: 0;
    font-size: 0.8rem;
}

.thread-id,
.thread-utid,
.thread-time,
.reply-id,
.reply-utid,
.reply-time,
.thread-board {
    color: var(--fg);
}

.thread-utid,
.reply-utid {
    color: var(--red);
    font-weight: bold;
}

.thread-id,
.reply-id {
    color: var(--blue);
}

.thread-board > a {
    text-decoration: none;
}

#k-title {
    color: var(--red);
    padding: 0;
}

.thread-buttons {
    display: block;
    margin: 5px 0 0 0;
    padding: 0;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 0.8rem;
}

.thread-buttons > li {
    display: inline-block;
    padding: 0 10px 0 0;
}

.thread-buttons > li > a {
    display: block;
    text-decoration: none;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.yellow {
    color: var(--yellow);
}

.navbar {
    margin-bottom: 10px;
}

.navbar ul {
    list-style-type: none;
    padding: 0px;
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
}

.navbar li {
    /* flex: 1; */
}

.navbar a {
    text-decoration: none;
    padding: 5px;
    color: var(--dgreen);
}

#notice {
    max-width: 600px;
    margin: auto;
    padding: 0;
    border: 2px solid black;
    font-size: 0.9em;
}

#notice h3 {
    margin: 0;
    padding: 0;
    color: var(--black);
    background-color: var(--yellow);
    border-bottom: 2px solid black;
}

#notice-msg {
    margin: 0;
    padding: 0;
    background-color: var(--wgreen);
}

#notice-msg p {
    margin: 0;
}

#notice-msg a {
    color: var(--dgreen);
}