:root {
    --bg: #000000;
    --panel: #09090b;
    --panel-2: #0f0f12;
    --border: #22252a;
    --border-soft: #17191d;

    --text: #d4d4d8;
    --muted: #71717a;

    --green: #5eea7a;
    --green-dim: #2f8f45;
    --green-soft: #8cf3a0;
}

/* =========================
   BASE
========================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;

    background: var(--bg) !important;
    color: var(--text) !important;

    font-family: Arial, Helvetica, sans-serif;
}

body {
    background-image:
        linear-gradient(rgba(94,234,122,.025), rgba(0,0,0,0));
}

/* =========================
   LINKS
========================= */

a,
a:visited {
    color: var(--green-soft);
    text-decoration: none;
}

a:hover {
    color: var(--green);
    text-decoration: underline;
}

/* =========================
   BOARDLIST
========================= */

.boardlist {
    background: #050506 !important;
    border-bottom: 1px solid var(--border) !important;

    padding: 10px 14px;

    font-family: "Courier New", monospace;
}

.boardlist a {
    color: var(--green) !important;
}

/* =========================
   TITLES
========================= */

.board_title,
.boardtitle,
h1,
h2,
h3,
.subject,
.name {
    font-family: "Courier New", monospace !important;
}

.board_title,
.boardtitle,
h1,
h2,
h3,
.subject {
    color: var(--green) !important;
}

.name {
    color: var(--text) !important;
}

/* =========================
   ASCII LOGO
========================= */

.dc-home-header {
    text-align: center;
    margin: 20px auto 24px auto;
    padding: 10px 0;
}

.logo-wrapper {
    width: 100%;
    overflow-x: auto;
    text-align: center;
}

.darkchan-logo {
    display: inline-block;
    margin: 0 auto;

    color: var(--green) !important;

    font-family: "Courier New", monospace;
    font-size: clamp(5px, 0.72vw, 11px);
    line-height: 1.03;
    letter-spacing: -0.4px;

    white-space: pre;
    text-align: left;
}

.subtitle {
    color: var(--muted) !important;

    font-family: "Courier New", monospace;
    font-size: 13px;

    margin-top: 12px;
}

/* =========================
   POSTS
========================= */

.post.op {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.01),
            rgba(255,255,255,0)
        ),
        var(--panel) !important;

    border: 1px solid var(--border) !important;

    padding: 14px;
    margin: 14px 0;
}

.post.reply {
    background: #050506 !important;

    border: 1px solid var(--border-soft) !important;

    padding: 12px;

    margin: 10px 0 10px 20px;
}

.post_no,
.filesize,
.fileinfo,
.omitted,
.unimportant {
    color: var(--muted) !important;

    font-family: "Courier New", monospace;
}

.quote {
    color: #80d494 !important;
}

/* =========================
   POST FORM
========================= */

table.postform,
.postform,
form table {
    background: var(--panel-2) !important;

    border: 1px solid var(--border-soft) !important;

    color: var(--text) !important;
}

table.postform th,
.postform th,
form th {
    background: #09090b !important;

    color: var(--green) !important;

    border: 1px solid var(--border-soft) !important;

    font-family: "Courier New", monospace !important;
    font-weight: normal !important;

    text-align: left;

    padding: 8px 10px !important;
}

table.postform td,
.postform td,
form td {
    background: #09090b !important;

    border: 1px solid var(--border-soft) !important;

    padding: 8px 10px !important;
}

/* =========================
   INPUTS
========================= */

input[type="text"],
input[type="password"],
textarea,
select,
input[type="file"] {
    width: 100%;

    background: #040404 !important;
    color: var(--text) !important;

    border: 1px solid var(--border) !important;

    padding: 10px 11px;

    box-shadow: none !important;
    outline: none !important;

    background-image: none !important;

    -webkit-appearance: none !important;
    appearance: none !important;

    font: inherit;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    border-color: var(--green-dim) !important;

    box-shadow: none !important;
    outline: none !important;
}

/* =========================
   BUTTONS
========================= */

input[type="submit"],
input[type="button"],
input[type="reset"],
button,
input[type="file"]::file-selector-button {
    background: #030303 !important;
    color: var(--text) !important;

    border: 1px solid var(--border) !important;

    padding: 10px 12px;

    cursor: pointer;

    font-family: "Courier New", monospace !important;

    text-transform: uppercase !important;
    letter-spacing: .12em !important;

    box-shadow: none !important;
    background-image: none !important;

    -webkit-appearance: none !important;
    appearance: none !important;
}

input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
button:hover,
input[type="file"]::file-selector-button:hover {
    background: #050506 !important;

    color: var(--green) !important;

    border-color: var(--green-dim) !important;
}

/* =========================
   IMAGES
========================= */

img,
.thumb {
    border: 1px solid var(--border) !important;

    background:
        linear-gradient(
            135deg,
            #101114,
            #050506
        ) !important;
}

/* =========================
   MISC
========================= */

.pages {
    background: #050506 !important;

    border: 1px solid var(--border-soft) !important;

    padding: 8px 12px;

    margin: 12px auto;

    width: fit-content;

    font-family: "Courier New", monospace;
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
}

input[type="checkbox"] {
    accent-color: var(--green);
}

/* =========================
   MOBILE
========================= */

@media (max-width: 760px) {

    .post.reply {
        margin-left: 0;
    }

    .darkchan-logo {
        font-size: clamp(4px, 1.15vw, 8px);
    }

}
/* STAFF CAPTIONS */

.capcode {
	font-weight: bold;
	font-family: "Courier New", monospace;
}

/* ADMIN */

.capcode.admin {
	color: #ff5e8e !important;
	text-shadow: 0 0 6px rgba(255,94,142,.25);
}

/* MOD */

.capcode.mod {
	color: #5eea7a !important;
	text-shadow: 0 0 6px rgba(94,234,122,.18);
}

/* JANITOR */

.capcode.janitor {
	color: #8cf3a0 !important;
	text-shadow: 0 0 5px rgba(140,243,160,.12);
}