@import url("../ForkBB/style.v.1794548449.css");

/* Gange: your own CSS goes below this line */

/* Videos: wide ones fill the space, tall ones stay phone-sized (440px) on big screens */
#fork a.mediajslink + div:has(video) { max-width: 100% !important; }
#fork a.mediajslink + div > div:has(> video) { height: auto !important; padding-bottom: 0 !important; }
#fork video[id^="mediajs"],
#fork .f-bb-loop video {
  position: static !important;
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 782px !important;
}

/* Mobile menu: items on the left, not centred */
@media screen and (max-width: 49.9999rem) {
  #fork-nav .f-menu-items .f-menu-a {
    justify-content: flex-start;
  }
}

/* Footer: hide the "Powered by ForkBB" line */
#fork #id-fpoweredby {
  display: none;
}

/* Text: how all fonts are drawn */
html {
  text-rendering: auto;
  text-emphasis: inherit;
}

/* ===== Gange: all backgrounds white, all text black, all borders black ===== */
/* The same look whether a visitor's device is in light or dark mode. */
:root {
  /* backgrounds: white */
  --bg-fprimary: white;
  --bg-like-br1: white;
  --bg-btn-lo: white;
  --bg-fh1: white;
  --bg-post-h: white;
  --bg-post-s-h: white;
  --bg-post-b: white;
  --bg-post-u: white;
  --bg-fann: white;
  --bg-submenu: white;
  --bg-stats: white;
  --bg-active: white;
  --bg-btn: white;
  --bg-nav: white;
  --bg-like-nav: white;
  --bg-tsticky: white;
  --bg-faggr: white;
  --bg-tclosed: white;
  --bg-bbcode: white;
  --bg-reaction: white;
  --bg-legend: white;
  /* text and small marks: black */
  --c-fprimary: black;
  --c-fh1: black;
  --c-active: black;
  --c-light: black;
  --c-faggr: black;
  --c-faggr-pr: black;
  --c-btn-lo: black;
  --c-icon-sub: black;
  --c-icon-new: black;
  --c-tsticky: black;
  --c-tclosed: black;
  --c-tpoll: black;
  --c-tsolved: black;
  --c-req: black;
  --c-reaction: black;
  --c-post-cf-n: black;
  --c-hashtag: black;
  --bg-poll-res: black; /* the bar of a poll result, so it shows on white */
  /* lines, borders and rings: black */
  --br-fprimary: black;
  --br-fh1: black;
  --br-bbcode: black;
  --br-reaction: black;
  --c-focus-v: black;
  --c-highlighted: black;
  --c-reaction-sel: black;
  /* links and pointer-over colours: kept as in the light look, to be decided later */
  --c-a-and-btn: hsl(210, 100%, 40%);
  --c-a-focus: hsl(210, 100%, 30%);
  --bg-focus: hsl(210, 100%, 40%);
  --c-focus: hsl(220, 5%, 88%);
  --c-nav-focus: hsl(220, 5%, 88%);
  --c-sel: hsl(0, 0%, 100%);
  --bg-sel: hsl(0, 0%, 40%);
}

html,
body,
#fork {
  color: black;
  background-color: white;
}

/* message boxes (information, success, warning, error) */
#fork .f-info,
#fork .f-success,
#fork .f-warning,
#fork .f-error,
#fork .f-validation {
  color: black;
  background-color: white;
}

#fork .f-icontent > a,
#fork .f-scontent > a,
#fork .f-wcontent > a,
#fork .f-econtent > a,
#fork .f-vcontent > a {
  color: var(--c-a-and-btn);
  background-color: white;
}

/* other coloured marks and buttons */
#fork .f-fbtn[name="delete"]:not(.origin),
#fork .f-fbtn[name="report"]:not(.origin),
#fork .f-user-male .f-username::before,
#fork .f-user-female .f-username::before,
#fork .f-ftlist .f-fch:checked + .f-ficon::after,
#fork .f-post-checkbox:checked + .f-post-header::before,
#fork .f-field-confirmed #id-open-email::after,
#fork .f-field-unconfirmed #id-open-email::after {
  color: black;
}

#fork .f-btn.f-gotosolution {
  color: black;
  background-color: white;
}

/* a word found by search: white like the rest, marked by bold and underline */
#fork span.f-search-highlight {
  color: black;
  background-color: white;
  font-weight: bolder;
  text-decoration: underline;
}

/* text that was dimmed to grey: full black */
#fork .f-cmposted,
#fork .f-field-optional,
#fork .f-post-sign,
#fork summary::after,
#fork .f-latest-topics time.f-lt-date {
  opacity: 1;
}

/* the writing box (editor): toolbar, pop-up menus and upload buttons */
html #fork div.sceditor-group,
html #fork div.sceditor-dropdown,
html #fork div.sceditor-dropdown .button,
html #fork .postimages-button--forkbb,
html #fork .imgbb-button--forkbb {
  background: white;
}

html #fork .sceditor-container iframe,
html #fork .sceditor-container textarea,
html #fork div.sceditor-dropdown a,
html #fork div.sceditor-dropdown label,
html #fork div.sceditor-dropdown .button,
html #fork .sceditor-fontsize-option,
html #fork .sceditor-font-option,
html #fork .sceditor-hide-option,
html #fork .sceditor-format a {
  color: black;
}

/* lines and borders that take their colour from elsewhere: black */
#fork .f-btn,
#fork .f-btn.f-gotosolution,
#fork .f-menu-toggle::after,
#fork .f-tab-input:checked + .f-tab-label,
#fork-pm-menu .f-menu-a,
#fork-pm-menu .f-menu-item:first-child .f-menu-a,
#fork.f-with-nav #fork-nav .f-menu-items .f-menu-a,
#fork.f-with-nav #fork-nav .f-menu-user-items .f-menu-a,
html #fork-a-menu .f-menu-item:first-child .f-menu-a,
html .f-main-admin #fork-a-menu .f-menu-a,
#fork-usrlst .f-hc-tasc > a.active,
#fork-usrlst .f-hc-tdesc > a.active,
#fork .f-username,
#fork .f-user-online .f-username,
#fork .f-bb-hide,
#fork .f-bb-hide-visible,
#fork input.f-ctrl:user-invalid,
html #fork div.sceditor-group,
html #fork div.sceditor-dropdown,
html #fork div.sceditor-dropdown input,
html #fork div.sceditor-dropdown textarea,
html #fork div.sceditor-dropdown input:focus,
html #fork div.sceditor-dropdown textarea:focus,
html #fork div.sceditor-dropdown .button,
html #fork .sceditor-pastetext textarea,
html #fork .sceditor-more,
html #fork div.sceditor-dnd-cover,
html #fork .postimages-button--forkbb,
html #fork .imgbb-button--forkbb {
  border-color: black;
}

/* the ring around a box while you type in it: black */
#fork input:focus,
#fork select:focus,
#fork textarea:focus {
  box-shadow: 0 0 0 0.125rem black;
}
/* ===== end: all white, black text ===== */

/* ===== Gange: post text size ===== */
#fork .f-post-main {
  font-size: 13.6px;
  line-height: 1.38;
}
/* ===== end: post text size ===== */

/* ===== Gange: small text, same size as post text ===== */
#fork #id-fhtdesc,
#fork #fork-nav .f-menu-a,
#fork .f-crumbs,
#fork .f-latest-topics .f-lt-row,
#fork .f-latest-topics .f-lt-row .f-lt-date,
#fork .f-ftlist .f-cstats,
#fork .f-ftlist .f-clast,
#fork .f-ftlist .f-clast .f-cltime,
#fork .f-cmposter,
#fork .f-cmforum,
#fork .f-cmposted,
#fork .f-post-header,
#fork .f-post-user,
#fork #fork-stats,
#fork #fork-footer {
  font-size: 13.6px;
  line-height: 1.38;
}
/* ===== end: small text ===== */

/* ===== Gange: titles upright, not italic ===== */
#fork #id-fhth1,
#fork .f-category .f-finfo-h3,
#fork .f-fsub,
#fork #fork-h1 {
  font-style: normal;
}

/* the title at the top of a page: bold like the headings */
#fork #fork-h1 {
  font-weight: bold;
}
/* ===== end: titles upright ===== */

/* ===== Gange: side menus and phone drop-down menus, same size as post text ===== */
#fork .f-menu .f-menu-a {
  font-size: 13.6px;
  line-height: 1.38;
}
/* ===== end: menus ===== */

/* ===== Gange: phone view, topic rows on forum pages in two lines ===== */
@media screen and (max-width: 49.9999rem) {
  /* less space above and below each row */
  #fork-forum .f-ftlist .f-row {
    padding-top: 0.1875rem;
    padding-bottom: 0.1875rem;
    justify-content: flex-start;
  }

  #fork-forum .f-ftlist .f-row .f-cell {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
  }

  /* the "by name, start date" line under the title is not shown */
  #fork-forum .f-ftlist .f-row .f-finfo-p {
    display: none;
  }

  /* Replies and the blue last post link sit under the title */
  #fork-forum .f-ftlist .f-row .f-cstats {
    margin-inline-start: 2rem;
  }
}
/* ===== end: phone topic rows ===== */