* {box-sizing:border-box}

/*/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
/ PALETTE                                                                                                             /
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /*/
:root {
	--cBG:#444;
	--cTEXT:#fff;
	--cLINK:#aaf;
	--cLINKHOVER:#ccf;
	--cLINKACTIVE:#88a;
	--cBORDER:#aaa;
	--border:1px solid var(--cBORDER)
}

/*/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
/ GLOBALS                                                                                                             /
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /*/

body {
	margin:0;
	background-color:#111;
	background:url("/assets/mat-bg.png");
	font-size:1em;
	font-family:Chivo,sans-serif;
	color:#fff
}

a {
	color:var(--cLINK);
	&:hover {color:var(--cLINKHOVER)}
	&:active{color:var(--cLINKACTIVE)}
}

img {max-width:100%}

/*/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
/ LAYOUT                                                                                                              /
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /*/

#root {
	display:grid;
	grid-template-rows:auto 1fr;
	width:100%;
	max-width:1280px;
	height:100vh;
	margin:0 auto;
	& #content {
		height:0;
		min-height:100%;
		background:url("/assets/mat-bg-content.jpg");
		border-left:var(--border);
		border-right:var(--border);
		overflow:hidden auto
	}
}

#navbar {
	display:grid;
	grid-template-columns:1fr auto;
	grid-template-rows:1fr auto;
	width:100%;
	background:url("/assets/mat-bg-section.png");
	border:var(--border);
	border-top:none;
	& button {
		background:#333;
		color:var(--cTEXT);
		font-family:Chivo,sans-serif;
		cursor:pointer;
		&:active {
			color:#aaa;
			background:#222
		}
	}
	& #banner {
		position:relative;
		display:grid;
		grid-area:1/1/span 1/span 1;
		overflow:hidden;
		align-items:center;
		& > h1 {
			position:relative;
			z-index:1;
			display:block;
			margin:0;
			padding:10px;
			color:var(--cTEXT);
			font-size:2rem;
			font-family:Gunplay,monospace;
			& > a {
				color:var(--cTEXT);
				text-decoration:none;
				font-weight:normal;
				&:active {opacity:0.5}
			}
		}
		& > img {
			z-index:0;
			position:absolute;
			top:-200%;
			left:0;
			height:400%;
			opacity:0.25
		}
		&:has(a:hover) img {opacity:0.3}
	}
	& #user {
		grid-area:1/2/span 1/span 1;
		display:grid;
		grid-template-rows:1fr 1fr;
		padding:0.5rem 1rem;
		border-left:var(--border);
		& #user-status {
			font-size:0.8rem;
			text-align:center;
			color:#fffa
		}
		& #user-login {
			height:100%;
			padding:0 50px;
			color:#ff5
		}
		&.loggedin {
			& #user-status {color:#fff}
			& #user-login {color:#f88}
		}
	}
	& #links {
		grid-area:2/1/span 1/span 2;
		display:flex;
		border-top:var(--border);
		overflow:auto hidden;
		& a {
			position:relative;
			padding:10px;
			color:var(--cTEXT);
			border-right:var(--border);
			font-size:0.8rem;
			text-decoration:none;
			white-space:nowrap;
			&:hover {
				background:#fff;
				color:#000
			}
			&:active {
				background:#aaa;
				color:#222;
				top:1px
			}
			&.disabled {
				cursor:not-allowed;
				color:#fff5;
				&:hover {background:#fff1;color:#fff8}
				&:active {top:0}
			}
		}
	}
	&.login {
		& > *:not(#login-window) {display:none}
		& #login-window {
			display:block;
			align-content:center;
			text-align:center;
			overflow:hidden auto;
			& > div {display:flex;flex-direction:row;gap:10px;width:max-content;margin:auto;margin-top:5px}
			& #login-window-input {padding:3px;background:#eee;border:2px inset #aaa;font-family:monospace;font-size:0.8em}
			& button {padding:3px 10px}
		}
	}
}

#navbar-backup {
	position:relative;
	display:block;
	width:100%;
	background:url("/assets/mat-bg-section.png");
	border:var(--border);
	font-size:0.8em;
	overflow:hidden;
	& > img {
		position:absolute;
		bottom:-50%;
		opacity:0.5;
		height:8lh;
		pointer-events:none
	}
	& > span {
		display:block;
		margin-top:1em;
		text-align:center
	}
	& > div {
		display:flex;
		flex-direction:row;
		gap:20px;
		width:max-content;
		padding:1em;
		max-width:100%;
		overflow:auto hidden;
		white-space:nowrap;
		margin:auto
	}
}

div.box {
	margin:1rem;
	padding:1rem;
	border:var(--border);
	background:var(--cBG);
	&.no-pad {padding:0}
	& > :first-child{margin-top:0}
	& > :last-child {margin-bottom:0}
	&:has(>h1:first-child) {
		padding:0;
		& > h1 {
			margin:0;
			padding:0.5rem;
			background:url("/assets/mat-bg-section.png");
			border-bottom:var(--border);
			font-size:1rem
		}
		&:not(.no-pad) > div {padding:1rem}
		& > div {
			& > :first-child{margin-top:0}
			& > :last-child {margin-bottom:0}
		}
	}
}

/*/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
/ COMMONS                                                                                                             /
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /*/

.header {
	padding:0 1rem;
	text-align:center
}

/*/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
/ MOBILE STYLING                                                                                                      /
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /*/

.mobile {display:none!important}

@media only screen and (width<=960px) {
	.desktop {display:none!important}
	.mobile {display:block!important}
	.box {margin-left:unset!important;margin-right:unset!important;border-right:unset!important;border-left:unset!important}
	#navbar {
		grid-template-columns:1fr;
		grid-template-rows:1fr 1fr auto;
		& #banner, & #user, & #links {grid-area:unset}
		& #banner {text-align:center}
		& #user {border:none;border-top:var(--border)}
	}
}

/*/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
/ FONTS                                                                                                               /
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /*/

@font-face {
	font-family:'Chivo';
	src: url('/css/fonts/Chivo-Regular.woff') format('woff'),
		 url('/css/fonts/Chivo-Regular.woff2') format('woff2');
	font-weight:normal;
	font-style: normal;
}
@font-face {
	font-family:'Chivo';
	src: url('/css/fonts/Chivo-Bold.woff') format('woff'),
		 url('/css/fonts/Chivo-Bold.woff2') format('woff2');
	font-weight:bold;
	font-style: normal;
}
@font-face {
	font-family:'Gunplay';
	src: url('/css/fonts/Gunplay-Regular.woff') format('woff'),
		 url('/css/fonts/Gunplay-Regular.woff2') format('woff2');
	font-weight:normal;
	font-style: normal;
}