/*I have to admit, this is a mess and I'm too scared to try and clean it up*/

/*Cancel out the weird stuff section tags do to h1 tags*/
h1 {font-size: 2em;}

img {max-width: 100%;}

.title_header {
	margin-bottom: 7%;
	padding-bottom: 5px;
	background-color: #253237;
	border-bottom-left-radius: 50px;
	border-bottom-right-radius: 50px;
	color: #F07167;
	overflow: hidden;
}

.title_header h1 {
	font-size: 45px;
	/* width: 49%; */
	margin-bottom: 0;
	padding-right: 2%;
	display: inline-block;
	letter-spacing: 4px;
	line-height: 1;
	border-right: 10px solid;
}

.title_header h3 {
	text-align: right;
	margin-bottom: 0;
}

#tagline {
	text-align: center;
	padding: 1%;
	font-style: italic;
	quotes: initial;
	display: block;
}

body>* {
	padding-left: 2%;
	padding-right: 2%;
}

nav ul {
	list-style-type: none;
	margin-top: 0;
	padding: 10px 0 0 0;
	text-align: center;
}

nav li {
	display: inline;
}

nav li:not(:first-child)::before {
	content: "\2014";
	margin-right: 5px;
}

a {
	text-decoration: none;
	font-size: 20px;
	color: #F07167;
	background-color: #253237;
	border: 1px solid;
	box-sizing: border-box;
	padding: 5px;
	width: auto;
}

a:hover {
	color: #F0F8FF;
	border-style: dashed;
	/* padding: 9px; */
	/* I literally did math here why	 */
	/* margin-right: 0px; */
}

.org-ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}

.introduction {
	text-align: center;
	margin-left: 10%;
	margin-right: 10%;
}

.big_link {
	text-decoration: none;
	font-size: 20px;
	border: 1px solid;
	padding: 10px;
	border-radius: 10px;
	color: #F07167;
	background-color: #253237;
}

.body_bottom {
	background-color: #253237;
	margin-top: 50px;
	padding-top: 5px;
	padding-bottom: 5%;
	padding-left: 2%;
	padding-right: 2%;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
}

.sub_header {
	text-align: center;
	margin-bottom: 5%;
	padding: 10px;
	line-height: 1;
	font-weight: 400;
	letter-spacing: 5px;
	font-size: 44px;
	/** font-family: sans-serif; **/
	color: #F07167;
	border-top: 5px solid;
	border-bottom: 5px solid;
}

.episode {
	margin: 10px;
	/**Don't set right padding**/
	padding: 1px 3% 30px;
	border: 5px #F07167;
	background-color: #CAE4F3;
	border-radius: 20px;
	flex: 1;
}

/*** article styling ***/
.article-teaser article,
.article-teaser article a {
	/* This isn't necessary, I wrapped the teasers in an article tag */
	display: block;
	padding-bottom: 10px;
	margin-right: 5%;
	margin-left: 5%
}

/*** Yeah put the styling in the not hover selectors, sorry IE11 ***/
.article-teaser article a {
	text-decoration: underline;
	color: #67E6F0;
	margin-bottom: 4px;
}

.article-teaser article a:hover {
	color: white;
	text-decoration: none;
}

.article_body {
	text-align: justify;
	font-size: 18px;
	padding-left: 15%;
	padding-right: 15%;
}

.article_body a:not(.big_link) {
	background-color: inherit;
	font-size: inherit;
	border: none;
	padding: inherit;
	margin: inherit;
}

.article_body a:not(.big_link):hover {
	color: green;
}

/* Centers the go back button */
.article_body section {
	text-align: center;
}

/*** Episode styling ***/
.episode_header {
	margin-bottom: 5px;
}

.episode_sub_title {
	font-weight: 100px;
	font-style: italic;
	margin-top: 5px;
}

.episode hr {
	display: block;
	margin-bottom: 25px;
}

.flex_container {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	flex-basis: 100%;
}

pre {
	overflow-x: auto;
	border: 2px solid;
	padding: 10px;
}

html,
body {
	background-color: #F0F8F0;
	font-family: Roboto, Helvetica, sans-serif;
	/** https://stackoverflow.com/a/25218797 **/
	display: flex;
	flex-flow: column;
	/* width: 100%; */
	margin: 0;
	/* display: table; */
}

footer {
	text-align: center;
	/* display: table-row; */
	background-color: #253237;
	color: #F07167;
	overflow: hidden;
}

/* Special fancy styles */
#HDD:after {
	/*pseud elements are stylesheet only, not inline */
	content: attr(data-text)
}