/*

Starting a new blog post, 
common css:

.m_bottom_xxs - xxl
.m_top_xs - xl
.header_s
.text_caption
.italic & .centered

.link_list --> this is your special line-height p + br list.
.list_spacing --> all the right spacing for ol and ul

.embed_img_s
.embed_img_l

.wrap_video, .wrap_gif > .embed_video, .embed_gif (see bottom of css and look at past posts for examples)

common html
	<!--             

	<div class="grid_main m_bottom_m"></div>

	<div class="divider_pop divider_inline"></div>
	<h2 class="header_l">Words</h2>
	<h3 class="header_m">Step</h3>

	<img class="embed_img_s" src="assets/img/01.png" alt=" ">
	<img class="embed_img_l" src="assets/img/01.png" alt=" ">

	<p class="text_caption">Source: <a href="https://en.wikipedia.org/wiki/Simpson%27s_paradox#Berkeley_gender_bias_case">Wikipedia</a></p>

	<a class="sup_link" href="#foot09"><sup>9</sup></a>.</p>
	-->
*/

/* 
NOTES:

- Use a minify tool & gzip to remove comments

- Media queiries are ADDITIVE, rather than SUBTRACTIVE, going from small screen to large

- REM vs EM: 
	- With rem (relative EM) everything is based on the font-size set for at the HTML definition level. 
	- Type & spacing sizes scale relative to that base size because all units are a multiplyer. 
		1REM = 100% of that base font size, 
		1.25 REM = 125%, 
		.5REM = 50% etc

- CSS best practice for extensibility is to separate LAYOUT from STYLES. e.g. DO NOT combine spacing (margin & padding) with style (border, color)
	- There are a few exceptions applied within the styles below to try and make some things easier/faster for blog writing
	- In general this means MORE classes in your style sheet that can be combined to build into a set of styles rather than one class = one style.

- The above best practice includes NOT tying a specific font size / style to a specific HTML element.

*/



/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* RESETS		*/

/* Get rid of browser added details*/

body, h1, h2, h3, h4, p, img, ol, ul, li {
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4 {
	font-weight: normal;
}



/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* VARIABLES 	*/

/* changing the variable value here will change it everywhere it's used*/

:root {
	/* grays */
	--black: #111;
	--body_color: #212121;
	--body_gray: #555;
	--light_gray: #999;
	--link_gray: #ddd;

  	/* color */
	--pop_color: #004AC3;
	--light_pop_color: #0060FA;
	--light_blue: #659dfd;
	--red: #d72b3f;
	--teal: #55ACB2;

	/* space sizes */
	--space_xxl: 5rem;
	--space_xl: 3rem;
	--space_l: 2rem;
	--space_m: 1.5rem;
	--space_s: 1rem;
	--space_xs: .8rem;
	--space_xxs: .5rem;
	--space_xxxs: .25rem;
}



/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* PAGE LAYOUT 	*/
/*
	.page_header
	.page_main
	.page_footer
*/
.page_header, .page_main, .page_footer{
	width: 100%;
}
.page_footer{
	font-family: 'Noto Sans', sans-serif;
	padding: 1.5rem 0 3rem 0;
}



/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* THE GRID 	*/
/* 
	.grid_wrapper = required wrapper for grid

	.grid_wrapper

	|					|.grid_main|				 |
	
	|				|	.grid_plus1	|				 |
	
	|			|	-	.grid_plus2	-	|			 |
	
	|		|	-	-	.grid_plus3	-	-	|		 |

	||	-	-	-	-	.grid_full	-	-	-	-	||


Grid item content needs is left-aligned by default (called "justify-items: start" or "justify-self: start" in css docs). Witthout this certain embeds like video and charts disappear.

*/
.grid_wrapper{
	display: grid;
	grid-template-columns: minmax(10px, 3fr) repeat(3, minmax(5px, 1fr)) [col-main] minmax(30%, 700px) repeat(3, minmax(5px, 1fr)) minmax(10px, 3fr);
}
.grid_main{
	display: flex;
	flex-direction: column;
	grid-column: col-main;
	width: 100%;
}
.grid_full{
	grid-column: 1 / span 9;
	width: 100%;
}

.grid_plus1, .grid_plus2, .grid_plus3 {
	grid-column: 3 / span 5;
	width: 100%;
}
/* Media query width adjustments */
@media screen and (min-width:  1000px){
	.grid_plus1{
		grid-column: 4 / span 3;
	}
	.grid_plus2{
		grid-column: 3 / span 5;
	}
	.grid_plus3{
		grid-column: 2 / span 7;
	}
}
/* All children of the .grid_X class will be centered with a zero top/bottom margin */
.grid_plus1 > *, .grid_plus2 > *, .grid_plus3 > *, .grid_full > * {
	margin: 0 auto;
}



/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* SPACING 		*/

/* 
	- Add these classes to mark up elements to add spacing to them. 
	- Start with margin classes first (outside) rather than padding (inside) when you can 
	- Using a pre-defined scale of sizes like this creates consistency.

	type: 			.m_ = margin 
					.p_ = padding

	positioning: 	_bottom
					_top
					_right
					_left 

	(defined as variables at the top)
	size: 			_xxl - 5rem
					_xl - 3rem
					_l - 2rem
					_m - 1.5rem
					_s - 1rem
					_xs - .8rem
					_xxs .5rem
*/
.m_bottom_xxl, div p.m_bottom_xxl, div img.m_bottom_xxl, div.m_bottom_xxl, div h1.m_bottom_xxl, div h2.m_bottom_xxl, div h3.m_bottom_xxl, div h3.m_bottom_xxl, div h4.m_bottom_xxl {
	margin-bottom: var(--space_xxl);
}
.m_bottom_xl, div p.m_bottom_xl, div img.m_bottom_xl, div.m_bottom_xl, div h1.m_bottom_xl, div h2.m_bottom_xl, div h3.m_bottom_xl, div h3.m_bottom_xl, div h4.m_bottom_xl {
	margin-bottom: var(--space_xl);
}
.m_bottom_l, div p.m_bottom_l, div img.m_bottom_l, div.m_bottom_l, div h1.m_bottom_l, div h2.m_bottom_l, div h3.m_bottom_l, div h3.m_bottom_l, div h4.m_bottom_l {
	margin-bottom: var(--space_l);
}
.m_bottom_m, div p.m_bottom_m, div img.m_bottom_m, div.m_bottom_m, div h1.m_bottom_m, div h2.m_bottom_m, div h3.m_bottom_m, div h3.m_bottom_m, div h4.m_bottom_m {
	margin-bottom: var(--space_m);
}
.m_bottom_s, div p.m_bottom_s, div img.m_bottom_s, div.m_bottom_s, div h1.m_bottom_s, div h2.m_bottom_s, div h3.m_bottom_s, div h3.m_bottom_s, div h4.m_bottom_s {
	margin-bottom: var(--space_s);
}
.m_bottom_xs, div p.m_bottom_xs, div img.m_bottom_xs, div.m_bottom_xs, div h1.m_bottom_xs, div h2.m_bottom_xs, div h3.m_bottom_xs, div h3.m_bottom_xs, div h4.m_bottom_xs {
	margin-bottom: var(--space_xs);
}
.m_bottom_xxs, div p.m_bottom_xxs, div img.m_bottom_xxs, div.m_bottom_xxs, div h1.m_bottom_xxs, div h2.m_bottom_xxs, div h3.m_bottom_xxs, div h3.m_bottom_xxs, div h4.m_bottom_xxs {
	margin-bottom: var(--space_xxs);
}
.m_bottom_0, div p.m_bottom_0, div img.m_bottom_0, div.m_bottom_0, div h1.m_bottom_0, div h2.m_bottom_0, div h3.m_bottom_0, div h3.m_bottom_0, div h4.m_bottom_0{
	margin-bottom: 0;
}
.m_right_l{
	margin-right: var(--space_l);
}
.m_right_m{
	margin-right: var(--space_m);
}
.m_right_s{
	margin-right: var(--space_s);
}
.m_right_xs{
	margin-right: var(--space_xs);
}
.m_left_s{
	margin-left: var(--space_s);
}
.m_left_xs{
	margin-left: var(--space_xs);
}
.m_top_xl, div p.m_top_xl, div img.m_top_xl {
	margin-top: var(--space_xl);
}
.m_top_l, div p.m_top_l, div img.m_top_l {
	margin-top: var(--space_l);
}
.m_top_m, div p.m_top_m, div img.m_top_m {
	margin-top: var(--space_m);
}
.m_top_s, div p.m_top_s, div img.m_top_s {
	margin-top: var(--space_s);
}
.m_top_xs, div p.m_top_xs, div img.m_top_xs {
	margin-top: var(--space_xs);
}

/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* TYPE STYLING */

html{
	font-family: georgia, serif;
	font-size: 18px;
	box-sizing: border-box;
}
@media screen and (min-width: 700px){
	html {
		font-size: 22px;
	}
}
body{
	color: var(--body_color);
	line-height: 1.525;
}
.header_xl, .header_l, .header_m, .header_s{
	font-family: 'Noto Sans', sans-serif;
	font-weight: bold;
}
.header_xl{
	font-size: 2rem;
	line-height: 1.2;
}
@media screen and (min-width: 700px){
	.header_xl{
		font-size: 2.2rem;
	}
}
.header_l{
	font-size: 1.75rem;
}
.header_m{
	font-size: 1.25rem;
}
.header_s{
	font-size: 1rem;
}
.header_l, .header_m, .header_s{
	line-height: 1.3;
}
.text_xl{
	font-size: 1.75rem
}
.text_l{
	font-size: 1.25rem
}
.text_s{
	font-size: 0.875rem;
}
.text_xs{
	font-size: 0.75rem;
}

	/* ============ */
	/* ============ */
	/* ============ */
	/* ============ */

	/* CUSTOM TYPE 	*/

	/* switch to sans serif */
	.text_sans{
		font-family: 'Noto Sans', sans-serif;
	}

	/* switch colors */
	.text_supporting{
		color: var(--body_gray);
	}
	.text_blue{
		color: var(--pop_color);
	}

	/* what they look like */
	.italic{
		font-style: oblique;
	}
	.center{
		text-align: center
	}



/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* LINKS 		*/

a {
	background: transparent;
	box-shadow: inset 0 -3px var(--link_gray);
	color: var(--body_color);
	padding-bottom: 1px;
	text-decoration: none;

}
a:hover{
	box-shadow: inset 0 -3px var(--pop_color);
	color: var(--black);
}
a:visited{
	color: var(--body_color);
}
a:link, a:hover, a:hover, a:active{
	transition-property: all;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: cubic-bezier(0.165, 0.63, 0.14, 0.82);
    -moz-transition-timing-function: cubic-bezier(0.165, 0.63, 0.14, 0.82);
    -ms-transition-timing-function: cubic-bezier(0.165, 0.63, 0.14, 0.82);
    -o-transition-timing-function: cubic-bezier(0.165, 0.63, 0.14, 0.82);
    transition-timing-function: cubic-bezier(0.165, 0.63, 0.14, 0.82);
}

/* Brighter link styling*/
a.link_vibrant, a.link_vibrant:visited{
	color: var(--pop_color);
	border-bottom: 2px solid var(--pop_color);
	box-shadow: none;
}
a.link_vibrant:hover{
	color: var(--light_gray);
	border-bottom: 2px solid var(--light_gray);
	box-shadow: none;
}

/* Make it look like normal text, good for jump / anchor links */
a.link_none{
	color: var(--body_color);
	display: inline;
	border: none;
	box-shadow: none;
	text-decoration: none;
}
a.link_none:hover{
	color: var(--body_color);
}



/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* CAPTIONS, QUOTES & HIGHLIGHTS */
.text_caption{
	color: var(--body_gray);
	font-size: .875rem;
	font-style: oblique;
	text-align: center;
}
.text_quote_short, .text_quote_long{
	border-top: 3px solid var(--teal);
	border-bottom: 3px solid var(--teal);
	font-family: 'Noto Sans', sans-serif;
	font-size: .9rem;
	font-style: italic;
	margin: var(--space_m) auto var(--space_s);
	padding: var(--space_s) var(--space_m) var(--space_m);
	
}
@media screen and (min-width: 700px){
	.text_quote_short, .text_quote_long{
		max-width: 70%;
	}
	.text_quote_long{
		max-width: 80%;
	}
}
.text_quote_long a{
	margin-left: .25rem;
}
.text_quote_long p{
	margin-bottom: var(--m_bottom_m);
}
.text_quote_long p:last-child{
	margin-bottom: 0;
}

.special_highlight{
	background: #f5f5f5;
	border-left: 3px solid var(--body_gray);
	font-family: 'Noto Sans', sans-serif;
	font-size: 1rem;
	margin: var(--space_m) 0;
	padding: var(--space_xs) var(--space_s) 1.1rem;
}
div.special_highlight p{
	margin-bottom: 0;
}



/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* META INFO 	*/
/* For dates on games, blog posts, and also for the game details on the portfolio. */

.meta_list{
	color: var(--body_gray);
	font-family: 'Noto Sans', sans-serif;
	font-size: 0.875rem;
	margin-bottom: .25rem
}
.meta_list:last-child{
	margin-bottom: 0;
}
.meta_text{
	font-family: 'Noto Sans', sans-serif;
	font-size: .8rem;
	font-style: italic;
	font-weight: bold;
	letter-spacing: .02em;
	margin-right: .25rem;
	text-transform: uppercase;
}




/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* LIST STYLING */

ul.plain_style{ 
	list-style: none;
}

.list_inline li{
	display: inline;
}

.list_spacing li{
	line-height: 1.4;
	margin-bottom: var(--space_xxxs);
	padding-left: .3rem;
}

.link_list{
	line-height: 1.7;
}
.tight_list p{
	margin-bottom: .25rem;
}
.tight_list p:last-child{
	margin-bottom: 1rem;
}
div.blog_format ul.plain_list{
	margin-left: 0;
}

/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* CODE SNIPPETS */

pre, code{
	font-family: 'Inconsolata', monospace;
	font-size: .9rem;
	line-height: 1.3em;
	background: #f0f3f3;
	padding-top: 0.5rem;
	padding-left: 1rem;
	padding-bottom: .5rem;
	overflow:auto;
	width:auto;
}
code{
	background: #f5f5f5;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: .1rem .15rem;
	font-size: .85rem;
	color: var(--red); 
}



/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* FOOT NOTES 	*/

.sup_link{
	margin-left: .25rem;
}
sup{
	color: var(--pop_color);
	font-size: .7rem;
	font-weight: bold;
}



/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* IMAGES */

/* 
- Only double and triple need classes
- All are structured like this:

	<div class="grid_plusX (img_X)">
		<img>
		(<img>)
		(<img>)

- None of this will currently work with .grid_mains
*/

.img_block {
	display: block;
}

.img_double, .img_triple, img{
	font-size: 0;
	line-height: 0;
}
.img_double, .img_triple{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	min-width: 100%;
}
.img_double img:first-child{
	margin-bottom: .5rem;
}
.img_triple img{
	margin-bottom: .5rem;
}
.img_triple img:last-child{
	margin-bottom: 0;
}
@media screen and (min-width: 600px){
	.img_double img:first-child{
		margin-bottom: 0;
	}
	.img_triple img{
		margin-bottom: 0;
	}
}

/*
HOW TO USE ON THE HTML SIDE  Look at Visualizing Commutes or Portfolio for examples
But the following are the sizes to use for single, double, and triple


>> SINGLE IMAGE -- don't forget to close your div tags!
	PLUS ONE
	<div class="grid_plus1">
		<img ... sizes="(min-width:1000px) calc(((100vw - 700px) * .165) + 700px), calc(100vw - 45px)"

	PLUS TWO
	<div class="grid_plus2">
		<img ... sizes="(min-width:1000px) calc(((100vw - 700px) * .325) + 700px), calc(100vw - 45px)"

	PLUS THREE
	<div class="grid_plus3">
		<img ... sizes="(min-width:1000px) calc(((100vw - 700px) * .4875) + 700px), calc(100vw - 45px)"



>> DOUBLE IMAGE -- don't forget to close your div tags!
	PLUS ONE
	<div class="grid_plus1 img_double">
		<img ... sizes="(min-width:2500px) calc(((100vw - 700px) * 0.0833) + 360px), (min-width:1000px) calc(((100vw - 700px) * 0.0833) + 335px), (min-width:750px) calc(((100vw - 700px) * 0.0833) + 345px), (min-width:600px) calc(50vw - 40px), calc(100vw - 45px)"
			x2

	PLUS TWO
	<div class="grid_plus2 img_double">
		<img ... sizes="(min-width:2500px) calc(((100vw - 700px) * 0.165) + 350px), (min-width:750px) calc(((100vw - 700px) * 0.15) + 340px), (min-width:600px) calc(50vw - 40px), calc(100vw - 45px)"
			x2

	PLUS THREE
	<div class="grid_plus3 img_double">
		<img ... sizes="(min-width:2500px) calc(((100vw - 700px) * 0.25) + 340px), (min-width:1000px) calc(((100vw - 700px) * 0.25) + 330px), (min-width:750px) calc(((100vw - 700px) * 0.18) + 330px), (min-width:600px) calc(50vw - 40px), calc(100vw - 45px)"
			x2

>> TRIPLE IMAGE -- don't forget to close your div tags!
	PLUS ONE
	<div class="grid_plus1 img_triple">
		<img ... sizes="(min-width:2500px) calc(((100vw - 700px) * 0.053) + 240px), (min-width:750px) calc(((100vw - 700px) * 0.053) + 220px), (min-width:600px) calc(32vw - 30px), calc(100vw - 45px)"
			x3

	PLUS TWO
	<div class="grid_plus2 img_triple">
		<img ... sizes="(min-width:2500px) calc(((100vw - 700px) * 0.1) + 250px), (min-width:750px) calc(((100vw - 700px) * 0.1) + 225px), (min-width:600px) calc(32vw - 30px), calc(100vw - 45px)"
			x3

	PLUS THREE
	<div class="grid_plus3 img_triple">
		<img ... sizes="(min-width:2500px) calc(((100vw - 700px) * 0.15) + 260px), (min-width:1000px) calc(((100vw - 700px) * 0.15) + 225px), (min-width:750px) calc(((100vw - 700px) * 0.15) + 215px), (min-width:600px) calc(32vw - 30px), calc(100vw - 45px)"
			x3

*/


/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* Divider lines */
.divider_gray,
.divider_pop,
.divider_light,
.divider_line{
	width: 192px;
	content: ' ';
	justify-self: center;
}
.divider_gray, .divider_pop, .divider_light{
	background-repeat: repeat; 
	height: 12px;
}
.divider_gray{
	background-image: url("data:image/svg+xml,%3Csvg height='12' width='36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 0h30v30h-30z' fill='%23fff'/%3E%3Ccircle cx='6' cy='6' fill='%23666' r='3'/%3E%3C/svg%3E");
}
.divider_pop{
	background-image: url("data:image/svg+xml,%3Csvg height='12' width='36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 0h30v30h-30z' fill='%23fff'/%3E%3Ccircle cx='6' cy='6' fill='%23004AC3' r='3'/%3E%3C/svg%3E");
}
/* For footer only */
.divider_line{
	background: var(--light_gray);
	height: .15rem;
	margin: 0 auto var(--space_l);
	width: 240px;
}
/* This is dividers within grid_main, not at the grid level */
.divider_inline{
	margin:  var(--space_l) auto var(--space_xl);
}

/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* UNIVERSAL, GLOBAL NAV */

.nav_flex{
	display: flex;
	flex-flow: column;
	align-items: center;
	width: 90vw;
	max-width: 860px;
	margin: var(--space_xxs) auto var(--space_xl);
}
@media screen and (min-width: 760px){
	.nav_flex{
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}	
}
.header_nav a{
	box-shadow: none;
	color: var(--pop_color);
	font-family: 'Noto Sans', sans-serif;
	font-size: .9rem;
	font-weight: bold;
	padding-bottom: 2px;
}
.header_nav a:hover{
	color: var(--light_pop_color);
	box-shadow: inset 0 -3px var(--black);
}

.header_name a{
	border: none;
	box-shadow: 0;	
}



/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* HOME PAGE 	*/

/* HOME PAGE > SOCIAL LINKS */
ul.social_list{
	padding-top: 1rem;
	margin-bottom: var(--space_m);
}
.social_link{
	display: inline-block;
	font-family: 'Noto Sans', sans-serif;
	font-size: .8rem;
	font-weight: bold;
	letter-spacing: .01em;
	text-transform: uppercase;
	margin-bottom: var(--space_s);
	margin-right: var(--space_s);
}
.social_link:last{
	margin-right:0;
}
.social_link a{
	color: var(--pop_color);
	box-shadow: none;
	padding-bottom: 3px;
}
.social_link a:hover{
	color: var(--light_pop_color);
	box-shadow: inset 0 -3px var(--black);
}
.social_link svg{
	margin-right: .25rem;
}
@media screen and (min-width: 800px){
	.social_link{
		margin-bottom: 0;
	}
}

/* HOME PAGE > GAME GRID */
.game_flex{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.game_item{
	font-family: 'Noto Sans', sans-serif;
	width: calc(50vw - 30px);
}
.game_item_spacing:nth-child(odd){
	margin-right: var(--space_s);
}
@media screen and (min-width: 600px){
	.game_item{
		width: calc(32vw - 30px);
	}
}
@media screen and (min-width: 750px){
	.game_item{
		width: calc(((100vw - 700px) * 0.15) + 215px);
	}
	.game_item_spacing{
		margin-right: var(-space_s);
	}
	.game_item_spacing:nth-child(3n) {
		margin-right: 0;
	}	
}
@media screen and (min-width: 1000px){
	.game_item{
		width: calc(((100vw - 700px) * 0.15) + 225px);
	}
}
@media screen and (min-width: 2500px){
	.game_item{
		width: calc(((100vw - 700px) * 0.15) + 260px);
	}
}
a.game_item_link {
	border: none;
	box-shadow: none;
}
a.game_item_link:hover{
	color: var(--pop_color);
}

/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* PORTFOLIO */

.wrap_video_haptic{
	margin:  var(--space_s) auto  var(--space_l);
	overflow: hidden;
	padding-top: 38%;
	position: relative;
	width: 100%;
}

.wrap_video_goto_definition{
	margin:  var(--space_s) auto  var(--space_l);
	overflow: hidden;
	padding-top: 38%;
	position: relative;
	width: 100%;
}



/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* BLOG POSTS 	*/

/*	
REMINDER: THESE ARE VARIABLES DEFINED AT THE TOP AND USED ALL OVER;
	--space_xxl: 5rem;
	--space_xl: 3rem;
	--space_l: 2rem;
	--space_m: 1.5rem;
	--space_s: 1rem;
	--space_xs: .8rem;
	--space_xxs: .5rem;
*/


.blog_format p{
	margin-bottom: var(--space_s);
}
/* Define margin beneath the headers */
.blog_format h2{
	margin-bottom: var(--space_m);
}
.blog_format h3{
	margin-bottom: var(--space_s);
}
.blog_format h4{
	margin-bottom: var(--space_xs);	
}
/* Define margine above the headers */
.blog_format p + h2{
	margin-top: var(--space_m);
}
.blog_format p + h3,
.blog_format p + h4{
	margin-top: var(--space_s);
}
.blog_format ul, .blog_format ol {
	margin-left: var(--space_m);
}


/* Remove margin from something */
.m_none, div p.m_none{
	margin: 0;
}


/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* EMBEDS 		*/


/*  This class goes on the CHILD element. ex: 
	<div> .grid_plus2 
		<child> .embed_center
 */
.embed_center{
	margin: 0 auto;
}


/* IMAGES INLINE WITH BLOG POST */
/* For images that are < 700px wide: */
.embed_img_s{
	margin: var(--space_xxs) auto var(--space_m);
	max-width: 100%;
}
/* For images that are ≥ 700px wide: */
.embed_img_l{
	margin: var(--space_xxs) 0 var(--space_m);
	width: 100%;
}


/* VIDEO & GFYCAT EMBED
	- works for 16:9 aspect ratio videos, and 640x400ish gifs
	- remove explicit width/height definition from youtube provided code & gfycat code

	<div> .wrap_video
		<iframe> .embed_video

	<div> .wrap_giphy
		<iframe> .embred_giphy

	* Note for gfycat, the "fixed" iframe code is shorter and easy to copy/paste from. Look at Dino VR post
*/
.wrap_video, .wrap_gif, .wrap_unity{
	margin:  var(--space_s) auto var(--space_l);
	overflow: hidden;
	position: relative;
	width: 100%;
}
.wrap_video{
	padding-top: 56.25%;
}
.wrap_gif{
	padding-top: 63%;
}
.embed_unity{
	padding-top: 65%;
}
.embed_video, .embed_gif, .embed_unity{
	border: 0;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;	
}

.pixel {
	width: 1;
	height: 1;
	border: 0;
}

/* Because of the way CSS works, these spacing definitions need to be BELOW the wrap_video, wrap_gif definitions */

/*.wrap_video .m_bottom_xs{

}
.m_bottom_s{

}
.m_bottom_0{

}*/


/* ============ */
/* ============ */
/* ============ */
/* ============ */

/* Sepcial blog post specific styles found at bottom of each post 		*/