@font-face {
	font-family: 'moonhouse';
	src: url('/src/fonts/moonhouse.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Gputeks';
	src: url('/src/fonts/Gputeks-Bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Oxanium';
	src: url('/src/fonts/Oxanium-Bold.woff2') format('woff2');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'shaakmono';
	src: url('/src/fonts/shaakmono.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

body {
	margin: 0;
	box-sizing: border-box;

	background-color: #0b0b0b;
	color: #ccc;

	font-family: 'shaakmono';
}

body * {
	box-sizing: border-box;
}

h1 {
	font-family: 'Oxanium';
	font-size: 5rem;
	margin: 4rem 0;
}

h2 {
	font-size: 3rem;
}

h3 {
	margin: 0;
}

h3#logo {
	font-family: 'moonhouse';
	font-size: 2rem;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover {
	text-decoration: underline;
}

nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 2rem;

	background-color: inherit;
	border-bottom: 1px #222 solid;
}

span#status {
	margin-top: -0.5rem;
}
span#status.stable {
	color: #5ebc4c;
}
span#status.disconnected {
	color: #c14f4f;
}

article {
	padding: 8rem;
}

article :first-child > header {
	display: inline-block;
	font-size: 2rem;
	padding: 0 0.75rem;
	padding-bottom: 0.25rem;
	margin-right: 1rem;
	width: max-content;
}
article :first-child > header.declassified {
	background-color: #505050;
	color: #a0a0a0;
}
article :first-child > header.classified {
	background-color: #ff0000;
	color: #fff;
}
article :first-child > header.zeroday {
	background-color: #3030a3;
	color: #fff;
}
article :first-child > header.nday {
	background-color: #68689c;
	color: #fff;
}
article :first-child > header.publication {
	background-color: #19c51c;
	color: #fff;
}

span, p {
	max-width: 80ch;
	text-align: justify;
	word-spacing: -0.06em;
	color: #a0a0a0;

	font-size: 1.75rem;
	font-family: 'shaakmono';
}

p {
	line-height: 2.4rem;
}

code {
	display: inline-block;
	font-size: 1.2rem;
	background-color: #303030;
	line-height: normal;
	padding: 0.2rem;
}

pre:has(code) {
	width: 80ch;
	overflow-x: auto;
	font-size: 1.02rem;
	tab-size: 4;
}

pre > code {
	width: 100%;
	padding: 1rem;
}