/* / / / / / / / / / / / / / / /
/ COLORS                       /
/                              /
/ / / / / / / / / / / / / / / */
:root {
	--textColor:#eee;
	--backgroundColor:#444;
	--backgroundColorDark:#333;
	--backgroundColorTransparent:#444c;
	--backgroundColorTransparentDark:#333c;
	--borderColor:#aaa;
	--borderColorDark:#888;
	--shadowColor:#111;
	--shadowHoverColor:#aaa;
	--hoverColor:#444c;
	--modalBackground:#111c;
	--modalBackgroundDark:#111e}

/* / / / / / / / / / / / / / / /
/ GLOBALS                      /
/                              /
/ / / / / / / / / / / / / / / */
* {box-sizing:border-box}

body {
	color:var(--textColor);
	background-color:var(--backgroundColor);
	background-image:url('/assets/mat-background.jpg');
	background-size:307px;
	margin:0;
	font-family:Chivo,Arial,sans-serif;
	overflow-x:hidden}

p {
	margin:0;
	margin-bottom:1rem}
	p:last-of-type {margin-bottom:0}

a                 {color:var(--textColor)}
a:hover           {text-shadow:0 0 4px var(--shadowHoverColor)}
a.inherit:hover   {text-shadow:0 0 4px}
a.no-shadow:hover {text-shadow:none}

noscript {display:block;padding:1em;background-color:var(--backgroundColor);border:1px solid}

/* / / / / / / / / / / / / / / /
/ LAYOUT                       /
/                              /
/ / / / / / / / / / / / / / / */
body[grid-style] {
	display:grid;
	grid-template-columns:2fr 5fr;
	grid-template-rows:1fr;
	gap:1em;
	height:100vh;
	padding:1em 15vw;
	overflow:hidden}

body[grid-style][sidebar] {grid-template-rows:auto 1fr}

#container {
	display:grid;
	grid-template-columns:2fr 5fr;
	grid-template-rows:auto auto;
	width:66%;
	height:100vh;
	margin:auto}
#content {
	padding:1em;
	background-image:url('/assets/mat-background-content.jpg');
	border:1px solid var(--borderColor);
	border-radius:0 0 8px 8px}
	body[sidebar] #content {border-radius:0 0 8px 0}

body[grid-style] #content, body[grid-style] #sidebar {
	height:100%;
	max-height:100%;
	overflow-y:scroll}

/* / / / / / / / / / / / / / / /
/ NAVIGATION                   /
/                              /
/ / / / / / / / / / / / / / / */
#sidebar {
	background-image:url('/assets/mat-background-content.jpg');
	border:1px solid var(--borderColor);
	border-radius:0 0 0 8px}
	#time-and-date {
		position:relative;
		display:block;
		margin-top:0.5em;
		text-align:center;
		user-select:none}
		#date {position:absolute;top:-1em;left:50%;transform:translateX(-50%);font-size:0.6em}
	#sidebar a {text-decoration:none}
	#sidebar img {width:100%;padding:1em;padding-bottom:0}
	#sidebar div {margin:1em}
	#sidebar div div {
		margin:0;
		padding:0.5em;
		background-color:var(--backgroundColorDark);
		border:1px solid var(--borderColorDark);
		border-top:none}
	#sidebar h3 {
		margin:0;
		padding:0.25em;
		background-image:url('/assets/mat-background-section.png');
		font-size:0.8em;
		border:1px solid var(--borderColorDark);
		border-radius:4px 4px 0 0;
		user-select:none}
	#sidebar .match date {display:block;font-size:0.8em}
	#sidebar a div:hover{background-color:var(--backgroundColor)}
	#sidebar-latest_announcement item {display:block;font-weight:bold}
	#sidebar-latest_announcement date {display:block;font-size:0.8em}
	#sidebar-contact p {margin:0}
	#sidebar-contact number {display:block;font-size:0.8em;margin-bottom:1em}
	#sidebar-contact number:last-of-type, #sidebar-contact number:has(+ number) {margin:0}
	#sidebar-updates {height:150px;overflow-y:scroll}
	#sidebar-updates update {display:block;margin:0.5em 0}
	#sidebar-updates update:first-of-type {margin:0}
	#sidebar-updates date {display:block;border-bottom:1px dotted;margin-bottom:0.25em}
	#sidebar-updates li {margin-left:1em;font-size:0.8em;list-style-type:'- '}
	#sidebar-page_switcher {float:right;font-weight:normal}

#navigator {
	position:relative;
	display:grid;
	grid-area:1/1/span 1/span 2;
	grid-template-columns:repeat(6,1fr);
	grid-template-rows:auto auto;
	background:url('/assets/mat-background-section.png');
	background-position:100% 60%;
	box-shadow:inset 0 0 32px var(--shadowColor);
	border:1px solid var(--borderColor);
	border-radius:8px 8px 0 0}
	#navigator h2 {
		grid-area:1/1/span 1/span 6;
		margin:1rem 0;
		text-align:center}
		#navigator h2 a {
			font-family:Army,serif;
			font-size:2em;
			text-decoration:none;
			text-shadow:2px 2px 4px var(--shadowColor), 2px 2px 8px var(--shadowColor)}
			#navigator h2 a:hover {background-color:initial!important}
	#navigator a:not(h2 a) {
		align-self:end;
		display:block;
		padding:0.5em;
		text-align:center;
		text-decoration:none;
		font-size:0.8em;
		border-top:1px solid var(--borderColorDark);
		border-right:1px solid var(--borderColorDark)}
		#navigator a:last-of-type {border-right:none}
		#navigator a:not(h2 a):active {height:calc(100% - 1px)}

	#login-button {
		position:absolute;
		top:0;
		left:0;
		display:block;
		width:max-content;
		color:#ee0;
		padding:0.5em;
		font-size:0.7em;
		border-bottom:1px solid var(--borderColorDark);
		border-right:1px solid var(--borderColorDark);
		border-bottom-right-radius:8px;
		border-top-left-radius:8px}
		#login-button:hover {text-shadow:0 0 4px}
		#login-button.logged-in {color:#eaa}
	#login-modal {
		display:grid;
		position:fixed;
		top:0;left:0;
		height:100vh;width:100vw;
		background-color:var(--modalBackgroundDark)}
		#login-window {
			z-index:768;
			align-self:center;
			width:40vw;
			margin:auto}
			#login-window .disabled {display:none}
			#login-window h3 {
				margin:0;
				padding:0.25em;
				font-size:0.8em;
				background-image:url('/assets/mat-background-section.png');
				border:1px solid var(--borderColor);
				border-radius:4px 4px 0 0}
				#login-window-close {float:right}
			#login-window div {
				padding:0.5em;
				background-color:var(--backgroundColor);
				font-size:0.8em;
				border:1px solid var(--borderColor);
				border-top:none}
			#login-window div p {margin-top:1em}
			#login-window div input {margin-left:1em;outline:none}
			#login-confirm {margin-left:1em}
			#login-status red {color:red}
			#login-status grn {color:limegreen}
			@keyframes login-flash {0% {text-shadow:0 0 2px white} 100% {text-shadow:0 0 0}}

/* / / / / / / / / / / / / / / /
/ COMMONS                      /
/                              /
/ / / / / / / / / / / / / / / */
.section {display:block;text-align:center;margin:1rem 0}

.box {
	position:relative;
	display:block;
	min-height:1em;
	padding:1em;
	background-color:var(--backgroundColorTransparent);
	border:1px solid var(--borderColorDark)}
	.box::before {
		content:var(--title);
		position:absolute;
		left:0;
		top:-1.1em;
		font-size:0.8rem}

/* / / / / / / / / / / / / / / /
/ MODIFIERS                    /
/                              /
/ / / / / / / / / / / / / / / */
.clickable {cursor:pointer;user-select:none}
.clickable:hover {text-shadow:0 0 4px var(--shadowHoverColor)}
.clickable:active {opacity:0.75}

/* / / / / / / / / / / / / / / /
/ INTERNALS                    /
/                              /
/ / / / / / / / / / / / / / / */
#modal-container {
	position:fixed;
	top:0;
	left:0;
	display:grid;
	grid-template-columns:1fr 1fr;
	width:100vw;
	height:0;
	padding:0 20vw;
	pointer-events:none;
	opacity:0;
	z-index:512;
	background-color:var(--modalBackground);
	transition:opacity 0.15s linear}
	#modal-container.nodesc {
		grid-template-columns:1fr}
		#modal-container.nodesc #modal-description {display:none}
	#modal-subject {
		align-self:center;
		display:block;
		margin:auto;
		max-width:30vw;
		max-height:75vh;
		background-color:#111;
		box-shadow:0 0 4px #eee}
	#modal-description {
		align-self:center;
		display:block;
		width:80%;
		margin:auto;
		padding:1em;
		background-image:url('/assets/mat-background-section.png');
		border:1px solid var(--borderColor)}
	#modal-switch-left, #modal-switch-right {
		position:absolute;
		top:50vh;
		transform:translateY(-50%);
		font-family:Cousine,monospace;
		font-size:6em}
		#modal-switch-left {left:5vw}
		#modal-switch-right {right:5vw}
	#modal-close {
		position:absolute;
		top:4em;
		right:1em}
		#modal-close::before {
			content:'X';
			position:absolute;
			top:-1em;
			font-size:3em;
			left:50%;
			transform:translateX(-50%)}

/* / / / / / / / / / / / / / / /
/ RESPONSIVE CSS               /
/                              /
/ / / / / / / / / / / / / / / */
@media only screen and (max-width:1279px) {
	body[grid-style] {grid-template-rows:auto;grid-template-columns:1fr;gap:0;padding:0;max-width:calc(100% - 1px)}
	body[grid-style] #navigator {border-radius:0}
	body[grid-style] #sidebar {display:none}
	body[grid-style] #content {border-top:none;border-radius:0;max-height:calc(100% - 1px)}

	#navigator {grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,auto)}
	#navigator h2 {grid-area:1/1/span 1/span 3}
	#navigator h2 a {font-size:1.2em}
	#login-button {
		position:initial;
		grid-area:4/1/span 1/span 3;
		width:100%;
		text-align:center;
		font-weight:bold;
		border:none;
		border-radius:0;
		border-top:1px solid var(--borderColorDark)}
	#login-window {width:90vw}

	#modal-container {
		grid-template-columns:auto;
		grid-template-rows:2fr calc(33.33%);
		padding:0;
		background-color:var(--modalBackgroundDark)}
		#modal-container.nodesc {grid-template-rows:1fr}
	#modal-description {max-height:8em;overflow-y:scroll}
	#modal-subject {
	max-width:90vw;
	max-height:40vh}
	#modal-switch-left,#modal-switch-right {top:95vh}
}