/* Import Font Assets */
/*
@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&family=Space+Grotesk:wght@300..700&display=swap');
*/
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:ital,wght@0,100..900;1,100..900&display=swap');

/* Preset Colors and Values */
:root {
	--bg: #060606;
	--fill: #323131;
	--text: #c1c5c6;
	--highlight: #FFF;
	--key: #d39d46;
	--accent: #4b3b2b;
	--faded: #CA5;
	--alt: #DB4;

	--mono: "Geist Mono", monospace;

	--boxglow: 12px;
	--textglow: 10px;
	
	/* System and Daemons */
	--system-text: #EEE;
	--system-color: #06F;
	--system-name: "System";
	--terminal-color: #666;
	--terminal-name: "Terminal";
	--terminal-prefix: ">";
	--auth-color: #3C6;
	--auth-name: "Auth";
	--error-color: #F33;
	--error-name: "Error";
	/* Users */
	--user-text: #000;
	--technician-color: #FC3;
	--technician-name: "Technician";
	--wedge-color: #09F;
	--wedge-name: "Wedge";
	--librarian-color: #0C6;
	--librarian-name: "Librarian";
	--monitor-color: #F03;
	--monitor-name: "Monitor";
	--entity-color: #C0F;
	--entity-name: "V";
	--director-color: #C0F;
	--director-name: "Director";
	--silver-color: var(--director-color);
	--silver-name: "Silver";
}

* {
	margin: 0;
	padding: 0;
}
ul {
	list-style-type: none;
}
body {
	font-family: var(--mono);
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
    box-sizing: border-box;
	background: var(--bg);
	color: var(--text);
}
a {
	text-decoration: none;
	color: var(--highlight);
	transition: color 0.8s;
}

#header {
	height: 300px;
}
#container {
	margin: 0 auto;
	width: 700px;
}
.log, .file, .links {
	padding-bottom: 1px;
}

.logfile p {
	display: flex;
	align-items: flex-start;
	color: #FFF;
	line-height: 24px;
	margin: 18px 0;
}
.logfile p i {
	display: inline;
}
p.notice {
	color: var(--system-text);
	padding: 0 11px;
}
p.notice.system {
	color: var(--system-text);
	background: var(--system-color);
	box-shadow: 0 0 var(--boxglow) var(--system-color);
}
p.notice.terminal {
	color: var(--system-text);
	background: var(--terminal-color);
	box-shadow: 0 0 var(--boxglow) var(--terminal-color);
}
p.notice.auth {
	color: var(--system-text);
	background: var(--auth-color);
	box-shadow: 0 0 var(--boxglow) var(--auth-color);
}
p.notice.error {
	color: var(--system-text);
	background: var(--error-color);
	box-shadow: 0 0 var(--boxglow) var(--error-color);
}
p.notice::before {
	padding: 0 11px;
	margin-right: 11px;
	color: #000;
}
p.notice.system::before {
	content: var(--system-name);
	color: var(--system-text);
	background: var(--system-color);
	box-shadow: 0 0 var(--boxglow) var(--system-color);
}

p.entry {
	color: var(--system-text);
	background: #000;
	line-height: 28px;
	margin: 10px 0;
}
p.entry::before {
	content: ">";
	padding: 0 11px;
}
p.entry.technician {
	color: var(--technician-color);
	text-shadow: 0 0 var(--textglow) var(--technician-color);
}
p.entry.entity {
	color: var(--entity-color);
	text-shadow: 0 0 var(--textglow) var(--entity-color);
}

p.message::before {
	padding: 0 11px;
	margin-right: 11px;
	color: #000;
}
p.message.entity::before {
	content: var(--entity-name);
	background: var(--entity-color);
	box-shadow: 0 0 var(--boxglow) var(--entity-color);
}

dl {
	display: flex;
	align-items: flex-start;
	color: #FFF;
	line-height: 24px;
	margin-bottom: 18px;
}
dt {
	background: #FFF;
	color: #000;
	box-shadow: 0 0 var(--boxglow) #FFF;
	padding: 0 11px;
	position: relative;
	top: 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}
dd {
	padding: 0 11px;
}
.notice dd {
	background: #FFF;
	color: #000;
	box-shadow: 0 0 var(--boxglow) #FFF;
	padding-right: 11px;
	margin-left: 11px;
}

.terminal dt {font-weight: bold; color: #DDD; background: #06F; box-shadow: 0 0 var(--boxglow) #06F;}
.prime dt {background: #FC3; box-shadow: 0 0 var(--boxglow) #FC3;}
.librarian dt {background: #0C6; box-shadow: 0 0 var(--boxglow) #0C6;}
.entity dt {background: #C0F; box-shadow: 0 0 var(--boxglow) #C0F;}
.entry dt {}
.entry.terminal dd {color: #DDD; background: #06F; box-shadow: 0 0 var(--boxglow) #06F;}
.entry.prime dd {
	color: var(--technician-color);
	text-shadow: 0 0 var(--textglow) var(--technician-color);
}
.entry dd:before {content: "> ";}

.notice.terminal dd {color: #DDD; background: #06F; box-shadow: 0 0 var(--boxglow) #06F;}

.links a {
	display: block;
	text-align: center;
	padding: 20px;
	background: #FC3; box-shadow: 0 0 var(--boxglow) #FC3;
	color: #000;
	margin-bottom: 24px;
}
.outgoing {
	display: flex;
	gap: 24px;
}
.outgoing a {
	box-sizing: border-box;
	width: 25%;
	padding: 48px 20px;
}
.outgoing a span {
	display: block;
}
.outgoing a svg {

}
.links .type {
	display: block;
	font-weight: bold;
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: solid 3px #000;
}
.target::before {
	content:">";
	font-weight: bold;
	opacity: 0;
	padding-right: 16px;
	transition: opacity 0.5s, padding 0.5s;
}
.target::after {
	content:"<";
	font-weight: bold;
	opacity: 0;
	padding-left: 16px;
	transition: opacity 0.5s, padding 0.5s;
}
a:hover .target::before {
	opacity: 1;
	padding-right: 6px;
}
a:hover .target::after {
	opacity: 1;
	padding-left: 6px;
}