@font-face {
	font-family: SourceSansPro-Light;
	src: url(fonts/SourceSansPro-Light.otf);
}

/*INITIAL SETTINGS*/

html	{
	width: 100%;
	height: 100%;
}

body	{
	width: 100%;
	height: 100%;
	color: #FFFFFF;
	background-color: #6F6855;
	text-align: center;
	font-family: SourceSansPro-Light;
	margin-top: 0%;
}

img	{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

header	{
	/*Set header position absolute to remove from flow and specify height*/
	position: absolute;
	height: 5em;
	/*fix spacing*/
	left: 0em;
	top: 0.1em; 
	width: 100%;
	color: #FFFFFF;
	border-left-style: none;
	border-right-style: none;
	border-top-style: double;
	border-bottom-style: double;
	border-color: #FFFFFF;

}

h1	{
}

/*HIDE DEFAULT ON MOBILE*/
.default {
	visibility: hidden;
}

/*TRIPTYCH*/
.triptych {
	display: grid;
	grid-template: "a b c";
}

.triptych img {
	padding-left: 1em;
}

/*THUMBNAILS*/
.thumb {
	padding: 10px;
}

.thumb > figure {
	margin: auto;
}

.thumb:hover .popup {
	visibility: visible;
	opacity: 1;
}

/*POPUP*/
.popup {
	color: rgba(255, 255, 255, 1);
	background-color: rgba(18, 52, 86, 1);
	border-radius: 12px;
	position: absolute;
	width: 100px;
	margin-top: 1em;
	margin-left: -1em;
	padding-top: 1em;
	padding-bottom: 1em;
	box-shadow: -5px 5px 2px rgba(18, 52, 86, 0.5); 
	visibility: hidden;
	opacity: 0;
	transition: visibilty 0.3s linear, opacity 0.3s linear;
}

/*SMALL MOBILE*/
.stack {
	display: block;
}

.stack > * {
	margin-top: 0em;
	padding-top: 6em;
	display: inline-block;
	width: min-content;
}

.side_bar {
	display: none;
}

/*TABLET BREAKPOINT*/
@media only screen and (min-width: 576px){

	/*BACKGROUND IMAGE TO PREVENT BLANK*/

	.stack {
		display: grid;
	}

	.stack > * {
		/*Remove top margin*/
		margin-top: 0em;
		/*Offset to stop jump to top*/
		padding-top: 6em;
		grid-row: 1;
		grid-column: 1;
		visibility: hidden;
	}

	/*SHOW DEFAULT*/
	.stack > .default {
		visibility: visible;
	}

	/*HIDE DEFAULT IF TARGET*/
	.stack:has(figure:target) > .default{
		visibility: hidden;
	}
	/*SHOW TARGET*/
	.stack > *:target {
		visibility: visible;
	}

	.side_bar {
		margin-top: 0em;
		/*Offset to stop jump to top*/
		padding-top: 4.7em;
		display: block;
		float: right;
		margin-right: 10%;
		margin-left: 10%;
	}
	/*TRIPTYCH TABLET*/
	.triptych {
		display: grid;
		grid-template: "a b c";
		justify-content: space-between;
	}

	.triptych img {
		width: 150px;
	}

	.triptych figcaption {
		grid-column-start: 2;
	}
}

/*LAPTOP BREAKPOINT*/
@media only screen and (min-width:768px) {

	.side_bar {
		margin-top: 0em;
		/*Offset to stop jump to top*/
		padding-top: 5.4em;
		display: grid;
		grid-template: 	"a b";
		margin-left: 5%;
		margin-right: 5%;

	}

	/*TRIPTYCH LAPTOP*/
	
	body:has(figure:target.triptych) > .side_bar {
		grid-template: "a";
	}	
	

	.triptych img {
		width: 200px;
	}
}

/*DESKTOP BREAKPOINT*/
@media only screen and (min-width:1080px) {

	.side_bar {
		margin-top: 0em;
		/*Offset to stop jump to top*/
		padding-top: 5.4em;
		display: grid;
		grid-template: 	"a b c" 
		"d e f"
		"g h i";
		margin-left: 5%;
		margin-right: 5%;
	}
	
	/*TRIPTYCH DESKTOP*/


	.triptych img {
		width: 250px;
	}

	/*LARGE MONITOR DESKTOP BREAKPOINT*/
	@media only screen and (min-width:1280px) {

		.side_bar {
			margin-top: 0em;
			/*Offset to stop jump to top*/
			padding-top: 5.4em;
			display: grid;
			grid-template: 	"a b c d"
			"e f g h"
			"i j k l";
			margin-left: 5%;
			margin-right: 5%;
		}

		/*TRIPTYCH LARGE MONITOR DESKTOP*/

		.triptych img {
			width: 300px;
		}
		body:has(figure:target.triptych) > .side_bar {
			grid-template: "a b";
		}
	}
	
	/*EXTRA LARGE MONITOR DESKTOP BREAKPOINT*/
	@media only screen and (min-width:1400px) {
		.side_bar {
			margin-top: 0em;
			/*Offset to stop jump to top*/
			padding-top: 5.4em;
			display: grid;
			grid-template: 	"a b c d e"
			"f g h i j"
			"k l m n o";
			margin-left: 5%;
			margin-right: 5%;
		}

		/*TRIPTYCH EXTRA LARGE MONITOR*/
	
		.triptych img {
			width: 350px;
		}
}