@import url("/web/css/typography.css");

body {
  background: #000a;
}

article {
  background: white;
  color: black;
  max-width: 500px;
  padding: 5px;
  margin: auto;
  margin-bottom: 60px;
  >:first-child { margin-top: 0; }
  >:last-child { margin-bottom: 0; }
}

article > img, article > video {
  display: block;
  max-width: 100%;
}

img[align=right] {
  float: none;
  margin-left: auto;
  margin-right: 2ch;
  clip-path: none;
}

a {
  text-decoration-style: solid;
}

#t1, #t2, #t3, #t4 { display: none; &:target {display: inline;} }

article:has(#t1:target) span[t1][title],
article:has(#t2:target) span[t2][title],
article:has(#t3:target) span[t3][title],
article:has(#t4:target) span[t4][title] {
  color: black;
  text-decoration: 1px solid overline black;
  cursor: grabbing;
}

article:has(#t1:target) a[href$=t1],
article:has(#t2:target) a[href$=t2],
article:has(#t3:target) a[href$=t3],
article:has(#t4:target) a[href$=t4] {
  color: black;
}

article:has(#t1:target, #t2:target, #t3:target, #t4:target) {
  color: #646464;
  :target { color: black; }
}