/**
 * Jerry's Custom CSS Reset (webpage) v0.1c
 * https://codeberg.org/jrm-omg/jerry-custom-css-reset
 */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, iframe, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/**
 * Variables
 */

 html {
  color-scheme: dark;
  --color-canvas-default: #0d1117;
  --color-canvas-inset: #010409;
  --color-canvas-subtle: #161b22;
  --color-fg-default: #c9d1d9;
  --color-fg-muted: #8b949e;
  --color-accent-fg: #58a6ff;
  --color-neutral-muted: rgba(175,184,193,0.2);
  --color-accent-muted: rgba(56,139,253,0.4);
  --color-attention-subtle: rgba(187,128,9,0.15);
  --color-danger-emphasis: #da3633;
  --color-scale-green-0: #aff5b4;
  --color-border-default: #30363d;
  --color-border-muted: #21262d;
  --color-border-subtle: rgba(240,246,252,0.1);
  --color-btn-text: #c9d1d9;
  --color-btn-bg: #21262d;
  --color-btn-border: rgba(240,246,252,0.1);
  --color-btn-hover-bg: #30363d;
  --color-btn-hover-border: #8b949e;
  --color-btn-active-bg: hsla(212,12%,18%,1);
  --color-btn-active-border: #6e7681;
  --color-primer-fg-disabled: #484f58;
  --color-input-disabled-bg: rgba(110,118,129,0);
}

/**
 * Global
 */

body {
  background-color: var(--color-canvas-default);
  color: var(--color-fg-default);
  font-size: calc(18rem / 16);
  display: flex;
  flex-direction: column;
}

@media (prefers-reduced-motion: no-preference) {
  body {
    scroll-behavior: smooth;
  }
}

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

a {
  color: var(--color-accent-fg);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

code {
  padding: 0.2em 0.4em;
  font-size: 85%;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  background-color: var(--color-neutral-muted);
  border-radius: calc(6rem / 16);
}

pre {
  padding: 1rem;
  overflow: auto;
  line-height: 1.45;
  background-color: var(--color-canvas-subtle);
  border-radius: calc(6rem / 16);
}

pre > code {
  display: inline-block!important;
  padding: 0!important;
  overflow: visible!important;
  background-color: transparent!important;
}

table {
  width: max-content;
  border-spacing: 0;
  border-collapse: collapse;
}

table tr {
  background-color: var(--color-canvas-default);
  border-top: calc(1rem / 16) solid var(--color-border-muted);
}

table tr:nth-child(2n) {
  background-color: var(--color-canvas-subtle);
}

table th,
table td {
  padding: calc(6rem / 16) calc(13rem / 16);
  border: calc(1rem / 16) solid var(--color-border-default);
}

/**
 * Header layout
 */

body > header {
  border-bottom: calc(1rem / 16) solid var(--color-border-subtle);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  background-color: var(--color-canvas-default);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 99;
}

body > header > a {
  color: var(--color-fg-muted);
  padding-left: calc(16rem / 16);
}

body > header > a:hover {
  color: var(--color-fg-default);
  text-decoration: none;
}

@media (max-width: 48rem) {
  body > header > a > h2 {
    font-size: inherit;
  }
}

body > header > a > h2 {
  line-height: 1;
}

body > header nav {
  display: flex;
  gap: calc(16rem / 16);
}

body > header nav a {
  color: var(--color-fg-default);
  display: block;
  padding-top: calc(16rem / 16);
  padding-bottom: calc(16rem / 16);
}

body > header nav a:last-child {
  padding-right: calc(16rem / 16);
}

body > header nav a:hover {
  color: var(--color-fg-muted);
  text-decoration: none;
}

/**
 * Main layout
 */

main {
  flex: 1;
}

main.cross-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: calc(16rem / 16);
}

main.with-header {
  padding-top: calc(60rem / 16);
}

/**
 * Article layout
 */

article {
  padding: calc(15rem / 16);
}

/**
 * Article elements
 * headings, paragraphs, etc.
 */

article > * {
  margin-bottom: 1rem;
}

@media (min-width: 48rem) {
  article:not(.full-width) > * {
    max-width: calc(580rem / 16);
    margin-left: auto;
    margin-right: auto;
  }
}

article > h1,
article > h2,
article > h3,
article > h4,
article > h5,
article > h6 {
  line-height: 1.25;
  margin-top: 1.6875rem;
  margin-bottom: 1rem;
  padding-bottom: .3em;
  border-bottom: .0625rem solid var(--color-border-muted);
}

article img {
  border-radius: calc(6rem / 16);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 48rem) {
  article > p:has(img) { /* not supported in FF => JS fix :/ */
    max-width: calc(700rem / 16);
  }
}

article ol,
article ul {
  padding-left: 2rem;
}

article ol li,
article ul li {
  margin-bottom: .33rem;
}

article blockquote {
  padding-left: 1rem;
  padding-right: 1rem;
  color: var(--color-fg-muted);
  border-left: .25rem solid var(--color-border-default);
}

article blockquote p {
  margin-bottom: 1rem;
}

article figure {
  overflow-x: auto;
}

/**
 * Footer
 */

footer {
  padding: calc(15rem / 16);
  background-color: var(--color-canvas-subtle);
  font-size: calc(14rem / 16);
}

@media (min-width: 48rem) {
  footer > * {
    max-width: calc(620rem / 16);
    margin-left: auto;
    margin-right: auto;
  }
}

footer .keywords {
  margin-bottom: calc(5rem / 16);
}

/**
 * Callout
 */

.callout {
  padding: calc(16rem / 16);
  /* width: 100%; */
  /* max-width: calc(580rem / 16); */
  text-align: center;
  border-radius: calc(6rem / 16);
  border: calc(1rem / 16) solid var(--color-border-default);
  margin-bottom: 1rem;
}

.callout.danger {
  border-color: var(--color-danger-emphasis);
}

.callout > * {
  margin-bottom: .5rem;
}

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

/**
 * Main's Form layout
 */

main > form {
  padding: calc(16rem / 16);
  max-width: calc(580rem / 16);
  background-color: var(--color-canvas-subtle);
  border-radius: calc(6rem / 16);
  border: calc(1rem / 16) solid var(--color-border-muted);
}

/**
 * Form elements
 */

form > * {
  margin-bottom: 1rem;
}

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

label {
  display: block;
}

label .note {
  color: var(--color-fg-muted);
  font-size: calc(14rem / 16);
}

input,
textarea {
  width: 100%;
  padding: calc(12rem / 16) calc(16rem / 16);
  background-color: var(--color-canvas-default);
  color: var(--color-fg-default);
  border: calc(1rem / 16) solid var(--color-border-default);
  border-radius: calc(6rem / 16);
}

input:disabled,
textarea:disabled {
  color: var(--color-primer-fg-disabled);
  background-color: var(--color-input-disabled-bg);
  border-color: var(--color-border-default);
  -webkit-text-fill-color: var(--color-primer-fg-disabled);
  opacity: 1;
}

textarea {
  resize: vertical;
}

textarea.file-editor {
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-size: calc(16rem / 16);
}

input:focus-visible,
textarea:focus-visible {
  background-color: var(--color-canvas-default);
  border-color: var(--color-accent-fg);
  outline: none;
  box-shadow: 0 0 0 calc(1rem / 16) var(--color-accent-fg);
}

.btn,
button {
  display: inline-block;
  width: 100%;
  padding: calc(12rem / 16) calc(16rem / 16);
  cursor: pointer;
  user-select: none;
  border: calc(1rem / 16) solid var(--color-btn-border);
  border-radius: calc(6rem / 16);
  background-color: var(--color-btn-bg);
  color: var(--color-btn-text);
  line-height: 1;
}

.btn:disabled,
button:disabled {
  color: var(--color-primer-fg-disabled)!important;
  background-color: var(--color-btn-bg)!important;
  border-color: var(--color-btn-border)!important;
  cursor: default;
}

.btn:hover,
button:hover {
  background-color: var(--color-btn-hover-bg);
  border-color: var(--color-btn-hover-border);
  text-decoration: none;
}

.btn:active,
button:active {
  background-color: var(--color-btn-active-bg);
  border-color: var(--color-btn-active-border);
}