@charset "UTF-8";

/************************ Global **************************************/

:root {
  /* Global */
  --font-family-main: var(--font-family-sans-serif);
  --font-size-main: 12pt;
  --color-bg-main: #ffffff;
  --color-bg-main-gradient: #f0f0f0;
  --color-fg-main: #161616;
  --color-fg-link: #0065b3;
  --color-fg-link-hover: #2a6496;
  --color-lo-contrast-border: #e6e6e6;
  --color-hi-contrast-border: #c8c8c8;
  --color-border-button: #e3e3e3;
  /* Navigation/admin bar */
  --color-bg-boardlist: var(--color-bg-reply);
  --color-fg-boardlist: #cccccc;
  /* Board header */
  --color-fg-logo: var(--color-fg-main);
  --color-bg-theading: #b10e1c;
  --color-bg-theading2: #0078d4;
  --color-bg-theading3: #f7630c;
  --color-fg-theading: #ffffff;
  /* Post form */
  --color-bg-postblock: #f0f0f0;
  --color-fg-global-message: var(--color-fg-warning);
  /* Posts/replies */
  --color-bg-reply: #f4f4f4;
  --color-bg-reply-hl: #e5f1f9;
  --color-fg-title: #cc1105;
  --color-fg-name: #117743;
  --color-fg-warning: #e81123;
  --color-fg-warning-ip: #0000cc;
  --color-fg-omitted: #707070;
  /* Post formatting */
  --color-fg-quotelink: var(--color-fg-link);
  --color-fg-quotelink-hover: var(--color-fg-link-hover);
  --color-fg-quote: #666666;
  --color-fg-quote2: #ff69b4;
  --color-bg-spoiler: #000000;
  --color-bg-code: #ffffff;
  --color-fg-code: #000000;
  /* Administrator mode */
  --color-bg-postlists-header: #6080f6;
  --color-fg-postlists-header: #ffffff;
	--color-fg-postlists-header-link: #ffff00;
  --color-bg-postlists-odd: #d6d6f6;
  --color-bg-postlists-even: #f6f6f6;
  /* File board/flash board */
  --color-bg-flashboard-even: #f7efea;
  /* Windows */
  --color-bg-window-item-highlight: #f2f2f2;

  --font-size-small: 0.9375em;
  --font-size-x-small: 0.8125em;
  --font-size-xx-small: 0.75em;
}

body {
  font-weight: 400;
  text-rendering: optimizelegibility;
  line-height: 1.6;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

hr {
	border-color: var(--color-lo-contrast-border);
  margin: 1em 8px;
}

hr:not([size]) {
	border-top: none;
	height: 1px;
}

.threadSeparator {
  margin: 1em 8px;
}

button,
input,
textarea,
select {
  padding: 0.25em;
  font-size: 0.9375em;
}

.persistnav .boardlist {
  border-color: var(--color-6-contrast-border);
  box-shadow: 0 4px 16px 0 rgba(0,0,0,.15);
}

.window {
  border-color: var(--color-hi-contrast-border);
  border-radius: 0.5em;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);
}

.winbar {
  padding: 2px;
}

.winctrl button {
  margin: 0;
  font-size: 1.25em;
}

#banner,
.fullbannerIframe {
  border: none;
  border-radius: 0.5em;
}

.theading,
.theading2,
.theading3 {
  border-radius: 0.25em;
  font-weight: 600;
}

#postformTable th,
#postformTable td {
  padding: 0.25em;
}

button,
input[type="submit"] {
  cursor: pointer;
  background-color: #0067b8;
  color: #ffffff;
  border: none;
  border-radius: 0.2em;
  margin: 0 0.5em;
  padding: 0.5em;
  font-family: var(--font-family-main);
  font-weight: 600;
  transition: all .2s ease-in-out;
}

button:hover,
input[type="submit"]:hover {
  background-color: #005da6;
  color: #ffffff;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,.2);
}

button:active,
input[type="submit"]:active {
  background-color: #005293;
  box-shadow: none;
  transform: scale(.98);  
}

#emojiContainer {
  max-width: 350px;
}

.emoteButton,
.emojiButton,
.kaomojiButton {
  background-color: #e7e7e7;
  color: var(--color-fg-main);
  border-radius: 0.2em;
  font-weight: normal;
  padding: 4px;
}

.kaomojiButton {
  padding: 6px;
}

#usercounter {
  padding: 0 0.25em;
  border-radius: 0.25em;
}

.doubledash {
  color: transparent;
}

.reply {
  border-radius: 0.5em;
  padding: 6px;
}

.reply-container {
  margin: 1em 0;
}

.postimg {
  border-radius: 0.5em;
}


.reply,
.postimg,
.expandimg,
#catalogTable .thumb,
#pager,
.previewBox {
  box-shadow: 0 2px 8px 0 rgba(0,0,0,.15);
}

.previewBox .reply {
  box-shadow: none;
}

#pager,
#pager th,
#pager td {
  border: none;
}

#pager {
  background-color: var(--color-bg-postblock);
  border: 1px solid var(--color-hi-contrast-border);
  border-radius: 0.25em;
}

.persistpager #pager {
  box-shadow: 0 4px 16px 0 rgba(0,0,0,.15);
}

#pager th,
#pager td {
  padding: 4px 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Global */
    color-scheme: dark;
    --color-bg-main: #1a1a1a;
    --color-bg-main-gradient: #f0f0f0;
    --color-fg-main: #e6e6e6;
    --color-fg-link: #75b6e7;
    --color-fg-link-hover: #278cda;
    --color-lo-contrast-border: #404040;
    --color-hi-contrast-border: #505050;
    --color-border-button: #e3e3e3;
    /* Navigation/admin bar */
    --color-bg-boardlist: var(--color-bg-reply);
    --color-fg-boardlist: #cccccc;
    /* Board header */
    --color-fg-logo: var(--color-fg-main);
    --color-bg-theading: #b10e1c;
    --color-bg-theading2: #0078d4;
    --color-bg-theading3: #f7630c;
    --color-fg-theading: #ffffff;
    /* Post form */
    --color-bg-postblock: #292929;
    --color-fg-global-message: var(--color-fg-warning);
    /* Posts/replies */
    --color-bg-reply: #292929;
    --color-bg-reply-hl: #091f2c;
    --color-fg-title: #d59dff;
    --color-fg-name: var(--color-fg-main);
    --color-fg-warning: #e81123;
    --color-fg-warning-ip: #0000cc;
    --color-fg-omitted: #707070;
    /* Post formatting */
    --color-fg-quotelink: var(--color-fg-link);
    --color-fg-quotelink-hover: var(--color-fg-link-hover);
    --color-fg-quote: #999999;
    --color-fg-quote2: #ff69b4;
    --color-bg-spoiler: #000000;
    --color-bg-code: #000000;
    --color-fg-code: #b8b8b8;
    /* Administrator mode */
    --color-bg-postlists-header: #6080f6;
    --color-fg-postlists-header: #ffffff;
    --color-fg-postlists-header-link: #ffff00;
    --color-bg-postlists-odd: #d6d6f6;
    --color-bg-postlists-even: #f6f6f6;
    /* File board/flash board */
    --color-bg-flashboard-even: #292929;
    /* Windows */
    --color-bg-window-item-highlight: #292929;
    /* Fonts */
    --font-weight-bold: 600;
  }

  .emoteButton,
  .emojiButton,
  .kaomojiButton {
    background-color: #404040;
  }
}