/*
Name:				Mini
Description: 		Stylesheet for mobile devices and smaller viewports
Author:				Sean O'Sullivan
Version:			2023-10-08
*/

@media screen and (max-width: 950px) {

	:root {
		/* top | right | bottom | left */
		--font-body-size: 17px;
		--section-padding: 35px 30px 40px 30px;
	}
	
	#container-header {
		text-align: center;
	}
	
	ul.navigation li {
	  padding-right: 20px;
	  padding-left: 20px;
	}

}

@media screen and (max-width: 500px) {
	
	:root {
		--font-body-size: 17px;
		--section-padding: 35px 30px 40px 30px;
	}
	
	.block {
		margin: 0px 0px 40px 0px;
	}
	
	.footer_social_twitter {
	  height: 40px;
	}
	
	.footer_social_linkedin {
	  height: 40px;
	}
	
	.footer_social_reddit {
	  height: 40px;
	}
	
	.footer_social_dribbble {
	  height: 40px;
	}
	
	.footer_social_rss {
	  height: 40px;
	}
	
	.footer_social_github {
	  height: 40px;
	}
	
	.figure-float-left {
		float: none;
		margin: auto;
		display: block;
		max-width: 90%;
	}
	
	.figure-float-right {
		float: none;
		margin: auto;
		display: block;
		max-width: 90%;
	}
	
	.blog-article-table td {
	  text-align: left;
	  padding-left: 0px;
	  padding-right: 8px;
	  padding-top: 10px;
	  padding-bottom: 10px;
	  vertical-align: top;
	}
	
	/* Provides a border around embedded Videos using the Blocks feature */
	.container-main-projecthighlight figure iframe {
		height: 240px;
	}

}