a-markdown {
	--bg1-color: transparent;
	--bg2-color: linen;
	--text-color: rgb(20,20,20);
  --cell-max-width: 100px;
  --pad: .5rem;
  display: block;
  opacity: 1;
  padding: var(--pad);
  transition: opacity 0.5s;

  &:empty { opacity: 0; }

  & code,
  & pre {
  	background: var(--bg2-color);
  	border-radius: 5px;
		font-family: "Courier New", ui-monospace;
		color: var(--text-color);
  }

  & pre {
  	overflow-x: auto;
  	padding: 10px;
  }

	& table {
	  border-collapse: collapse;
	  width: 100%;
	}

	& th, td {
	  border: 1px solid var(--border-color);
	  padding: var(--pad);
	  overflow-x: auto;
	  max-width: var(--cell-max-width);
	}

	& .error { color: darkred; }
}

@media (prefers-color-scheme: dark) {
	a-markdown {
		--bg2-color: rgb(20, 20, 20);
		--text-color: snow;
	}
}

@media (min-width: 640px) {
	a-markdown {
	  --cell-max-width:  360px;
	  --pad: 1rem;
	}
}

a-markdown[display="html"],
a-markdown[display="markdown"] {
	font-family: ui-monospace;
	white-space: pre;
}