html, body {
	background-color: #f5f5dc;
	font-family: "EB Garamond", serif;
	margin: 0;
	height:100%;
	
	display:flex;
	min-height: 100svh;
	flex-direction: column;
}

html.dark,
body.dark {
	background-color: #3E3E37;
}

@media only screen and (max-width: 767px) {
.body {
	flex: 1 0 auto;
}
}

@media only screen and (min-width: 768px) {
  .body {
	width:75%;
	margin:0 auto;
	flex: 1 0 auto;
  }
}

.head {
	border-bottom: 1px solid #000;
	border-radius: 15px;
	width:100%;
}

#logo {
	height:128px;
	display:inline-block;
}

.logo-container {
	display:inline-block;
}

.menu {
	display:block;
	font-family:"Garamond", sans-serif;
	vertical-align:top;
}

.submenu {
	display:inline-block;
	font-family:"Garamond", sans-serif;
	margin-left:0.5em;
}

.search_form {
	margin:1em;
}

.menu-item {
	display:inline-block;
	margin:1em;
	font-size:120%;
}

.submenu-item {
	display:inline-block;
	margin: 1em;
	font-size:80%;
}

.content {
	border-radius:15px;
	border:1px solid #000;
	background-color:#fff;
	margin-top:1em;
	padding:1em;
}
body.dark .content {
	background-color:#1F1F1C;
	color:#EEE;
}

.episode {
	padding:1em;
	vertical-align:top;
	margin:0.5em;
}

.series {
    margin: 1em;
}

.article h3, .article .small {
    margin: 0 1em;
}

.article .small {
    font-size:120%;
    margin-bottom: 0.5em;
}

.article .desc {
    margin: 1em;
}

.recent-articles, .featured-article {
    display:inline-block;
    vertical-align:top;
}

.featured-article {
    display:inline-block;
    min-width:50%;
}

h4 {
    margin: 1em;
}

:not(.more-articles) > .article-card {
  display:block;
  border: 1px solid #AAA;
  border-radius: 15px;
  padding:0.25em;
  margin:1em;
  width:100%;
}

.more-articles > .article-card {
  display:inline-block;
  border: 1px solid #AAA;
  border-radius: 15px;
  padding:0.25em;
}


@media only screen and (max-width: 767px) {
.more-articles > h3,
.recent-articles > h3 {
  margin-left:1em;
}
 .recent-articles, .featured-article {
    width:90%;
 }
 .more-articles > .article-card {
    width:90%;
    margin: 0.5em;
 }
 .card {
 	border:1px solid #AAA;
 	border-radius:15px;
 	display:inline-block;
 }
}

@media only screen and (min-width: 768px) {
h3 {
	margin:0.5em 0;
}
.recent-articles h3 {
  margin-left:1em;
}
 .recent-articles, .featured-article {
    width:45%;
 }
 .more-articles > .article-card {
   min-width:450px;
 }
 .card {
	border:1px solid #AAA;
	border-radius:15px;
	max-width: 20%;
	min-width: 400px;
	display:inline-block;
	height: 425px;
 }
}


.article-body {
    margin:1em;
    font-size:125%;
}

.episode:not(.card) h3:not(.transcript) {
    font-size: 200%;
}

h3.transcript {
    font-size:150%;
    border-top: 1px solid #CCC;
    margin-top:1em;
    padding-top:1em;
    margin-bottom:1em;
}

.episode:not(.card) .small {
    font-size: 120%;
}

.duration {
    font-size:100%;
//    font-style:italic;
}

.small {
	color:#888;
	font-weight:bold;
	margin-bottom:0.5em;
}

:not(.card) .desc {
    font-size:125%;
}

.card .desc {
    font-size:120%;
}

h1, h2 {
	font-size: 200%;
	border-image: linear-gradient(to right, #DDD, #AAF, #FFF) 1;
}

h1.full, h2.full {
	margin:0.5em 0;
}

h1:not(.full),
h2:not(.full) {
	border-bottom: 1px solid #DDD;
	margin:0 0.5em;
}

h2 {
    margin:0 0.5em;
}

body.dark a{
	color:#f5f5dc;
}
a {
    color: #008;
    text-decoration:none;
    font-weight:bold;
}
a:hover {
    color: #00F;
    text-decoration: underline;
}
a:visited {
    color: #004;
}

.quote {
    padding-left: 2.5em;
    font-style:italic;
}

.foot {
	padding: 1em;
	width:75%;
	margin: 0 auto;
	display:block;
}

.foot ul {
	list-style-type:none;
	padding:0;
	display:block;
}

.foot li {
	display:inline-block;
}

.foot, .foot i {
	color:#fff;
}

.foot i {
	margin-left:0;
	margin-right: 1em;
	margin-top:0.5em;
	font-size:150%;
}

.foot-container {
	//background-image: linear-gradient(180deg, rgba(255,0,0,0) 2%, rgba(66,66,0,1) 49%, rgba(66,66,0,1) 49%);
	margin-top:1em;
	font-size:80%;
	background:#75756e;
	width:100%;
	padding: 1.25rem 0;

	position:static;
	left:0;
	flex-shrink: 0;
}

.social {
	float:right;
}