/*MAIN BOIS*/
html {
	
	
	/*INDEX BACKGROUND (placeholder)*/
	background-image: url('../images/BG/Uncanny/TheUncannyRev.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position:center;
	background-clip: initial;
	
}

/*BASE*/
.holder {
		border: 1px none black;
	/*Image*/
		background-size: contain;
		background-repeat: no-repeat;
		background-position:center;
	/*Size & Location*/
		height:550px;
		min-width:472px;
		max-width:1100px;
		margin:auto;
		margin-top:8vh;
		position:relative;
		display:block;
		opacity:1;
}
/*Holder Sub (that's a lotta subs ngl*/
.border {
	/*Decor*/
		border: 40px solid transparent;
		border-image:url('../images/borders-n-bgs/teal_border.png') 30 round;
		background-image:url('../images/borders-n-bgs/bgtest.png');
		
	/*Actual stuff*/
		width:auto;
		min-width:320px;
		max-width:900px;
		height:100%;
		position:relative;
		margin-left:8%;
		margin-right:8%;
		border-radius:8px;
		
	/*Grid*/
		display: grid;
		grid-template-areas:
			"header header header"
			"content content content";
		grid-template-rows: 1fr 6fr;
		gap:1px;
		padding:5px;
		overflow:auto;
		scrollbar-width:thin;
		scrollbar-color:rgb(150,169,169) rgb(0,0,0,0);
}
/*----WEIRD STUFF AHEAD (imo)----*/
/*Border Sub*/
	.border header.header {
			grid-area: header;
		/*Decor*/
			border:5px solid rgb(23,42,42);
			border-radius:8px;
			background-image:url('../images/borders-n-bgs/bgtest.png');
			background-position-y:-10px;
			background-position-x:-10px;
			font-family:monospace;
			font-size:50px;
			font-weight:10;
			letter-spacing:10px;
			text-align: center;
			justify-content:center;
			align-items:center;
			color:white;
		/*Stuff*/
			display:flex;
			height:60px;
			position:sticky;
			top:-5px;
			padding:5px;
	}
	
@media (max-aspect-ratio: 1) {.border header.header{font-size:35px; letter-spacing:5px;}}
	
	.border div.content {
		grid-area: content;
		padding:5px;
	}

	.image-grid {
		display:grid;
		grid-template-columns: 1fr 1fr;
		gap:1.5rem;
		
	}
/*image-grid Sub*/
		.image-grid div {
			border:5px double rgb(10,10,90,1);
			border-radius:8px;
			color:white;
			min-width:250px;
			height:10rem;
			display:block;
			justify-content: center;
			text-align:center;
			margin-right:2vw;
			margin-left:2vw;
			padding:5px;
		}

		.image-grid img {
			width:90%;
			height:90%;
			object-fit:contain;
			image-rendering:pixelated;
			
		}
		/*Gets rid of weird border when empty*/
		.image-grid img:not([src]) {
			visibility:hidden;
		}
@media (max-aspect-ratio: 1.3) { .image-grid { grid-template-columns: 1fr; } .holder {margin-top:6vh; height:560px;} }
/*Thank you TabF5 (used as a reference) and Stack Overflow :](first thing I saw when searching this up but for some reason I was annoyed and stubborn when looking at it)*/


/*--------END OF WEIRD STUFF--------*/

/*----Decor----*/

/*Required to stop overflow issue*/
.decorholder {
		border: 40px solid transparent;
	/*Actual stuff*/
		width:auto;
		min-width:330px;
		max-width:900px;
		height:560px;
		position:relative;
		margin-left:8%;
		margin-right:8%;
		
		top:-640px;
		left:0px;
		opacity:1;
}
@media (max-aspect-ratio: 1.3) {.decorholder{top:-650px; height:570px;}}
/*That was annoying >_> all this just to avoid the overflow. 
At least I could make a decor now if I wanted to*/

	.goback {
		border:1px none white;
		position:absolute;
		top:-50px;
		right:-70px;
		font-family:monospace;
		font-size:10px;
		text-align:center;
		letter-spacing:1px;
		color:white;
		opacity:.5;
	}
	
.wires {
	/*Image*/
		background-image: url('../images/UWires.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position:center;
	/*Stuff*/
		border: 1px none white;
		width:100px;
		height:231px;
		position:absolute;
		top:0px;
		left:-138px;
		image-rendering:high-quality; /*I don't think this does anything >_>*/
}

.buttons {
	/*Image is inside div*/
	/*Stuff*/
		all:initial;
		border: 1px none white;
		width:35px;
		height:210px;
		position:absolute;
		top:0px;
		right:-74.8px;
		image-rendering:high-quality;
}

.bottom {
	/*Stuff*/
	border: 1px solid transparent;
	width:100%;
	height:40px;
	position:absolute;
	bottom:-80.1px;
	left:50%;
	transform:translateX(-50%);
	display:table;
	padding:0px;
}
/*Bottom Subs*/
	.bottomleft {
		display:table-cell;
		border:1px none white;
		background-image:url('../images/UBottomLeft.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position:center;
		float:left;
		width:62.2px;
		height:100%;
	}
	.bottommid {
		display:table-cell;
		border:1px none white;
		background-image:url('../images/UBottomMid.png');
		background-size: contain;
		background-position:center;
		position:relative;
		width:100%;
		height:100%;
	}
/*BottomMid Sub*/
		.bottomtext {
			border:1px p white;
			text-align:center;
			position:absolute;
			top:2vh;
			left:50%;
			transform:translateX(-50%);
			font-size:10px;
			font-weight:10;
			letter-spacing:2px;
			color:white;
			opacity:.5;
		}
		
	.bottomright {
		display:table-cell;
		border:1px none white;
		background-image:url('../images/UBottomRight.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position:center;
		float:right;
		width:62.2px;
		height:100%;
		
		
	}
/*Bottom Sub Behind (This is so the separation between imgs are less visible)*/
	.bottombehind {
	/*Stuff*/
	border: 1px solid transparent;
	background-color:rgb(67,89,89);
	width:90%;
	height:36px;
	position:absolute;
	bottom:-78px;
	left:50%;
	transform:translateX(-50%);
	padding:0px;
	border-radius:10px;
}