/* Fonts */

/* Keep @import rule at the top */
@import url('https://fonts.bunny.net/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Literata:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:lang(ko-Latn), :lang(zh-Latn), :lang(ja-jp-Latn), :lang(zh-yue-Latn) {font-family: inherit;}

:root {
	--sans-serif: "Noto Sans", system-ui, "Segoe UI", -apple-system, sans-serif;
	--serif: Literata, Georgia, FreeSerif, serif;
	--mono: "Courier Prime", Menlo, "Courier New", Courier, Caecilia, FreeMono, monospace;
}

/* Colors */

/* The Light color scheme is the default */
:root {
	color-scheme: light;
	--bgcolor: #FFFFF0;
	--fgcolor: black;
	--highlight-color: #E9AB17;
	--alt-bgcolor: #FEDEAD;
	--nav-bgcolor: beige;
	--nav-fgcolor: black;
	--nav-border-color: olive;
	--nav-highlight-color: darkkhaki;
	--private-highlight: pink;
	--members-highlight: yellow;
}

/* If a preference for a dark color scheme is set in the browser,
** and the user has not overridden this for this site. */
@media (prefers-color-scheme: dark) {
	:root:not(:has(#colorscheme [value="light"]:checked)) {
		color-scheme: dark;
		--bgcolor: #2B0F01;
		--fgcolor: #EEEEEE;
		--highlight-color: #381040;
		--alt-bgcolor: midnightblue;
		--nav-bgcolor: #202020;
		--nav-fgcolor: beige;
		--nav-border-color: #582060;
		--nav-highlight-color: #381060;
		--private-highlight: maroon;
		--members-highlight: darkslateblue;
		#message0 b {background-color: maroon !important;}
	}
}

/* In case the user's browser preference is for a light scheme, or the user
** has never bothered to set a color scheme for the browser, this applies
** the Dark scheme if the user has indicated that preference on the site. 
** This has to duplicate the code above and should be kept identical to it. */
:root:has(#colorscheme [value="dark"]:checked) {
	color-scheme: dark;
	--bgcolor: #2B0F01;
	--fgcolor: #EEEEEE;
	--highlight-color: #381040;
	--alt-bgcolor: midnightblue;
	--nav-bgcolor: #202020;
	--nav-fgcolor: beige;
	--nav-border-color: #582060;
	--nav-highlight-color: #381060;
	--private-highlight: maroon;
	--members-highlight: darkslateblue;
	#message0 b {background-color: maroon !important;}
}

BODY {
	background-color: var(--bgcolor) !important;
	color: var(--fgcolor);
}

/* This is for navigation menus whose color was hard-coded in the HTML */
TD:has(.menu) {background-color: var(--nav-bgcolor); color: var(--nav-fgcolor);}

/* Serif font for body text */
.serif, BODY, AREA, IMG, DIV.Comment, MAIN ARTICLE { font-family: var(--serif); font-variant-ligatures: none;}

/* Bold Sans-serif font for labels, captions, etc. */
 :is(#mainsubmit,
 #menubar
 #submitmove,
 #tribar,
 BUTTON,
 CAPTION,
 DETAILS SUMMARY,
 DIV#board FOOTER,
 DIV#board HEADER,
 DIV.commentgroup>HEADER,
 DIV.forms LEGEND,
DT, 
FIGCAPTION,
INPUT[type=submit],
 LABEL,
 NAV,
 TABLE.menu TR TD,
 TH,
.blackbox HEADER,
.tag,
.cat)
 {font-family: var(--sans-serif); font-weight: bold; line-height: 1.1em;}

/* Use Noto Sans for foreign characters, because it supports most or all of unicode. */

.sans, .sans-serif, :lang(ko), :lang(zh), :lang(ja), :lang(ja-jp) {font-family: var(--sans-serif);}
  
/* Monospace font for headings, text input, etc. */
.mono, .blackbox, INPUT[type=text], TEXTAREA, SELECT, .subtitle, DIV.forms FORM DFN, BUTTON, CODE, DIV.forms FORM>SPAN, KBD { font-family: var(--mono); }

/* Set the base font-size */

HTML {font-size: 12pt; 	line-height: 1.1em; }

DIV.Comment {line-height: 115%;}
H1, H2, H3, H4, H5, H6 {line-height: 1.1em; margin: 1em 0 0.5em 0; font-family: var(--sans-serif), sans-serif; clear: both; text-wrap: balance;}
ARTICLE>H1 {font-size: 2.25em; text-align: center; margin: 1em auto 0.5em auto;}
ARTICLE>H2, ARTICLE SECTION>H2 {font-size: 2em; border-bottom: 3px solid currentColor; padding-bottom: .3em; width: 100%}
ARTICLE>H3, ARTICLE SECTION>H3 {font-size: 1.8125em;}
ARTICLE>H4, ARTICLE SECTION>H4 {font-size: 1.625em; font-style: italic;}
ARTICLE>H5, ARTICLE SECTION>H5 {font-size: 1.3125em; weight: 500; }
ARTICLE>H6, ARTICLE SECTION>H6 {font-size: 1.125em; weight: 500; font-style: italic;}

DT {font-size: 1.25em;}
LI {line-height: 115%;}
BODY {
	background-color: var(--bgcolor);
	line-height: 1.1em;
	padding-left: 0.25in;
	padding-right: 0.25in;
	max-width: 100%;
	text-rendering: geometricPrecision;
}

/* Details */
DETAILS {border: black .5ex groove; padding-left: 1ex; background-color: var(--nav-bgcolor); margin: .5ex 0}
DETAILS SUMMARY {font-weight: bold; font-size: bigger; padding: .25em 0;}

/* Links */

.idiagram U,
A:link {
	color: blue;
	color: color-mix(in oklab, currentColor, blue);
}

A:visited {
	color: indigo;
	color: color-mix(in oklab, currentColor, indigo);
}

A.term {
	color: blue;
    color: color-mix(in oklab, blue, currentColor);
    text-decoration: none;
}

A:visited.term {
	color: blue;
    color: color-mix(in oklab, blue, currentColor);
    text-decoration: none;
}

A:link.download {
	font-family: var(--mono);
	font-weight: bold;
	text-decoration-thickness: 5px;
	padding: 3px;
}

A[href^="http://"]:not([href*="chessvariants.com"],[href*="chessvariants.org"]),
A[href^="https://"]:not([href*="chessvariants.com"],[href*="chessvariants.org"]),
A:link.extern {
    font-family: var(--mono), monospace;
	text-decoration-style: double;
}

A:link:hover, A:link:focus, A:visited:hover, A:visited:focus {
	color:green;
	color: color-mix(in oklab, currentColor, green);
}

/* Classes */

SPAN.author {
	font-style: italic;
}

SPAN.editor {
	font-style: italic;
}

SPAN.date {
	font-style: italic;
}

DIV.menu, .fineprint {
	font-family: var(--sans-serif), sans-serif;
	font-size: smaller;
}

DIV.Comment {border: 2px var(--nav-highlight-color) solid; background-color: var(--nav-bgcolor); padding: 1ex; clear: both; overflow-y: hidden; clear: both; column-count: 1; display: flow-root;}
DIV.Comment BLOCKQUOTE { border-left: var(--nav-border-color) solid thick; margin-left: 1em; padding-left: 1ex;}
DIV.Comment HEADER {display: flex; justify-content: space-between; background-color: var(--nav-bgcolor); margin: 0px; padding: 0 1em;}
DIV.Comment DIV {padding: 0 1em; margin: 0; background-color: var(--nav-bgcolor);}
DIV.Comment FOOTER {display: flex; justify-content: flex-end; background-color: var(--nav-bgcolor); margin: 0px; padding: 0 1em;}

DIV.comments {background-color: var(--nav-highlight-color); width: 100%; margin-bottom: 1em;}
DIV.piece FIGURE, FIGURE.piece {float: left; display: table-cell; margin-right: 1ex; text-align:center; border-width: 0px; vertical-align: top;}
DIV.piece FIGURE FIGCAPTION, FIGURE.piece FIGCAPTION {background-color: var(--nav-bgcolor); text-align:center; font-weight: bold; display: table-caption; caption-side: bottom; text-decoration: none; width:100%;}
DIV.piece P {display: table-cell; padding-top: 1em;}
DIV.piece {clear: both; float: none;}

DIV.container {display: inline-block; flex-flow: row wrap; max-width: 100%;}
DIV.container DIV.blackbox {flex-grow: 1;}

.fineprint {
	font-family: "Noto Sans", "arial", "helvetica", "sans-serif";
	font-size: smaller;
}

SPAN.navfolder {
	font-family: "Noto Sans", "arial", "helvetica", "sans-serif";
	font-size: smaller;
}

SPAN.navlink {
	font-family: "Noto Sans", "arial", "helvetica", "sans-serif";
	font-size: smaller;
}

SPAN.rateit {
	font-weight: bold;
	color: green;
}

SPAN.shortcomment {
        font-size: 80%;
}

SPAN.longcomment {
        font-size: 70%;
}

SPAN.fixedfont {
        font-family: "Courier Prime", "fixed";
}

SPAN.ratingtitle {
	font-size: larger;
}

SPAN.obsolete {
	text-decoration: line-through;
}

TABLE.legend {font-size: initial; line-height: initial; clear: right;}
TABLE.legend TR TD {vertical-align: top; padding: 0px; margin: 0px;}
TABLE.legend TR TD H4 {margin: 0px; padding: 0px;}
TABLE.legend TR TD UL LI {margin-left: -20px; padding-left: 0px;}

ASIDE.middle, MAIN {max-width: 100%; margin-left: auto; margin-right: auto;}
ASIDE.leftcol, ASIDE.rightcol {display: none;}
ASIDE.rightcol {font-size: initial; line-height: initial;}

.mobile { display: inline-block; }

.cat, .cat:link, .cat:visited, .tag, .tag:link, .tag:visited {background-color: var(--nav-bgcolor); border: thin var(--nav-border-color) solid; padding: 0 .5ex; font-weight: bold; text-decoration: none;}
.tag::before {content: '#'}
.deletetag {color: red; text-decoration: none;}

.okay {background-color: #303030; color: #B1FB17 !important; display: table;}
.okay::before {content: "\002713\00a0"; font-weight: bold; display: table-cell; width: 2rem;}

.error {background-color: #303030; color: #F62217 !important; display: table;}
.error::before {content: "\2297\00a0"; display: table-cell; width: 2rem;}

.warning {background-color: #303030; color: #FDFD17 !important; display: table;}
.warning::before {content: "\0026A0\00a0"; display: table-cell; width: 2rem;}

.alertbox {margin: 1em; padding: 1em;}
.alertbox::before {font-size: 2em;}

.notice {background-color: #303030; color: plum !important; display: table;}
.notice::before {content: "\1f4cc\00a0"; display: table-cell; width: 2rem;}

.point {background-color: #303030; color: beige; display: table;}
.point::before {content: "\261E"; font-size: 150%; display: table-cell; width: 2rem;}

.blackbox {background-color: #303030; color: beige; padding: 1ex; width: calc(100% - 2ex);}
.blackbox>HEADER {background-color: beige; color: black; font-weight: bold;}
.blackbox A:link, .okay A:link, .error A:link, .warning A:link, .notice A.link {color: #BDEDFF;}
.blackbox A:visited, .okay A:visited, .error A:visited, .warning A:visited, .notice A.link {color: #FFBDED;}
.blackbox BUTTON {color: blue; font-weight: bold;}
.blackbox P {margin: 0; padding: 0;}

/* Tags */

q {
  quotes: "“" "”" "‘" "’";
}
q:before {
    content: open-quote;
}
q:after {
    content: close-quote;
}

MAIN ARTICLE {float: none; overflow: visible; max-width: 100%; line-height: 130%;}
I, EM {font-family: inherit; font-style: italic;}
MAIN ARTICLE BLOCKQUOTE {line-height: 1.1em;}

FIGURE {float: left; border: 0px #FFFFF0 solid;}
FIGCAPTION {background-color: var(--nav-border-color); text-align:center; text-decoration:smallcaps; font-weight: bold; }

IMG {max-width: 98%; height:auto;}

BLOCKQUOTE { margin-left: 1em; padding-left: 1ex; line-height: 1.1em; font-size: 87.5%;}

/* Responsive by screen size or output type*/

@media screen {
	ASIDE {display: block-inline;}
}

@media screen and (min-width: 600px) {
	/* MAIN ARTICLE {font-size: 18px;} */
}
@media screen and (orientation: portrait) {
	BODY {max-width: 98vw; margin: 1vw; padding: 0;}
}	
@media screen and (orientation: landscape) and (min-width: 961px) {
	BODY {max-width: 98vw; margin: 0 1vw; padding: 0;}
	ASIDE.middle, MAIN, BODY>HEADER {margin: 0; padding: 0;}
	/* MAIN ARTICLE {font-size: 18px;} */
}
@media only screen and (orientation: landscape) and (min-width: 1241px) {
	ASIDE.middle, MAIN { max-width: 960px; max-width: calc(100% - 200px); margin-left: 1ex; margin-right: auto; overflow-x: auto; overflow-y: hidden;}
	ASIDE.rightcol { float:right; max-width:160px; text-align:right; display: inline-block; padding-top: 1ex;}
	.mobile { display: none; }
}
@media only screen and (orientation: landscape) and (min-width: 1331px) {
	ASIDE.middle, MAIN { max-width: 960px; max-width: calc(100% - 340px); margin-left: auto; margin-right: 1ex; overflow-x: auto; overflow-y: hidden;}
	ASIDE.leftcol { float:left; max-width: 300px; text-align:left; min-height:600px; height:600px; width: 300px; display: block; visibility: visible; padding-top: 1ex;}
	ASIDE.rightcol {display: none;}
}
@media only screen and (orientation: landscape) and (min-width: 1536px) {
	ASIDE.middle, MAIN { max-width: 960px; max-width: calc(100% - 600px); margin-left: 345px; margin-right: 330px; display:block; z-index:500000; overflow-y: hidden;}
	ASIDE.rightcol { float:right; max-width:300px; width: 300px; text-align:right; display: inline-block; padding-top: 1ex;}
}

.printer {display: hidden;}
@media print {
	.noprint {display: none;}
	.printer {display: block;}
	ASIDE, HEADER, FOOTER, NAV {display: none;}
	MAIN ARTICLE {width: 100%; font-size: 12pt;}
}

@viewport {
	width: device-width;
	zoom: 1;
}