/* Theme Solarized by Ethan Schoonover (reference: https://ethanschoonover.com/solarized/) */
html {
   --background-color: #fdf6e3;
   --light1-background-color: #eee8d5;
   --color: #657b83;
   --light-color: #586e75;
   --dark-color: #93a1a1;
   --dark-background-color: #fbeecb;
   --light2-background-color: #ddd6c1;
   --box-shadow-color: #afafaf;
   --light1-border-color: #c9b67a;
   --textlike-border-color: #aab8bd;
   
   --yellow: #b58900;
   --orange: #cb4b16;
   --red: #dc322f;
   --magenta: #d33682;
   --violet: #6c71c4;
   --blue: #268bd2;
   --cyan: #2aa198;
   --green: #859900;
   
   --chinese-gold: #ca9703;
   --american-gold: #d5ad36;
   --champagne: #f4f2c9;
   --cyan-blue-azure: #4488bf;
   --cyan-cobalt-blue: #265999;
   
   --header-height: 92px;
   --footer-height: 87px;
}

/* Fonts Source Serif 4 by Adobe (reference: https://adobe-fonts.github.io/source-serif/) */
@font-face{
   font-family: 'Source Serif';
   font-weight: 400;
   font-display: swap;
   font-style: normal;
   font-stretch: normal;
   src: url('./fonts/SourceSerif4-Regular.ttf.woff2') format('woff2'),
      url('./fonts/SourceSerif4-Regular.otf.woff') format('woff'),
      url('./fonts/SourceSerif4-Regular.otf') format('opentype'),
      url('./fonts/SourceSerif4-Regular.ttf') format('truetype');
}

@font-face{
   font-family: 'Source Serif';
   font-weight: 400;
   font-display: swap;
   font-style: italic;
   font-stretch: normal;
   src: url('./fonts/SourceSerif4-It.ttf.woff2') format('woff2'),
      url('./fonts/SourceSerif4-It.otf.woff') format('woff'),
      url('./fonts/SourceSerif4-It.otf') format('opentype'),
      url('./fonts/SourceSerif4-It.ttf') format('truetype');
}

@font-face{
   font-family: 'Source Serif';
   font-weight: 700;
   font-display: swap;
   font-style: normal;
   font-stretch: normal;
   src: url('./fonts/SourceSerif4-Bold.ttf.woff2') format('woff2'),
      url('./fonts/SourceSerif4-Bold.otf.woff') format('woff'),
      url('./fonts/SourceSerif4-Bold.otf') format('opentype'),
      url('./fonts/SourceSerif4-Bold.ttf') format('truetype');
}

@font-face{
    font-family: 'Source Code Pro';
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    src: url('./fonts/SourceCodePro-Regular.ttf.woff2') format('woff2'),
         url('./fonts/SourceCodePro-Regular.otf.woff') format('woff'),
         url('./fonts/SourceCodePro-Regular.otf') format('opentype'),
         url('./fonts/SourceCodePro-Regular.ttf') format('truetype');
}

@font-face{
    font-family: 'Source Code Pro';
    font-weight: 400;
    font-style: italic;
    font-stretch: normal;
    src: url('./fonts/SourceCodePro-It.ttf.woff2') format('woff2'),
         url('./fonts/SourceCodePro-It.otf.woff') format('woff'),
         url('./fonts/SourceCodePro-It.otf') format('opentype'),
         url('./fonts/SourceCodePro-It.ttf') format('truetype');
}

@font-face{
    font-family: 'Source Code Pro';
    font-weight: 700;
    font-style: normal;
    font-stretch: normal;
    src: url('./fonts/SourceCodePro-Bold.ttf.woff2') format('woff2'),
         url('./fonts/SourceCodePro-Bold.otf.woff') format('woff'),
         url('./fonts/SourceCodePro-Bold.otf') format('opentype'),
         url('./fonts/SourceCodePro-Bold.ttf') format('truetype');
}

/*** GENERAL ***/

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

html {
   margin: 0;
   padding: 0;
}

body {
   margin: 0;
   padding: 0;
   background-color: var(--background-color);
   color: var(--color);
   font-family: 'Source Serif';
   font-kerning: normal;
   font-variant-ligatures: common-ligatures;
   font-optical-sizing: auto;
   font-weight: 400;
   font-size: calc(15px + 0.390625vw); /* Responsive font size by Matthew James Taylor (reference: https://matthewjamestaylor.com/responsive-font-size) */
}

code {
   font-family: 'Source Code Pro';
}

b {
   font-weight: 700;
}

a {
   color: var(--blue);
   text-decoration: none;
   transition: opacity ease-in 300ms;
}

a:hover {
   opacity: 0.8;
}

a.external::before {
   font-family: 'Font Awesome 6 Free';
   content: '\f08e';
   font-weight: 900;
   margin-right: 5px;
   font-size: 0.85rem;
}

.mt1 {
   margin-top: 1em;
}

.mb1 {
   margin-bottom: 1em;
}

.thumbs-up {
   color: var(--green);
}

.thumbs-up::before {
   font-family: 'Font Awesome 6 Free';
   content: '\f164';
   margin-right: 5px;
}

p.small, span.small {
   font-size: calc(12px + 0.390625vw); /* Responsive font size by Matthew James Taylor (reference: https://matthewjamestaylor.com/responsive-font-size) */
}

.right-align {
   text-align: right;
}

/*** LAYOUT ***/

.header, .footer {
   width: 100%;
   padding: 1rem;
   background-color: var(--background-color);
   z-index: 2;
}

@media (min-width:768px) {
   .header, .footer {
      position: fixed;
   }
   
   .footer span.shortcut {
      position: absolute;
      left: calc(1rem + 15%);
      bottom: 0;
   }
   
   .footer a.credits {
      position: absolute;
      right: calc(1rem + 15%);
      bottom: 1rem;
   }
}

.header {
   top: 0;
   height: var(--header-height);
}

.footer {
   bottom: 0;
   height: var(--footer-height);
}

#main-container {
   margin: var(--header-height) 0 0 0;
}

#sidebar {
   float: left;
   width: calc(100% / 3);
   will-change: height;
}

#inner-sidebar {
   transform: translateY(0);
   will-change: position, transform;
}

.main-content {
   margin: 0 0 0 calc(100% / 3);
   width: calc(100% / 3 * 2);
   padding: 10px 10px 50vh;
}

/*** HEADER ***/

.header, .header .logo {
   display: flex;
   flex-direction: row;
   align-items: center;
}

.header .logo h1 {
   margin: 0 0 0 15px;
   color: var(--american-gold);
   font-variant-caps: small-caps;
   font-variant-ligatures: no-common-ligatures;
   font-size: 2rem;
}

.header .menu {
   position: absolute;
   right: 30px;
   margin: 0;
   padding: 0;
}

/*** SHORT/FULL TEXT ***/

.header .menu #shortText, .header .menu #fullText {
   user-select: none;
   padding: 5px;
   border-radius: 10px;
   font-weight: 700;
}

html[data-loaded="true"] .header .menu #shortText, html[data-loaded="true"] .header .menu #fullText {
   transition: opacity ease-in 300ms;
}

.header .menu #shortText:hover, .header .menu #fullText:hover {
   cursor: pointer;
   opacity: 1;
}

html[data-textlength="short"] #shortText, html[data-textlength="full"] #fullText {
   background: linear-gradient(135deg,  #f4f2c9 0%,#efcf3e 100%);
   color: var(--blue);
   opacity: 1;
}

html[data-textlength="short"] #fullText, html[data-textlength="full"] #shortText {
   opacity: 0.5;
}

html[data-textlength="short"] .fullText, html[data-textlength="full"] .shortText {
   display: none;
}

/*** LEFT SIDEBAR ***/

#inner-sidebar > ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

#inner-sidebar > ul > li {
   background: var(--light1-background-color);
   margin: 10px;
   padding: 5px 20px;
}

#sidebar p.title {
   font-variant-caps: small-caps;
   font-variant-ligatures: no-common-ligatures;
}

#sidebar p.details {
   font-size: 0.85rem;
}

#sidebar ul.links {
   list-style: none;
   margin: 0 0 1em 0;
   padding: 0;
}

#sidebar ul.links li {
   display: inline-block;
   margin: 3px 0;
   padding: 5px;
   text-align: center;
}

#sidebar ul.links a {
   font-size: 1.2rem;
   padding: 5px;
   transition: none;
   user-select: none;
}

#sidebar ul.links li:not(.selected) a:hover {
   border-bottom: 1px solid var(--light1-border-color);
}

#sidebar ul.links li.selected a {
   background: linear-gradient(135deg,  #f4f2c9 0%,#efcf3e 100%);
   color: var(--blue);
   opacity: 1;
   border-radius: 10px;
   cursor: default;
   pointer-events: none;
}

/*** MAIN ***/

.main-content h2 {
   margin: 1.6em 0 0.83em;
   font-weight: 700;
   font-variant-caps: small-caps;
   font-variant-ligatures: no-common-ligatures;
}

.main-content h2:first-child {
   margin-top: 0;
}

.main-content .tip {
   color: var(--chinese-gold);
}

.main-content details {
   margin: 1em 0;
   position: relative;
}

.main-content details summary, .main-content h3 {
   font-variant-caps: small-caps;
   font-variant-ligatures: no-common-ligatures;
   font-weight: 700;
   user-select: none;
   padding: 5px;
   position: sticky;
   top: var(--header-height);
   background-color: var(--background-color);
   z-index: 1;
}

.main-content h3 {
   margin-top: 2em;
}

.main-content details summary:hover {
   cursor: pointer;
   background: var(--light1-background-color);
}

.main-content details summary:focus-visible {
   outline: none;
}

.main-content code {
   padding: 0 2px;
   background: var(--light1-background-color);
}

/*** FOOTER ***/

.footer {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.footer hr {
   margin: 10px 0;
   width: 70%;
   border-top: 1px solid var(--light1-border-color);
}

.footer span.shortcut {
   font-size: 16px;
   padding: 10px 0;
   text-align: center;
}

.footer .social-links {
   list-style: none;
   margin: 0;
   padding: 0;
}

.footer .social-links li {
   display: inline-block;
}

.footer .social-links a {
   margin: 10px;
   color: var(--blue);
   font-size: 24px;
}

.footer a.credits {
   font-size: 16px;
   padding: 10px 0;
}

/*** TABLE ***/

table.shortcuts, table.summary, table.simple {
   border-collapse: collapse;
}

table.shortcuts > tbody > tr > td, table.simple > thead > tr > th, table.simple > tbody > tr > td {
   padding: 7px;
}

table.shortcuts td.title, table.summary td.title {
   text-align: right;
}

table.shortcuts > tbody > tr:nth-child(odd) {
   background: var(--light1-background-color);
}

table.shortcuts td.caps {
   text-align: center;
   font-variant-caps: small-caps;
   font-variant-ligatures: no-common-ligatures;
}

table.summary > tbody > tr > td {
   border-top: 1px solid var(--light1-border-color);
   border-bottom: 1px solid var(--light1-border-color);
}

table.summary > tbody > tr:first-child > td {
   border-top: none;
}

table.summary > tbody > tr:last-child > td {
   border-bottom: none;
}

table.summary > tbody > tr > td:nth-child(2)::before {
   font-family: 'Font Awesome 6 Free';
   content: '\f061';
   padding: 5px;
   font-weight: 900;
}

table.simple > tbody {
   border-top: 1px solid var(--light1-border-color);
}

table.simple > thead > tr > th:not(:last-child), table.simple > tbody > tr > td:not(:last-child) {
   border-right: 1px solid var(--light1-border-color);
}

table.simple.center, table.simple .center {
   text-align: center;
}

tr.borderTop > td {
   border-top: 1px solid var(--light1-border-color);
}

table.stickyHeader {
   position: relative;
}

table.stickyHeader > thead > tr > th {
   position: sticky;
   top: var(--header-height);
   background-color: var(--background-color);
   z-index: 2;
}

table.list-like > tbody > tr > td:first-child {
   text-align: right;
   padding-right: 5px;
}

table.tree-folder tr.withBackground td {
   background: var(--light1-background-color);
}

table.tree-folder td:first-child {
   font-style: italic;
}

table.tree-folder td.d1 {
   padding-left: 20px;
}

table.tree-folder td.d2 {
   padding-left: 40px;
}

table.tree-folder td.d3 {
   padding-left: 60px;
}

/*** LIST ***/

ul.separate-items > li, ol.separate-items > li {
   margin: 1em 0 0;
}

/*** CODE ***/

code.codeBlock {
   display: block;
   white-space: pre;
   padding: 5px;
}

code.codeBlock .match {
   border: 2px solid var(--american-gold);
}

code.noBreak {
   white-space: nowrap;
}