/* with love from ptchan */

:root {
    /* light theme colors */
    --bg: #f7f8fa;
    --bg-light: #fff;
    --bg-dark: #f3f4f6;
    --fg: #292d31;
    --fg-dark: #24292e;
    --fg-light: #6e7781;
    --selection: #d0d7de;
    --selection-dark: #cdd0d4;
    --blue: #0969da;
    --blue-light: #0072f3;
    --green: #2da44e;
    --orange: #e36209;
    --pink: #ff5fba;
    --red: #d73a49;
    --red-light: #da4a59;
    --yellow: #e3ca09;

    /* navbar and green btn colors, dark and light themes share these elements */
    --bg-navbar: #24292f;
    --fg-navbar: #fff;
    --fg-navbar-hover: #b1bac4;
    --bg-btn-primary: #2da44e;
    --bg-btn-primary-hover: #2c974b;
    --text-btn-primary: #fff;
    --border-btn-primary: rgba(27, 31, 36, 0.15);
    --shadow-btn-primary: 0 1px 0 rgba(27, 31, 36, 0.1);
    --shadow-inset-btn-primary: inset 0 1px 0 rgba(255, 255, 255, 0.03);

    /* main colors assignment */
    --darken: var(--bg-dark);
    --hr: var(--selection);
    --navbar-color: var(--bg-navbar);
    --background-top: var(--bg);
    --background-rest: var(--bg);
    --post-color: var(--bg-light);
    --post-outline-color: var(--selection);
    --highlighted-post-color: var(--bg-light);
    --highlighted-post-outline-color: var(--selection);
    --label-color: var(--bg-dark);
    --box-border-color: var(--selection);
    --alt-label-color: var(--bg);
    --alt-font-color: var(--fg);
    --accent-color: var(--selection);
    --input-color: var(--fg);
    --input-borders: var(--selection);
    --input-background: var(--bg-light);
    --board-title: var(--fg-dark);
    --title-color: var(--red-light);
    --font-color: var(--fg);
    --name-color: var(--blue);
    --subject-color: var(--fg-dark);
    --link-color: var(--fg-dark);
    --link-hover: var(--blue);
    --post-link-color: var(--fg-dark);
    --dice-color: var(--orange);
    --greentext-color: var(--green);
    --pinktext-color: var(--pink);
    --capcode-color: var(--red);
    --icon-color: saturate(100%) hue-rotate(2deg) brightness(95%) contrast(100%);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* dark theme colors */
        --bg: #010409;
        --bg-light: #0d1117;
        --bg-dark: #21262d;
        --fg: #ededf0;
        --fg-dark: #fff;
        --fg-light: #b1bac4;
        --selection: #30363d;
        --blue: #58a6ff;
        --blue-light: #79c0ff;
        --green: #56d364;
        --orange: #d29922;
        --pink: #d2a8ff;
        --red: #ff7b72;
        --red-light: #ffa198;
        --yellow: #e3b341;
    }
}

#action-menu,
#customflag,
#dragHandle,
#float,
#livetext,
#postform,
#threadstats,
#threadwatcher,
.bottom-reply,
.captcha,
.catalog-tile,
.close,
.collapse,
.modal,
.pages,
.post-container,
.stickynav,
input[type=submit] {
    border-radius: 6px !important
}

.file-thumb,
.post-file-src * {
    border-radius: 5px
}

#float {
    box-shadow: none !important
}

/* darker post-info */
.post-container.highlighted .post-info,
.post-container:target,
.post-info {
    background: var(--darken);
    margin: -6.5px -6.5px 5px -6.5px;
    border-bottom: 1px solid var(--post-outline-color);
    border-radius: 6px 6px 0 0
}

/* darker post-info */
@media screen and (min-width:900px) {
    .container {
        width: 78vw;
        margin: 0 auto
    }

    /* exceptions */
    .navbar,
    .main>.container {
        width: 100%
    }
}

a {
    font-style: italic
}

/* better highlight */
#float,
.anchor:target+.catalog-tile,
.anchor:target+.post-container,
.anchor:target+table,
.anchor:target+table tbody tr th,
.post-container.highlighted,
.post-container.hoverhighlighted {
    outline: 2px solid var(--blue-light)
}

input:focus,
select:focus,
textarea:focus {
    background: var(--highlighted-post-color);
    border: 2px solid var(--blue-light)
}

/* post menu fixes */
.postmenu {
    border: solid var(--font-color);
    border-width: 0 1px 1px 0;
    background: 0 0
}

.postmenu:hover {
    border: solid var(--link-hover);
    border-width: 0 1px 1px 0;
    background: 0 0
}

.postmenu:focus {
    border: solid var(--font-color);
    border-width: 0 1px 1px 0;
    background: 0 0
}

/* files box */
.filelabel {
    background: var(--highlighted-post-color);
    border: 2px dashed var(--blue-light)
}

/* big title */
.board-title {
    font-size: 55px
}

/* navbar */
.navbar {
    border: 0;
    box-shadow: none
}

.stickynav {
    background: var(--bg-navbar);
    border: 0;
    box-shadow: none
}

a.nav-item {
    color: var(--fg-navbar);

    font-weight: bold;
    /* overwrites italic from links */
    font-style: normal !important
}

a.nav-item:hover {
    color: var(--fg-navbar-hover) !important
}


/* primary buttons */
.bottom-reply.no-decoration,
.collapse.no-decoration,
.expand-omitted,
input[type=submit] {
    background: var(--bg-btn-primary);
    border-color: var(--border-btn-primary);
    color: var(--text-btn-primary);
    box-shadow: var(--shadow-btn-primary), var(--shadow-inset-btn-primary);
    transition: .2s cubic-bezier(.3, 0, .5, 1);
    transition-property: color, background-color, border-color;

    font-weight: bold;
    /* overwrites italic from links */
    font-style: normal !important
}

.bottom-reply.no-decoration:hover,
.collapse.no-decoration:hover,
.expand-omitted:hover,
input[type=submit]:hover {
    background: var(--bg-btn-primary-hover);
    /* overwrites blue from links hover */
    color: var(--text-btn-primary) !important
}

/* grey buttons */
#action-menu,
.close,
.pages,
.collapse {
    background: var(--bg-light);
    border-color: var(--selection);
    box-shadow: var(--shadow-btn-primary), var(--shadow-inset-btn-primary);
    transition: .2s cubic-bezier(.3, 0, .5, 1);
    transition-property: color, background-color, border-color;
}

#action-menu:hover,
.close:hover,
.pages:hover,
.collapse:hover {
    background: var(--bg-dark);
}

/* dimmed info display */
#livetext,
#threadstats {
    background: 0 0;
    border: none
}

#livetext,
#threadstats,
.board-description,
.cb,
.edited,
.footer,
.post-date,
.post-file-info,
.replies {
    color: var(--fg-light)
}

/* tables style */
table {
    border-collapse: separate;
    border-radius: 6px;
}

td {
    border-top: 1px solid var(--post-outline-color);
    border-left: 1px solid var(--post-outline-color);
}

td:first-child,
th:first-child {
    border-left: none;
}


/* table exceptions */
table.boardtable.w900 td:last-child {
    background-color: unset !important;
    text-shadow: unset;
    color: var(--font-color) !important;
}

#hotposts,
#hotposts td,
#hotposts tr {
    border: none;
    background: none;
}

/* forms (post form and threadwatcher) */
.modal,
#postform,
#threadwatcher {
    background-color: var(--bg-light);
    outline: 2px solid var(--blue-light);
}

.label {
    border-radius: 6px 0px 0px 6px !important;
}

input[type="text"],
input[type="password"],
select:not(.postmenu),
#message,
#postpassword,
.filelabel {
    border-radius: 0px 6px 6px 0px !important;
}

#postform-dragHandle,
#threadwatcher-dragHandle {
    margin-bottom: 4px;
    border-radius: 6px;
    background-color: var(--bg);
    padding: 5px;
}

#submitpost {
    margin-top: 6px;
}

.rlabel {
    border-radius: 0px 6px 6px 0px;
}