body {background-image:url("/img/mat/scan.png")}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;color: #EEE; text-decoration: none;}
hr{display:block;height:1px;border:0;border-top:5px double #a7a7a759;margin:1em 0;}

#container {
	width:100vw;
	font-family:CourierPrime,monospace;
	padding-bottom:50px;
	& h1 { 
		background-color: #fff;
		font-size: 2em;
		margin: 10px;
		color: #000;
		font-family: DINish, sans-serif;
		padding: 10px; width: fit-content;
		display: inline-block;
		position: absolute;
		right:1%;
	}

}

.gallery {
	border: 5px #fff;
	border-style: double none double none;
	padding: 30px;
	padding-top: 50px;
	margin-bottom: 20px;
	background-color:#000;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
	& > div {
		display:grid;
		grid-template-rows:1fr auto;
		padding:5px;
		max-width:95%;
		max-height:200px;
		font-family:DINish, sans-serif;
		border:5px double #3b3b3b;
		background-color:#000;
		color:#fff;
		font-size:0.8em;
		& > a {
			margin:auto;
			& img {
				max-width:100%;
				border:2px solid #3b3b3b;
				pointer-events:none
			}
		}
	}
}
.gallery-alt {
	display:grid;
	grid-template-columns:2fr 3fr;
	max-width:95%;
	margin:auto;
	border:5px #3b3b3b;
	border-style:solid double solid double;
	color:white;
	& > a {
		border-right:5px double #3b3b3b;
		& img {
			max-width:100%
		}
	}
	& > p {max-width:90%;margin:auto}
}

/*Back home button in Backlog, Context*/
.goback{background-color: white; color: #000; padding: 5px; position: fixed; left: 20px; top: 20px;}
.goback a:hover{background-color: #000; color: #EEE;}

.throb { animation: throba;
	animation-iteration-count: infinite;
	animation-duration: 1s;
	animation-direction:alternate-reverse;
	animation-timing-function: linear;
  }
  .throb:hover{animation:none;}
  @keyframes throba {
	from {outline: 5px solid #fff;}
	to {transform: 15px solid #fff;}
}

/*
███    ███  ██████  ██████  ██ ██      ███████      █████  ██████       ██ ██    ██ ███████ ████████ ███████ 
████  ████ ██    ██ ██   ██ ██ ██      ██          ██   ██ ██   ██      ██ ██    ██ ██         ██    ██      
██ ████ ██ ██    ██ ██████  ██ ██      █████       ███████ ██   ██      ██ ██    ██ ███████    ██    ███████ 
██  ██  ██ ██    ██ ██   ██ ██ ██      ██          ██   ██ ██   ██ ██   ██ ██    ██      ██    ██         ██ 
██      ██  ██████  ██████  ██ ███████ ███████     ██   ██ ██████   █████   ██████  ███████    ██    ███████ 
*/
@media only screen and (width<=1280px) {
	p {max-width:90%;margin:1em auto}
	#intro p {width:90%}
	.gallery {row-gap:10px}
}
@media only screen and (width<=640px) {
	.gallery-alt {
		grid-template-columns:1fr;
		& a {border:none}
		& p {margin:1em auto}
	}
}