/* Font */
@font-face {
  font-family: Espacion;
  src: url(/font/ESPACION.ttf) format(truetype);
}

@font-face {
  font-family: FantasqueSansM Nerd Font;
  src: url(/font/FantasqueSansMono-Regular.otf) format(truetype);
}

/* Defaults */
:root {
  --font-family: FantasqueSansM Nerd Font, Espacion, system-ui, -apple-system, BlinkMacSystemFont, "Liberation Sans", Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-family-monospace: FantasqueSansM Nerd Font, JetbrainsMono Nerd Font, Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
}

/* Theme Colors */

:root {
  --background-image: url("../images/PIA15416~large.jpg");
  --background-color: rgba(255, 255, 255, 0.7);
  --border-color: #997b00;
  --text-color: #16181a;
  --text-color-link: #0057d1;
  --text-color-link-active: #008c99;
  --text-color-link-visited: #a018ff;
}

@media (prefers-color-scheme: dark) {

  :root {
    --background-color: rgba(22, 24, 26, 0.7);
    --border-color: #f1ff5e;
    --text-color: #ffffff;
    --text-color-link: #5ea1ff;
    --text-color-link-active: #5ef1ff;
    --text-color-link-visited: #bd5eff;
  }
}

* {
  box-sizing: border-box;
}

@view-transition {
  navigation: auto;
}

html,
body {
  padding: 0;
  margin: 0 auto;
  font-family: var(--font-family);
  font-size: 14pt;
  background-image: var(--background-image);
  background-attachment: fixed;
}

html {
  overflow-y: scroll;
}

p {
  line-height: 1.6em;
}

#content li {
  line-height: 1.6em;
}


#container {
  margin: 3em auto;
  padding: 1em 3em;
  width: 90%;
  max-width: 50em;
  color: var(--text-color);
  background-color: var(--background-color);
  backdrop-filter: blur(8px);
  border-style: ridge;
  border-width: 20px;
  border-radius: 8px;
  border-color: var(--border-color);
}

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

img {
  max-width: 100%;
}

img[width][height] {
  height: auto;
}

/* img[src$=".svg"] { */
/* width: 100%; */
/* height: auto; */
/* max-width: none; */
/* } */

video,
iframe {
  width: 100%;
  height: auto;
}

iframe {
  aspect-ratio: 16/9;
}

a[href] {
  color: var(--text-color-link);
}

a[href]:visited {
  color: var(--text-color-link-visited);
}

a[href]:hover,
a[href]:active {
  color: var(--text-color-link-active);
}

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

p {
  line-height: 1.5;
}

li {
  line-height: 1.5;
}

header {
  border-bottom: 1px dashed var(--text-color);
}

header {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  /* font-family: "Espacion"; */
  padding: 1em;
}

.home-link {
  flex-grow: 1;
  font-size: 1.5em;
  /* 16px /16 */
  font-weight: 700;
}

.home-link:link:not(:hover) {
  text-decoration: none;
}

#skip-link {
  text-decoration: none;
  background: var(--background-color);
  color: var(--text-color);
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-gray-90);
  border-radius: 2px;
}

/* Prevent visually-hidden skip link from pushing content around when focused */
#skip-link.visually-hidden:focus {
  position: absolute;
  top: 1rem;
  left: 1rem;
  /* Ensure it is positioned on top of everything else when it is shown */
  z-index: 999;
}

.nav {
  display: flex;
  gap: .5em 1em;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav-item {
  display: inline-block;
  font-size: 1.25em;
}

.nav-item a[href]:not(:hover) {
  text-decoration: none;
}

.nav a[href][aria-current="page"] {
  font-weight: bold;
}

.links-nextprev {
  display: flex;
  justify-content: space-between;
  gap: .5em 1em;
  list-style: "";
  border-top: 1px dashed var(--text-color);
  padding: 1em 0;
}

.links-nextprev>* {
  flex-grow: 1;
}

.links-nextprev-next {
  text-align: right;
}

table {
  margin: 1em 0;
}

table td,
table th {
  padding-right: 1em;
}

pre,
code {
  font-family: var(--font-family-monospace);
}

pre:not([class*="language-"]) {
  margin: .5em 0;
  line-height: 1.375;
  /* 22px /16 */
  -moz-tab-size: var(--syntax-tab-size);
  -o-tab-size: var(--syntax-tab-size);
  tab-size: var(--syntax-tab-size);
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  overflow-x: auto;
}

code {
  word-break: break-all;
}

/* Post List */

.postlist {
  counter-reset: start-from var(--postlist-index);
  list-style: none;
  padding: 0;
  padding-left: 1.5rem;
}

.postlist-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  counter-increment: start-from -1;
  margin-bottom: 1em;
}

.postlist-item:before {
  display: inline-block;
  pointer-events: none;
  content: "" counter(start-from, decimal-leading-zero) ". ";
  line-height: 100%;
  text-align: right;
  margin-left: -1.5rem;
}

.postlist-date,
.postlist-item:before {
  font-size: 0.8125em;
  /* 13px /16 */
  color: var(--text-color);
}

.postlist-date {
  word-spacing: -0.5px;
}

.postlist-link {
  font-size: 1.1875em;
  /* 19px /16 */
  font-weight: 700;
  flex-basis: calc(100% - 1.5rem);
  padding-left: .25em;
  padding-right: .5em;
  text-underline-position: from-font;
  text-underline-offset: 0;
  text-decoration-thickness: 1px;
}

.postlist-item-active .postlist-link {
  font-weight: bold;
}

/* Tags */
.post-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
  font-style: italic;
}

.postlist-item>.post-tag {
  align-self: center;
}

/* Tags list */
.post-metadata {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5em;
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-metadata time {
  margin-right: 1em;
}