@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fred-wang.github.io/MathFonts/LatinModern/mathfonts.css');

/* colours */
:root {
	--primary-colour:			#e6e5e6;
	--secondary-colour:			#34d4fc;
	--accent-colour:			#f2860a;
	--primary-background:		#262526;
	--secondary-background:		#525153;

	--link-colour:				 #2f81f7;
	--code-colour:				 #FFFFFF;	
	
	--block-background:			#060406;
	--block-context-colour: #888888;

	--aside-title-colour:		#262526;
	--aside-title-background:	#e6e5e6;
	--aside-link-colour:		#34d4fc;
}

/* base font */
html {
	font-size: 16px;
	line-height: 1.4em;
	-webkit-text-size-adjust: 100%;

	font-family: "Noto Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
	font-variation-settings: "wdth" 100;
}
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}
sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}

/* links */
a {
	color: var(--link-colour);
	background-color: transparent;
	-webkit-text-decoration-skip: objects;
	text-decoration: none;
}
a:active, a:hover {
	outline-width: 0;
}
a:hover {
	text-decoration: underline;
}

/* layout */
body {
	max-width: 50rem;
	margin: 0 auto;

	color: var(--primary-colour);
	background: var(--primary-background);
}
main {
	padding: 0.5rem;
}

/* article */
article {

	p, ul, ol, pre, table, .diagram {
		margin: 0.5em 0 1em;
	}
	li {
		margin: 0.5em 0;
	}

	h1, h2, h3, h4, h5, h6 {
		font-weight: bold;
		color: var(--secondary-colour);
		margin: 0.4em 0;
		line-height: 1em;
	}
	h1 {
		color: var(--accent-colour);
		margin: 0.3em 0;
		font-size: 2.5rem;
	}
	h1 a {
		color: var(--accent-colour);
	}
	h2 {font-size: 1.25rem;}
	h3 {font-size: 1.75rem;}
	h4 {font-size: 1.25rem;}
	h5 {
		font-size: 1rem;
		margin: 0.5em 0 0;
	}
	h6 {
		font-size: 1rem;
		font-style: italic;
		text-align: center;
		margin: 1em 0;
	}

	code:not(pre code) {
		color: var(--code-colour);
		background: var(--secondary-background);
		font-size: 0.875rem;
		padding: 0 0.125rem;
	}

	pre {
		background: var(--block-background);

		font-size: 14px;
		padding: 0.5em;
		tab-size: 4;

		overflow-x: auto;

		&.wrap {
			white-space: pre-wrap;
		}

		code.context {
			color: var(--block-context-colour);
		}
	}

	img {
		max-width: 100%;
	}
	p.img {
		text-align: center;
	}

	aside {
		position: relative;
		padding: 1.65em 1em 0.1px;
		margin: 0.5em 0 1em;

		background: var(--secondary-background);

		&::before {
			position: absolute;
			top: 0;
			left: 0;
			padding: 0.125em 0.5em;

			color: var(--aside-title-colour);
			background: var(--aside-title-background);

			content: attr(title);
		}

		a {
			color: var(--aside-link-colour);
		}

		&.links {
			&::before {
				content: "Links";
			}

			ul {
				list-style: none;
				padding: 0;
			}
		}
	}

	nav {
		margin: 1rem 0;
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	table {
		border-collapse: collapse;

		& th,
		& td {
			border: 1px solid var(--secondary-background);
			line-height: 1.8em;
			padding: 0 0.5em;
		}

		& th {
			text-align: left;
		}

		&.abstract_alegebra_results {
			& th {
				color: var(--primary-background);
				background: var(--primary-colour);
				font-weight: normal;
			}

			& th,
			& td {
				white-space: nowrap;
			}
		}
	}

	.pannable {
		overflow-x: auto;
	}

	.diagram {
		background: var(--block-background);
		overflow-x: auto;

		display: flex;
		&.vertical {
			flex-flow: column;
		}
		justify-content: safe center;
		align-items: safe center;

		gap: 10px;
		padding: 10px;

		> * {
			flex: none;
			margin: 0;
		}
	}

	.eea_maths {
		background: var(--block-background);
		font-family: monospace, monospace;
		font-size: 14px;
		padding: 0.5em;
	}

	.matrix_examples {
		gap: 20px;
		align-items: flex-end;
	}

	.aes_diagram table.notes td {
		border-color: var(--block-background);
		text-align: center;
	}

	.aes_steps {
		display:grid;
		grid-template-columns: 40px 200px 1fr;
		grid-gap: 1px;
		padding: 1px;
		background: var(--secondary-background);

		> * {
			background: var(--primary-background);
			/*line-height: 1.4em;*/
			padding: 0.2em 0.5em;
		}

		.inital_round {
			background: #393939;
		}
		.group {
			grid-column: span 3;
			background: #393939;
		}
		.round {
			grid-row: span 4;
			background: #393939;
		}
		.final_round {
			grid-row: span 3;
			background: #393939;
		}
	}

	.chat {
		max-width: 40rem;
		margin: 0 auto;

		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 10px;

		font-size: 95%;
		background: var(--block-background);

		.message {
			display: inline-block;
			max-width: 80%;
			border-radius: 5px;
			padding: 3px 6px;

			&.receive {
				align-self: flex-start;
				background: #202c33;
			}
			&.send {
				align-self: flex-end;
				text-align: right;
				background: #005c4b;				
			}

			.name {
				font-size: 85%;
				font-weight: bold;
				color: #06cf9c;
			}
		}
	}
}

hr {
	margin: 2em 0;

	border: 1px solid var(--secondary-background);
}

/* mast head */
header.masthead {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--primary-background);
	border-bottom: 2px solid var(--secondary-background);

	padding: 0.25rem 0.75rem;

	display: flex;
	gap: 0.75rem;

	* {
		font-size: 1rem;
		margin: 0;
	}

	.home {
		color: var(--accent-colour);
		font-weight: bold;
	}
}