body {
  height: auto
}
p {
  max-width: 40em; 
  margin-bottom: 1em
}
p, pre, ul, ol, blockquote {
  margin-bottom: 1em
}

a {
  text-decoration: underline;
  color: currentColor;
}
a:hover {
  color: currentColor;
  text-underline-offset: .2em;
  text-decoration-color: turquoise
}

  
.medialist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1em;
  	margin: 2em 0;
}

.medialist .important {
  color: red;
  grid-column: span 2;
}

.medialist img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: var(--y);
    transform: scale(var(--s));
  	transition: all 250ms;
}


h1, h2, h3 {
  font-size:1em;
}
h1 {margin:2em 0; }
h1::before { content: "# "}

iframe {
  max-width: 900px;
  margin: 0 0 2em 0;
  aspect-ratio: 16/9;
  width: 100%;
}
ul, li {
  all: revert;
}
pre {
  border: 1px solid #eee;
  padding: .5em
}

.footnotes {
  hr {
  	background: none;
    border-top: 1px solid;
    width: 4em
  }
  ol {
    margin: 2em 0 0 2em
  }
}