* {
	box-sizing:border-box;
}

html,body {
	height:100%;
}
body {
	margin:0;
	font-size: 100%;
	font-family:helvetica,arial,sans-serif;

    background-image:url(/images/tinypatterns16_026.png);
}
header {
	color:black;
	position:relative;
	padding:1em;
}
h1,header p,header div {
	font-family: cambria,serif;
	margin:0;
}
header p {
	margin-left:5em;
}
h1 {
	font-size:2.5em;
	line-height:1em;
	font-family: "Elephant",cambria,serif;
	font-weight:normal;
	margin:0;
}
header hgroup {
	position:relative;
}
.header-date {
	position:absolute;
	top:0;
	right:0;
}
.headline {
	display:inline-block;
	max-width:300px;
}
footer {
	padding:1em 2em;
	margin-top: 1em;
	border-top:2px solid #999;
}


a {
	font-weight:bold;
	color:inherit;
	text-decoration: none;
}




.container {
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}

.comic-title {
	text-align:right;
	font-size:.75em;
	padding-right:2em;
	text-transform:uppercase;
	font-weight:bold;
	font-family:arial,sans-serif;
}
.comic-hero-image {
	width:100%;
	max-height:70vh;
	object-fit:contain;
	object-position: center;
}

/*.comic-hero-controls {
	padding-left:2em;
	padding-right:2em;
}*/
.comic-hero-controls {
	text-align:center;
}
.comic-hero-controls ul {
	list-style-type:none;
	margin-top: 0;
	margin-bottom: 0;
	padding-left:0;
	/*border:solid black;*/
	/*border-width:1px;*/
	text-align:center;
	/*background-color:#f2f2f2;*/
	display:inline-flex;
}
.comic-hero-controls li {
	flex:1 1 auto;
}
.comic-hero-controls .icon {
	height:1.6em;
	pointer-events:none;
	vertical-align: text-bottom;
}
.comic-hero-controls a, .comic-hero-controls span {
	display: block;
	padding: 0.5em 0.5em;
	font-weight:bold;
	text-decoration: none;
	color:black;
	/*border:solid black;*/
	/*border-width:0 1px 0 0;*/
	transition:all .25s;
}
/*.comic-hero-controls li:first-of-type a, .comic-hero-controls li:first-of-type span {
	border-width:0 1px;
}
.comic-hero-controls span {
	color:#999;
	cursor:default;
}
.comic-hero-controls li a:hover {
	background-color:#eee;
	border-width:0 10px 0 10px;
}*/

.ghosted {
	opacity:0.3;
}

.maincard {
	background-color:white;
	max-width:900px;
	box-shadow: 2px 3px 5px rgba(0,0,0,0.2);
	border-radius:2px;
	margin:1em auto 3em;
}
.tape {
	position: absolute;
	text-align: center;
	left: 375px;
	top: -30px;
}
.tape img {
	height:4em;
	opacity:0.8;
}

.padded-h {
	padding-right:2em;
	padding-left:2em;
}





.comic-hero-controls object{
  pointer-events: none;
}




.share-icon {
	width: 1.5em;
	height: 1.5em;
}


.flex-inline-parent { display:inline-flex; }
.flex-parent { display:flex; }
.flex-child { flex:1 1 auto; }
.flex-none { flex:none; }
.flex-align-center { align-items:center; }
.flex-justify-center { justify-content:center; }
.flex-wrap { flex-wrap:wrap; }


.grid {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 10px;
}
.item {
    display: inline-block;
    box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.caption {
    padding: 0.5em;
    font-weight: normal;
    text-align: center;
}



@media (max-width:500px) {
	h1 {
		font-size:1em;
	}
	.maincard {
		margin:0;
		box-shadow:none;
	}
}