@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji:wght@300..700&family=Noto+Sans+Symbols+2&family=Noto+Serif+JP:wght@200..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
@font-face { font-family: Constellation; src: url(/assets/The\ Constellation.ttf); }
@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
:root {
  background: black url(/assets/bg.jpg) repeat fixed;
  font: 16px 'Noto Serif', 'Noto Color Emoji', 'Noto Serif JP', 'Noto Sans Symbols 2';
  color: #efefef;
  --accent: #AA8DD8;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  interpolate-size: allow-keywords;
}

body {
  width: min(95%, 80ch);
  margin: 70px auto 200px;
  padding: 15px;
  background: #000c;

  &>*+* { margin-block: 1em 0; }
  & h1:first-child { margin-block: 0; }
}

h1,h2,h3,h4,h5,h6 {
  font-family: Constellation, 'Noto Color Emoji';
  font-weight: normal;

  & + :not(h1,h2,h3,h4,h5,h6) { margin-block-start: .5em; }
  & + table { margin-block-start: 0; }
  :is(details,.profile) + & { margin-block-start: 1.5em; }

  &:is(h1) { font-size: 2.5em; }
  &:is(h2) { font-size: 2em; }
  &:is(h3) { font-size: 1.5em; }

  & a {
    text-decoration: none;
  }
  &.fancy, & .fancy {
    display: flex; gap: 20px; align-items: center;
    &::after { content: ""; border-bottom: 2px solid currentColor; flex-grow: 1; }
  }
}
a { color: var(--accent); &.fancy, .fancy & { text-decoration: none; } }
p { text-wrap: pretty; }
br { margin-block-start: 0; }
hr { margin-block: 30px; border-color: #fff4; }
li { margin-block-start: .5em; &:has(br) { margin-block-start: 1em; & br { margin-block-end: .25em; } } }
th,td { text-align: left; &:not(:first-child) { padding-inline-start: .5em; } }
img { max-inline-size: 100%; }

details {
  &::details-content {
    /*@supports (interpolate-size: allow-keywords) { height: 0; } */ /* only transition height when supported; screws with jumplinks into long content */
    opacity: 0;
    overflow-y: clip;
    transition: 500ms ease allow-discrete;
    transition-property: height, opacity, content-visibility;
  }
  &[open]::details-content {
    height: auto; opacity: 1;
    transition-property: height, opacity; /* only transition content-visibility on close to avoid jumplink issues */
  }
}
summary {
  & :is(h1,h2,h3,h4,h5,h6) { margin: 0; }
  &::marker { content: ''; }
  & + :not(p) { margin-block-start: 1.5em; }
  &:has(:is(h1,h2,h3,h4,h5,h6)) + p { margin-block: .5em 1.5em; }

  display: flex; gap: 20px; align-items: center;
  color: var(--accent); cursor: pointer;
  &::after { content: ""; border-bottom: 2px solid var(--accent); flex-grow: 1; }
}

.profile {
  display: grid; grid-template-columns: auto 1fr; gap: 0 1em; break-inside: avoid;
  & > * { margin: 0; margin-block-end: var(--profile-vgap, .25em); }
  & p + :is(p,cite) { margin-block-start: calc(var(--profile-vgap, .25em) * 2); }
  & img { grid-row: span 10; inline-size: var(--profile-img-size, 4.5em); aspect-ratio: 1; border-radius: 100%; }
  & cite { justify-self: end; margin-block-end: 0; }
  & + .profile, :is(h1,h2,h3,h4,h5,h6) + & { margin-block-start: 1.5em; }
}
.admonition {
  display: grid; grid-template-columns: auto 1fr; gap: 0 .5em; break-inside: avoid; align-items: center; margin-block: 2em;
  & > * { margin: 0; }
  & img { grid-row: span 2; inline-size: 3.5em; aspect-ratio: 1; border-radius: 100%; }
}

.fancy { font-family: Constellation, 'Noto Color Emoji'; }
.accent { color: var(--accent); }
.inline-avatar { max-block-size: 1em; border-radius: 50%; vertical-align: middle; }

a[href^="."] { text-decoration: none; &::before { content: '🙚 '; } }
a[target="_blank"] { cursor: alias; }
[title]:not(img) { cursor: help; }

:target {
  scroll-margin-top: 5em;
  &>:nth-child(1 of :is(h1,h2,h3,h4,h5,h6)), &:is(h1,h2,h3,h4,h5,h6) {
    text-decoration: double underline var(--accent);
  }
}