/*  This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program. If not, see <https://www.gnu.org/licenses/>. */

@import url("chivo.css");

:root {
  --lighter-background: #1a2533;
  --light-background: #101322;
  --dark-background: #070d15;
  --foreground: #dfdfdf;
  --accent: #ff6ac1;
}

body {
  background: var(--light-background);
  color: var(--foreground);
}

body, input {
  padding: 1em;
  margin: 0;

  font-size: 14pt;
  font-family: "Chivo", sans-serif;
}

@media (min-width: 800px) {
  body {
    padding: 1em 20vw;
  }
}

main {
  padding: 2em 0;
}

main > *:first-child {
  margin-top: 0;
}

main > *:last-child {
  margin-bottom: 0;
}

body > footer {
  text-align: center;
  display: block;
}

nav#site-map {
  display: grid;
  grid-gap: 0.75rem;
  grid-template-columns: 20px auto;
}

nav#site-map img {
  margin-top: 2px;
}

nav#site-map ul {
  display: flex;
  list-style: none;
  margin: 0;
  flex-wrap: wrap;
}

nav#site-map ul li {
  margin-right: 1em;
}

nav#site-map ul li:last-child {
  margin: 0;
}

nav#site-map ul li a {
  text-decoration: none;
}

nav#site-map ul li a:hover {
  color: var(--foreground);
  text-decoration: underline dotted;
  text-decoration-thickness: calc(1em/9);
}

nav#site-map ul li:last-child {
  margin: 0;
}

nav#site-map ul li:has(a:hover)::marker {
  content: "";
}

p {
  margin: .5em 0;
}

ul, ol {
  padding: 0;
}

ul {
  margin: .5em 0 .5em 1em;
  list-style-type: square;
}

ol {
  margin: .5em 0 .5em 2em;
  list-style-type: decimal;
}

ul li::marker, ol li::marker {
  font-weight: bold;
  font-style: normal;
  color: var(--accent);
}

ul li:has(a:hover)::marker {
  content: "→  ";
}

li > p:first-child {
  margin-top: 0;
}

li > p:last-child {
  margin-bottom: 0;
}

ul#main-links {
  column-count: 2;
}

::selection {
  background: var(--accent);
  color: var(--light-background);
}

aside, .admonition, .example, .colist {
  margin-top: 1em;
  margin-bottom: 1em;
  padding: 1em;

  background: var(--dark-background);
  border-left: 5px solid var(--accent);

  font-style: normal;
  font-weight: normal;
}

.admonition {
  display: grid;
  grid-template-columns: 1em auto;
  grid-gap: 1em;
}

.admonition .icon {
  width: 20px;
  height: 20px;
  margin-top: .2em;
}

.admonition div:nth-child(2) *:first-child, 
aside > *:first-child, 
.colist > *:first-child,
.example > *:first-child {
  margin-top: 0;
}

.admonition div:nth-child(2) *:last-child, 
aside > *:last-child,
.colist > *:last-child,
.example > *:last-child {
  margin-bottom: 0;
}

.icon {
  user-select: none;
  width: 1em !important;
}

dl dt {
  font-weight: bold;
}

dl dd, .admonition *:nth-child(2), aside, .example, .colist {
  overflow-x: scroll;
  scrollbar-width: none;
}

dl dd::-webkit-scrollbar, 
.admonition *:nth-child(2)::-webkit-scrollbar,
aside::-webkit-scrollbar,
.example::-webkit-scrollbar,
.colist::-webkit-scrollbar {
  display: none;
}

dl dd > *:first-child {
  margin-top: 0;
}

dl dd > *:last-child {
  margin-bottom: 0;
}

table {
  min-width: 100%;
  margin: 0;
  table-layout: fixed;

  font-style: normal;
  font-weight: normal;
  border-collapse: collapse;
}

td, th {
  overflow: scroll;
  scrollbar-width: none;

  padding: 1em;
  border: none;
  
  vertical-align: top;
  text-align: left;
}

thead tr, tbody tr:nth-child(2n) {
  background: var(--lighter-background);
}

table::::-webkit-scrollbar, td::-webkit-scrollbar, th::-webkit-scrollbar {
  display: none;
}

a {
  color: var(--foreground);
  text-decoration: underline dotted;
  text-decoration-thickness: calc(1em/9);
  transition: color 0.15s;
}

a:hover {
  color: var(--accent);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-size: 20pt;

  font-weight: bold;
  text-align: left;
  color: var(--accent);
}

figure {
  margin: .5em 0;
}

figure figcaption {
  margin-top: 1em;

  font-style: italic;
  text-align: center;
}

figure.equation {
  overflow-x: scroll;
  scrollbar-width: none;

  text-align: center;
}

img {
  max-width: 100%;
  max-height: 100%;
}

video {
  max-width: 100%;
}

figure img, figure iframe, figure video {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 60vh;
}

.table-container {
  display: block;
  margin: .5em 0;

  overflow-x: scroll;
  scrollbar-width: none;
}

.code-block {
  background: var(--dark-background);
  border-left: 5px solid var(--accent);

  overflow-x: scroll;
  scrollbar-width: none;

  margin: .5em 0;
}

.code-block::-webkit-scrollbar {
  display: none;
}

.code-block > pre {
  font-family: monospace;
  width: max-content;
  margin: 1em 0;
  padding: 0 1em;
}

code {
  font-family: monospace;
  font-size: .9em;
}

code.inline, kdb, code.inline a {
  background: var(--foreground);
  color: #070d15;
  padding: 0 .3em;
  border-radius: .5em;
}

time {
  display: inline-block;

  padding: .1em .3em;
  margin-top: .5em;

  background: var(--foreground);
  color: #070d15;
}

blockquote {
  margin-left: 1em;
  margin-right: 0;
}

@media (min-width: 800px) {
  blockquote {
    margin: 0 2em;
  }
}

blockquote p {
  font-style: italic;
}

blockquote footer {
  font-style: normal;
  text-align: right;
}

hr {
  border-top: solid 1.5pt var(--foreground);
  overflow: visible;
}

#feed article {
  display: grid;
  grid-template-rows: fit-content fit-content;
  gap: 1em;

  background: var(--dark-background);
  padding: 1em;
  margin: .5em 0;
}

#feed p {
  margin: 0;
}

#feed article header {
  text-align: left !important;
}

#feed article h6 {
  font-size: 1em;
  font-style: italic;
  font-weight: bold;
}

code .title {
  padding: 0 1em;
}

.conum {
  color: #f9ba43;
  font-weight: bold;
}

math, time {
  white-space: nowrap;
}

form {
  text-align: left;
}

input[type="button"], 
input[type="reset"], 
input[type="submit"] {
  display: block;
  padding: 0;

  background: #dfdfdf;
  color: #070d15;
  border: none;
  cursor: pointer;
}

input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"] {
  padding: 0 1em;

  background: transparent;
  color: #dfdfdf;
  border: solid 1.5pt #dfdfdf;
}

input::placeholder {
  opacity: 100%;
}