[fragmention] { background-color: gold; outline: 0.375em solid gold; }
body {font-family: "Hoefler Text", Georgia, serif; background-color: white; line-height: 1.2em; 
display:webkit-flex; display:flex; webkit-flex-wrap:wrap; flex-wrap:wrap;}
h1 {font-size: 2em; line-height: 1.2em;}
h3 {margin-bottom:0.25em; font-weight:300;}
h3 a {font-weight:600; text-decoration:none;}
p {margin-top:0.25em;}
.project-icon {height:4em; float:left; margin-right .25em;}
.h-card, .webmention-author { font-family: "Gill Sans", Roboto,Verdana, sans-serif; }
section {clear:both;}
.h-entry { line-height: 1.2em; clear:both;}
.h-entry h1 { max-width: 40rem; text-wrap:balance;}
.h-entry h2 { max-width: 40rem; text-wrap:balance;}
.h-entry p { max-width: 40rem; text-wrap:pretty;}
.h-entry blockquote { max-width: 36rem;}
.featured {max-width: 40rem;}
.webmention-container,.webmention-summary,footer {max-width: 25em; }
h1,h2,h3,.webmention-name { font-family: "Gill Sans", Roboto,Verdana, sans-serif; }
div .h-cite {display:webkit-flex; display:flex;}
blockquote.auto-mention {font-size:.9em; border: 1px solid lightgray; border-radius: 4px; max-width: 25em; padding: .9em; }
blockquote.auto-mention cite {font-style:normal; font-weight:bold;}
blockquote.auto-mention p {margin:0;}
blockquote.auto-mention a {text-decoration:none; color:black;}
.splash {width:100%; max-width:100%; max-width: 100vw;}
img,video {max-width: 100vw;} 

aside {font-style: italic;}

*{
	transition: all 0.25s ease-out;
}

.hovercard{
	position: relative;
}

.hovercard .hidden-info{
	opacity: 0;
	max-height: 0;
	max-width: 0;
	overflow: hidden;
	position: absolute;
	top: 1.5em;
	left: 0;
	z-index:1;
}


.hovercard:hover .hidden-info{
	border: #999 solid 1px;
	box-shadow: 0 0 1em #999;
	padding: 0.5em;
	background: #fcfcfc;
	opacity: 1;
	max-height: 20em;
	max-width: 20em;
}



.webmention-author img {height: 3em; float:left; margin:.25em;}
.webmention-mention { margin:.5em; background-color: linen;}
.webmention-facepile > li {
  display: inline-block;
  position: relative;
  margin: 0 5px 5px 0;
}
.webmention-interaction-presentation:after {
  display: block;
  position: absolute;
  bottom: -4px;
  right: -4px;
  padding: 4px;
  width: 1em;
  height: 1em;

  font-size: 1em;
  line-height: 1;
  text-align: center;

  color: #000;
}
.webmention-interaction-like .webmention-interaction-presentation:after {content: "🌟"; color:gold;}
.webmention-interaction-repost .webmention-interaction-presentation:after {content: "♻"; color:green;}

.webmention-interaction-presentation > span {
  display: block;
  text-indent: -5000em;
  position: relative;
  overflow: hidden;
  width: 3em;
  height: 3em;
  background: #eee;
  border: 1px solid #ccc;
}
.webmention-interaction-presentation > span > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.webmention-facepile :link,.webmention-facepile :visited { text-decoration:none; }
