:root {
  --font-family: "ABC Monument G Mono";
  --font-weight: normal;
  --background: #ffffff;
  --border-color: #000000;
  --background-code: #e6e6e6;
  --border-width: 0.0625rem;
  --highlight: #ff1493;
  --highlight: #ff00b2;
  --highlight-lab: lab(70% 100% 0);
  --text-color: #000000;
  --max-width: 60rem;
  --corner-radius: 0.25rem;
  --gap-large: 4rem;
  --gap-medium: 2rem;
  --gap-small: 1rem;
  --font-size: 0.875rem;
  --line-height: 110%;
  --font-size-small: 0.875rem;
  --line-height-small: 100%;
}

html {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  background-color: var(--background);
  margin: 0;
  padding: 0;
  /* scroll-behavior: smooth; */
  color: var(--text-color);
  transition: filter 150ms cubic-bezier(0.25, 0.5, 0.4, 1);
}

body {
  margin: auto;
  max-width: var(--max-width);
  padding: 0 var(--gap-small);
}

html.dragover {
  filter: blur(10px);
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
a {
  margin-block: 0 0;
  margin-inline: 0 0;
  padding-block: 0 0;
  padding-inline: 0 0;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
  max-width: var(--max-width);
}

pre {
  width: fit-content;
  margin: 0;
  width: 100%;
}

pre code {
  width: 100%;
}

code {
  position: relative;
  background-color: var(--background-code);
  padding: 0.25rem 0.5rem;
  /* border-radius: 0.5rem; */
  display: inline-block;
  max-width: 100%;
  line-break: anywhere;
  white-space: pre-wrap;
  color: var(--background-dark);
  line-height: 1rem;
}

a {
  position: relative;
  color: var(--highlight);
  color: var(--highlight-lab);
  max-width: 100%;
  overflow: hidden;
  /* border-radius: 0.75rem; */
}

.logbook-item a {
  line-break: anywhere;
}

a:not([rev="footnote"], .footnote-ref, [data-media])::after {
  content: " ↗";
  position: relative;
  top: -0.1em;
}

a[data-media] {
  display: block;
  line-height: 0;
  width: fit-content;
  height: auto;
  transform: translate3d(0, 0, 0);
  transition: transform 150ms 50ms cubic-bezier(0.25, 0.5, 0.4, 1),
    filter 150ms 50ms cubic-bezier(0.25, 0.5, 0.4, 1);
  font-size: 0;
  line-height: 0;
}

a[data-media]::after {
  content: "↗";
  position: absolute;
  width: var(--font-size);
  text-align: center;
  height: var(--font-size);
  font-size: var(--font-size);
  line-height: var(--font-size);
  top: 0;
  right: 0;
  padding: 0 0 var(--corner-radius) var(--corner-radius);
  border-bottom-left-radius: 0.5rem;
  color: var(--highlight-lab);
  background-color: var(--background);
  transform: translate(100%, -100%);
  transition: transform 150ms 50ms cubic-bezier(0.25, 0.5, 0.4, 1);
  transition-delay: inherit;
}

@media (hover: hover) {
  a[data-media]:hover,
  a[data-media].hover {
    transition: transform 150ms cubic-bezier(0.25, 0.5, 0.4, 1),
      filter 150ms cubic-bezier(0.25, 0.5, 0.4, 1);
  }

  a[data-media]:hover::after,
  a[data-media].hover::after {
    transform: translate(0%, 0%);
    transition: transform 150ms cubic-bezier(0.25, 0.5, 0.4, 1);
    transition-delay: inherit;
  }

  a:hover {
    color: var(--highlight);
    color: var(--highlight-lab);
    /* text-decoration: underline; */
  }
}

.footnote-ref {
  display: inline-block;
  padding: 0.125rem;
  border-radius: 2rem;
  border: 1px solid var(--highlight);
  border: 1px solid var(--highlight-lab);
  width: 1.5rem;
  height: 1.5rem;
  text-align: center;
}

.footnote-ref:hover {
  color: var(--background-dark);
  background-color: var(--highlight);
  background-color: var(--highlight-lab);
  text-decoration: none;
}

.footnotes hr {
  border: none;
  background-color: none;
}
.footnotes hr::after {
  content: "---";
}

img,
.video-wrapper,
video,
audio,
canvas {
  max-width: 100%;
  height: auto;
  object-fit: fill;
  object-position: center;
  max-height: calc(100svh - var(--gap-medium) * 2);
}
.big img,
.big video,
.big audio {
}
.small img,
.small video,
.small audio {
}

picture {
  filter: blur(0px);
  transition: filter 150ms cubic-bezier(0.25, 0.5, 0.4, 1);
}

picture:has(source[data-srcset]) {
  filter: blur(10px);
}

.video-wrapper {
  position: relative;
  width: 100%;
}

/* .video-wrapper video[src=""] {
  object-fit: fill;
} */

.video-wrapper .poster {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  left: 0;
  top: 0;
}

ul {
  margin-inline-start: 3ch;
  list-style: "● ";
}

ol {
  margin-inline-start: 4ch;
}

/* 
  
      TYPOGRAPHY
  
*/

body {
  font-size: var(--font-size);
  line-height: var(--line-height);
}

h1 {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
}

#subtitle {
  text-transform: lowercase;
}

.timestamp {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  white-space: nowrap;
}

.button,
p {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
}
p {
  line-height: 120%;
}
ol:not(:last-child),
ul:not(:last-child),
p:not(:last-child) {
}

code {
  font-family: var(--font-family);
}

/* 
  
      LOG IN / OUT
  
  */

.button {
}

main > .button {
  display: none;
}

/* 
  
      PHASE
  
*/

main {
  margin: var(--gap-large) 0;
}

.title-section {
  margin-bottom: var(--gap-large);
}

.title-section > p:not(:last-child) {
  margin-block-end: var(--font-size);
}

.logbook-item {
  position: relative;
  margin-bottom: var(--gap-large);
  border: solid var(--border-width) var(--border-color);
  border-radius: var(--corner-radius);
  opacity: 0;
  transform: translateY(calc(var(--gap-large) * 2));
  animation: fadeIn 300ms cubic-bezier(0, 0.5, 0.25, 1) forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(calc(var(--gap-large) * 2));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logbook-item:last-child {
  margin-bottom: 0;
}

.timestamp {
  position: absolute;
  z-index: 2;
  background-color: var(--background);
  line-height: var(--font-size-small);
  left: calc(var(--gap-medium) - var(--font-size-small) / 3 * 2);
  top: calc(var(--font-size-small) / -2.125);
  padding: 0 calc(var(--font-size-small) / 3 * 2);
}

.section-title-wrapper {
}
.block-content {
  padding: var(--gap-medium);
}
.block-content:not(:last-child) {
  border-bottom: solid var(--border-width) var(--border-color);
}

.block-content.image-block {
  display: flex;
  flex-flow: row wrap;
  gap: var(--gap-small);
  font-size: 0;
  line-height: 0;
}

.image-block > *,
.image-block.small > * {
  flex-grow: 1;
  flex-basis: calc((100% - var(--gap-small) * 3) / 4);
  max-width: calc((100% - var(--gap-small) * 3) / 4);
  align-self: center;
  /* width: 50%; */
}

@media screen and (max-width: 600px) {
  :root {
    /* --border-width: 0.0625rem; */
    --max-width: 100%;
    /* --corner-radius: 0.25rem; */
    --gap-large: 3.5rem;
    --gap-medium: 1rem;
    --gap-small: 1rem;
    --font-size: 0.875rem;
    --line-height: 110%;
    --font-size-small: 0.75rem;
    --line-height-small: 100%;
  }

  body {
    padding: 1rem 0.5rem;
  }
  main {
    width: 100%;
    margin: 0;
  }

  main > .button {
    display: inherit;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
  }

  .timestamp {
    top: calc(var(--font-size-small) / -1.875);
  }

  img,
  video-wrapper,
  video,
  audio {
    width: calc(100vw - 1rem - 2.5rem - 0.25rem);
    width: 100%;
  }

  /* a:has(video) {
    flex-basis: 100% !important;
  } */
  .big img,
  .big video,
  .big audio {
  }

  .image-block > *,
  .image-block.small > * {
    /* flex-basis: calc(100% / 2 - var(--gap-small)); */
    /* flex-basis: calc(100% / 2 - var(--gap-small));
    max-width: calc(100% / 2 - var(--gap-small) * 0.5); */
    flex-basis: calc((100% - var(--gap-small) * 2) / 3);
    max-width: calc((100% - var(--gap-small) * 2) / 3);
  }
}