#container {
	display:block;
	width:90vw;
	margin:0 5vw;
	padding-bottom:20px;
	image-rendering:pixelated
}

/* SCREEN ONE: splash art, nav, updates */
#screen-one {
	display:grid;
	grid-template-columns:2fr 1fr;
	gap:20px;
	width:100%;
	border:5px double #a7a7a759;
	border-top:none /* This property restores the original look of the border */}
	
	#screen-one-left { /* splash */
		position:relative;
		border-right:5px solid #a7a7a759}
		#splash-bg    {z-index:0;position:absolute;left:0;top:0;width:100%;height:100%}
		#splash-art   {z-index:1;position:relative;width:100%;aspect-ratio:4/3}
		#splash-title {z-index:2;position:absolute;left:0;top:0;max-width:500px}

	#screen-one-right { /* nav, updates */
		display:grid;
		grid-template-rows:auto 1fr;
		border-left:5px solid #a7a7a759}
		#updates {width:100%;border:none;height:100%}
		/* Navigation styling is handled in main.css */

/* SCREEN TWO: chat, links */
#screen-two {
	display:grid;
	grid-template-columns:2fr 3fr;
	gap:20px;
	margin-top:20px;
	width:100%;
	height:300px;
	border:5px double #a7a7a759}

	#screen-two-left { /* Chat */
		border-right:5px solid #a7a7a759;
		& iframe {border:none;width:100%;height:100%}
	}

	#screen-two-right { /* Link window */
		display:grid;
		grid-template-columns:1fr 1fr;
		grid-template-rows:1fr 1fr;
		border-left:5px solid #a7a7a759;
		/* Individual link shared styles */
		& a {
			background-size:100% 100%;
			background-repeat:no-repeat;
			background-position:center;
			&:hover {
				background-color:#f00;
				opacity:1;
				transition:all 0.5s ease-in-out
			}}
		/* Individual links */
		& a:nth-child(1) { /* Neocities */
			background-image:url("/img/mat/diverta.gif");
			&:hover {background-image:url("/img/mat/divertah.gif")}
		}
		& a:nth-child(2) { /* Context */
			background-image:url("/img/mat/divertb.gif");
			&:hover {background-image:url("/img/mat/divertbh.gif")}
		}
		& a:nth-child(3) { /* Backlog */
			background-image:url("/img/mat/divertc.gif");
			&:hover {background-image:url("/img/mat/divertch.gif")}
		}
		& a:nth-child(4) { /* Ko-fi */
			background-image:url("/img/mat/divertd.gif");
			&:hover {background-image:url("/img/mat/divertdh.gif")}
		}
	}

/* FOOTER */
#footer {
	display:block;
	margin-top:20px;
	padding:0.5em;
	width:100%;
	height:auto;
	border:5px double #a7a7a759;
	font-family:DINish,monospace;
	font-size:0.8em;
	& p {margin:0}
	/* Button blocks */
	& > div {
		display:inline-block;
		& p {text-align:center;font-weight:bold}
		& img {height:31px}
	}
}

/*
███    ███  ██████  ██████  ██ ██      ███████     ██       █████  ██    ██  ██████  ██    ██ ████████ 
████  ████ ██    ██ ██   ██ ██ ██      ██          ██      ██   ██  ██  ██  ██    ██ ██    ██    ██    
██ ████ ██ ██    ██ ██████  ██ ██      █████       ██      ███████   ████   ██    ██ ██    ██    ██    
██  ██  ██ ██    ██ ██   ██ ██ ██      ██          ██      ██   ██    ██    ██    ██ ██    ██    ██    
██      ██  ██████  ██████  ██ ███████ ███████     ███████ ██   ██    ██     ██████   ██████     ██    
*/
@media only screen and (width<=1280px) { /* Transitional adjustments */
	#splash-title {max-width:50%}
	#screen-one {grid-template-columns:1fr 1fr}
}
@media only screen and (width<=960px) { /* Proper mobile layout */
	#screen-one {
		grid-template-columns:1fr;
		gap:0
	}
	#screen-one-left {
		background:url("/img/mat/black.gif");
		border-style:none none solid none;
		border-width:5px;
		border-color:#a7a7a759
	}
	#screen-one-right {
		border-style:none
	}
		#updates {height:600px}
		#splash-art, #splash-bg {display:none}
		#splash-title {position:initial;max-width:90%}

	#screen-two {
		grid-template-columns:1fr;
		gap:0;
		height:auto;
	}
	#screen-two-left {
		height:300px;
		border:none
	}
	#screen-two-right {
		grid:none;
		border:none;
		aspect-ratio:1/1;
		& a {border-top:5px solid #a7a7a759}
		& a:nth-child(1), & a:nth-child(1):hover {
			background-image:url("/img/mat/divertah.gif");
			background-color:initial
		}
		& a:nth-child(2), & a:nth-child(4):hover {
			background-image:url("/img/mat/divertbh.gif");
			background-color:initial
		}
		& a:nth-child(3), & a:nth-child(3):hover {
			background-image:url("/img/mat/divertch.gif");
			background-color:initial
		}
		& a:nth-child(4), & a:nth-child(4):hover {
			background-image:url("/img/mat/divertdh.gif");
			background-color:initial
		}
	}
}