* {
    font-family: "Cantarell", -apple-system, BlinkMacSystemFont, "Helvetica", sans-serif;
}

.h-card {
    color:#000;
    font-size: 0.7em;
    line-height: 1em;
}

#blog-title {
    font-size:3em;
}

#post header, #subpage header {
    text-align:center;
    margin:30px;
    opacity:1.0;
    margin:1em auto;
    line-height:4em;
}


header p.description {
    margin: 30px auto;
    max-width:540px;
}

header p.description span {
    font-weight: bold;
}

nav {
    margin-top:20px;
}


a {
    color: #8eb33b;
}

a:hover {
    color: #C75646;
}

.pinned, #paging a, .comment a {
    background: #000000;
    color:#ffffff;
    padding:2px 10px 2px 10px;
    border-radius:4px;
    min-width:200px;
    text-transform: uppercase;
    font-size:1rem;
}

.pinned:hover, #paging a:hover, .comment a:hover {
    color: #000;
    background: #C75646;
    text-decoration: none;
    transition: all 0.4s ease;
}
body#collection #paging {
    max-width: 40rem;
    padding:2em 0;
}

#paging a {
    min-width: 100px;
    text-align:center;
    background: #ccc;
    display:inline-block;
}

body#collection #paging {
  padding: 2em 1.6em;
}

#post article {
    margin: 1em auto;
}

#post footer nav a {
    color: #000;
}


article img {
    border-radius:8px;
}

.book {
	display: none;
}

.read-more {
	display: none;
}

.h-entry {
	justify-content: space-between;
	display: flex;
}

body#collection #wrapper article,
body#subpage #wrapper article {
	margin-bottom: 1em;
}

.dt-published {
	flex-shrink: 0;
}

footer hr {
    display:none;
}

body footer {
  text-align: center;
  padding: 0.2em 2em;
}

#collection #manage {
    opacity:0;
}

#collection #manage:hover {
    opacity:1;
}

.action {
    font-size:6px;
}

@media screen and (max-width: 700px) {
	.h-entry {
		display: block
	}
	body#collection #wrapper time,
	body#subpage #wrapper time {
		font-size: 0.9em;
	}
	.post-title {
		font-size: 1.2rem;
	}
	body#collection #wrapper article,
	body#subpage #wrapper article {
		margin-bottom: 1.5em;
	}

	
}

.hidden {
  opacity: 0;
}

.visible {
  opacity: 1;
  transition: opacity 1s ease-out;
}
  
.loved {
    width:44px;height:44px;
    display: inline-block;
    transform-origin: center;
    animation: heartbeat 1.2s infinite;
    margin: 0 0 -10px 0;
}

@keyframes heartbeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.3); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.3); }
  70%  { transform: scale(1); }
  100% { transform: scale(1); }
}

.comment {
     text-decoration: none;
     float: right;
     min-width:100px;
}

.comment a {
    color:#fff;   
}