/*
    CSS configuration file
    (R) 2022 Bahit & Bahit Ltd
    All rights reserved.
    
    -------------------------------
       Font files specifications
    -------------------------------
    
    Don't change:
      font-family property
      custom property names neither values in the :root selector
    
    Change:
      src value
*/
@font-face {
  font-display: swap;
  font-family: MonospaceFont;
  font-style: normal;
	font-weight: normal;
	src: url("../fonts/ShareTechMono-Regular.ttf");
}

@font-face {
  font-display: swap;
  font-family: TextFont;
  font-style: normal;
	font-weight: normal;
	src: url("../fonts/Lato-Regular.ttf");
}

@font-face {
  font-display: swap;
  font-family: ThemeFont;
  font-style: normal;
	font-weight: normal;
	src: url("../fonts/Flux-Regular.otf");
}

@font-face {
  font-display: swap;
  font-family: EmojiFont;
  font-style: normal;
  font-weight: normal;
	src: url("../fonts/NotoEmoji-Regular.ttf");
}

@font-face {
  font-display: swap;
  font-family: SymbolsFont;
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/WebSymbols-Regular.otf");
}


:root {
	--border-margin: 4vw;
	--index-width: 20rem;
	--margin: calc(var(--border-margin) + var(--index-width));

  /* Don't change custom property names neither values */
	--font-monospace: MonospaceFont;
	--font-text: TextFont;
	--font-theme: ThemeFont;
	--font-emoji: EmojiFont;
	--font-symbols: SymbolsFont;
}


body {
  --bg: #fff;
  --color: #222;
  --font: var(--font-text);
  --size: 16px;
}

body form {
  --color: #333;
  --font: var(--font-text);
  --size: 16px;
}

body form button[type="submit"] {
  --bg: #728f91;
  --color: #fff;
  --border: transparent;
}

body form button[type="submit"]:hover {
  --bg: #537476;
  --color: #fff;
  --border: transparent;
}

body form :is(input[type="text"], input[type="search"]) {
  --bg: #fff;
  --border: #ccc;
}

body form :is(input[type="text"], input[type="search"]):focus {
  --border: #ccc;
}

body form fieldset {
  --border: #ddd;
}

body > nav {
	--bg: #f7f9f8;
}

body > nav > nav[id='menu'] {
  --font: var(--font-theme);
  --size: 1.15rem;
}

body > nav > nav[id='menu'] > a {
  --border: #e1e3e2;
  --color: #325d60;
}

body > nav > nav[id='menu'] > a:hover {
	--bg: #fff;
	--color: #1f3b3d;
}

body > nav > section[id='mainindex'] {
	--bg: rgba(47, 47, 47, 0.9);
}

section[id='mainindex']::-webkit-scrollbar-track { 
	--bg: transparent; 
}

section[id='mainindex']::-webkit-scrollbar-thumb { 
	--bg: #ccc; 
}

body > nav > section[id='mainindex'] > h2 {
	--color: #fff;
	--font: var(--font-theme);
	--size: 1.5rem;
}

body > nav > section[id='mainindex'] > details {
	--border: #333;
	--size: 0.88rem;
}

body > nav > section[id='mainindex'] > details > summary {
	--bg: #2f2f2f;
	--color: #fff;
}

body > nav > section[id='mainindex'] > details > summary:hover {
	--bg: #222;
	--color: #fff;
}

body > nav > section[id='mainindex'] > details > a {
	--color: #fff;
}

body > nav > section[id='mainindex'] > details > a:hover {
	--bg: #222;
}

body > header {
  --bg: #f7f9f8;
  --color: #325d60;
  --font: var(--font-theme);
}

body > header h1 {
	--size: 3.5rem;
}

body > header h1 small {
	--size: 1.25rem;
}

body > main article a {
  --bg: #fff;
  --color: #205493;
}

body > main article a:hover {
  --color: #112e51;
}

body > main article blockquote {
  --bg: #f0f2f1;
  --border: #f60;
  --color: #325d60;
}

body > main article blockquote a {
  --bg: #f0f2f1;
}

body > main article a.button {
  --bg: #325d60;
  --border: transparent;
  --color: #fff;
  --font: var(--font-theme);
	--size: 1.15rem;
}

body > main article a.button:hover {
	--bg: #728f91;
	--color: #fff;
}

body > main article code {
  --font: var(--font-monospace);
  --color: navy;
}

body > main article del {
  --color: #999;
}

body > main > article details[id='cite'][open] {
  --bg: #f9f9f9;
	--border: #ddd;
	--color: #555;
	--size: 0.85rem;
}

body > main > article details[id='cite'] > summary {
	--color: #329196;
	--size: 0.8rem;
}

body > main > article details[id='cite'] > summary:hover {
	--color: #325d60;
}

body > main :is(article, section) :is(h1, h2, h3, h4, h5, h6) {
  --color: #333;
  --font: var(--font-theme);
}

body > main article h1 small:first-child {
  --bg: #37c8ab;
  --color: #fff;
  --font: var(--font-emoji);
  --size: 1.10rem;
}

body > main article h1 span,
body > main article h2 span,
body > main article h3 span {
	--bg: #f60;
	--color: #fff; 
	--size: 75%;
}

body > main article h2 span {
	--bg: #f90;
}

body > main article h3 span {
	--bg: #5fbcd3;
}

body > main article :is(h1, h2, h3, h4, h5, h6) > small {
  --color: #ccc;
}

body > main article h6 {
  --size: 110%;
}

body > main article h5 {
  --size: 120%;
}

body > main article h4 {
  --size: 130%;
}

body > main article h3 {
  --size: 140%;
}

body > main :is(article, section) h2 {
  --size: 150%;
}

body > main :is(article, section) h1 {
  --size: 160%;
}

body > main article > footer {
  --color: #666;
  --size: 0.85rem;
}

body > main article hr {
	--border: #b3cfc1; 
}

body > main article mark {
  --bg: #f90;
  --color: #fff;
}

body > main article pre {
  --bg: #f7f9f8;
  --color: #444;
	--font: var(--font-monospace), monospace;
	--size: 0.85rem;
}

body > main article table {
	--bg: #fff;
	--size: 0.75rem;
}

body > main article table > caption {
  --color: #666;
  --size: 0.85rem;
}

body > main article table thead {
	--bg: #f0f2f1;
	--color: #325d60;
}

body > main article table tbody {
	--bg: #fff;
}

body > main article table :is(td, th) {
	--border: #ccc;
}

body > main article s {
  --color: #999;
}

body > main article :is(samp, output) {
  --font: var(--font-monospace);
}

body > main > article var {
  --font: 'LMRoman10';
  --size: 18px;
}

body > main > aside[id='buying'] {
	--bg: #f7f9f8;
	--border: #216778;
}

body > main > aside[class='restricted'] {
	--bg: #f0f0f1;
	--border: #f60;
}

body > main > aside[id='buying'] > h1 {
	--color: #216778;
}

body > main > aside[class='restricted'] > h1 {
	--color: #325d60;
}

body > main > :is(aside[class='restricted'], aside[id='buying']) > h1 {
	--font: var(--font-theme);
	--size: 200%;
}

body > main > :is(aside[class='restricted'], aside[id='buying']) > p {
	--color: #444;
	--size: 110%;
}

body > main > aside[id='buying'] a {
	--bg: #216778;
	--color: #fff;
  --font: var(--font-theme);
	--size: 1.15rem;
}

body > main > aside[id='buying'] a:hover {
	--bg: #03989e;
}

body > main > aside[class='restricted'] div > a {
	--bg: #325d60;
	--color: #fff;
	--font: var(--font-theme);
	--size: 1.15rem;
}

body > main > aside[class='restricted'] div > a:hover {
	--bg: #728f91;
}

body > main figure > figcaption {
	--color: #666;
	--size: 0.75rem;
}

body > main > section[id='author'] > h1 > a {
  --bg: #fff;
  --color: #205493;
}

body > main > section[id='author'] > h1 > a:hover {
  --color: #112e51;
}

body > main > section[id='author'] figure > img {
	--bg: #fff;
	--border: #ccc;
}

body > main > section[id='learning'] > header > h1 {
  --font: var(--font-theme);
  --color: #333;
  --size: 150%;
}

body > main > section[id='learning'] button {
	--bg: #325d60;
	--font: var(--font-theme);
	--size: 1.15rem;
}


body > main > section[id='learning'] button > a {
	--color: #fff;
}

body > main > section[id='learning'] button:hover {
	--bg: #728f91;
}

body > main > section[id='learning'] details {
  --border: #f60;
}

body > main > section[id='learning'] details:not([open]):hover {
  --bg: #f0f2f1;
  --border: #999;
}

body > main > section[id='learning'] details li {
  --size: 0.875rem;
}

body > main > section[id="reading"] form legend {
  --color: #333;
  --font: var(--font-theme);
  --size: 150%;
}

body > main > section[id='shop'] > p > a {
  --bg: #fff;
  --color: #205493;
}

body > main > section[id='shop'] > p > a:hover {
  --color: #112e51;
}

body > main > section[id='shop'] > section:not(:last-child) {
  --bg: #f9f9f9;
  --border: #f60;
  --color: #333;
}

body > main > section[id='shop'] a.button {
	--bg: #325d60;
	--color: #fff;
  --font: var(--font-text);
	--size: 0.95rem;
}

body > main > section[id='shop'] a.button:hover {
	--bg: #728f91;
}

body > main > section[id='shop'] > section > div > h2 {
  --font: var(--font-theme);
  --color: #325d60;
  --size: 140%;
}

body > main > section[id='shop'] > section > div > p > span {
  --size: 160%;
}

body > footer {
  --bg: #111;
	--color: #fff;
	--size: 0.8rem;
}