* { cursor: url(../aesthetic/assets/cursor.png), auto; }

@font-face {
	font-family: WCIITInter;
	font-style: normal;
	src: url("../aesthetic/fonts/WCIIT-Inter.woff"), format('woff');
}

@font-face {
	font-family: WCIITInter;
	font-style: italic;
	src: url('../aesthetic/fonts/Inter-Italic.woff2') format('woff2');
}

@font-face {
	font-family: WCIITInterSemiBold;
	src: url("../aesthetic/fonts/WCIIT-Inter-SemiBold.woff") format('woff');
}

@font-face {
	font-family: WCIITInterBold;
	src: url("../aesthetic/fonts/WCIIT-Inter-Bold.woff") format('woff');
}

:root {
	font-family: WCIITInter, sans-serif;
	--s: 1rem;
	--m: 2rem;
	--step: calc(0.45vw );
	--line: 0.7px;
}

html, body { height: 100%; }
body {
	margin: 0;
	background: #fff;
}

article {
	max-width: 40em;
	padding-left: 0.5em;
	word-spacing: 0.05em;
}

abbr {
	letter-spacing: 0.05em;
}

a {
	color: currentColor;
}

time {
	font-variant-numeric: tabular-nums
}

ul {
	list-style: square;
}

.branding {
	height: 10vh;
	width: 25vw;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.logo {
	font-family: WCIITInterSemiBold;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: calc(var(--step) * 0.5);
	height: calc(100% - var(--step)*2);
	width: 100%;
	margin: var(--step);
	line-height: 0.9;
	color: white;
	background: #111111;
}
.right { text-align: left; }
.left { text-align: right; }
.center { text-align: center; }

.logoLine {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	gap: 10px;
}

.logoLine p {
	margin: 0;
	white-space: nowrap;
	transition: font-size 0.2s ease;
	font-size: clamp(1rem, 13pt, 2rem);
}

.secondLine {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0;
	width: 100%;
}

.secondLine .left{
	grid-column: 1;
	text-align: right;
	justify-self: end;
	margin-right: 0.5vw;
	font-weight: 300;
	font-family: WCIITInter;
	font-style: italic;
}

.secondLine .center {
	grid-column: 2;
	text-align: center;
}

.secondLine .right {
	grid-column: 3;
	text-align: left;
	/*	margin-right: 5px;*/
	visibility: hidden;
}


.logo-small{
	font-family: WCIITInterBold;
	display: none;
	color: white;
	background-color: black;
	width: calc(100% - var(--step)*2);
	height: calc(100% - var(--step)*2);
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	aspect-ratio: 1 / 1;
	padding-top: 15px;
	padding-bottom: 12px;
	padding-left: 10px;
	padding-right: 10px;
	box-sizing: border-box;

}

.logo-small > *{
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(7pt, 12pt, 14pt);
	line-height: 0.5;
}


.logo-small > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.logo-small > *:nth-child(2) { grid-column: 3; grid-row: 1; }
.logo-small > *:nth-child(3) { grid-column: 2; grid-row: 2; }
.logo-small > *:nth-child(4) { grid-column: 1; grid-row: 3; }
.logo-small > *:nth-child(5) { grid-column: 3; grid-row: 3; }

.spacer {
	height: var(--step);
}

section ul {
	list-style-type: disc;
	padding-left: var(--s);
}

li {
	padding-bottom: var(--step);
}
.words {
	padding-left: var(--s);
	width: 50%
}
h2 {
	font-family: WCIITInter;
	font-weight:500;
}

div.article .words {
	display: flex;
	justify-content: flex-start;
	flex-flow: column;
	height: 100%;
}

.words ul {
	width: 100%;
}

@media (max-width: 800px) {
	.logo {
		display: none;
	}
	
	.logo-small {
		display: grid;  /* Your existing grid display */
		/* Rest of your logo-small styles */
	}
	
	section div.article{
		flex-direction: column;
	}
	.words {
		width: 90%;
	}
	section div.article img{
		max-width: 100%;
		min-width: 100%;
		order: -1;   /* ensures image appears above .words */
	}
}

/* Taken from the standard style sheet for mandoc. */
html {		max-width: 65em;
		--bg: #FFFFFF;
		--fg: #000000; }
body {		background: var(--bg);
		color: var(--fg);
		font-family: serif; }
h1 {		font-size: 100%; font-family: WCIITInter; }
table {		margin-top: 0em;
		margin-bottom: 0em;
		border-collapse: collapse; }
/* Some browsers set border-color in a browser style for tbody,
 * but not for table, resulting in inconsistent border styling. */
tbody {		border-color: inherit; }
tr {		border-color: inherit; }
td {		vertical-align: top;
		padding-left: 0.2em;
		padding-right: 0.2em;
		border-color: inherit; }
ul, ol, dl {	margin-top: 0em;
		margin-bottom: 0em; }
li, dt {	margin-top: 1em; }
pre {		font-family: inherit; }

.permalink {	border-bottom: thin dotted;
		color: inherit;
		font: inherit;
		text-decoration: inherit; }
* {		clear: both }

/* Header and footer lines. */

table.head {	width: 100%;
		border-bottom: 1px dotted #808080;
		margin-bottom: 1em;
		font-size: smaller; }
td.head-vol {	text-align: center; }
td.head-rtitle {
		text-align: right; }

table.foot {	width: 100%;
		border-top: 1px dotted #808080;
		margin-top: 1em;
		font-size: smaller; }
td.foot-os {	text-align: right; }

/* Sections and paragraphs. */

.manual-text {
		margin-left: 3.8em; }
.Nd { }
section.Sh { }
h1.Sh {		margin-top: 1.2em;
		margin-bottom: 0.6em;
		margin-left: -3.2em; }
section.Ss { }
h2.Ss {		margin-top: 1.2em;
		margin-bottom: 0.6em;
		margin-left: -1.2em;
		font-size: 105%; }
.Pp {		margin: 0.6em 0em; }
.Sx { }
.Xr { }

/* Displays and lists. */

.Bd { }
.Bd-indent {	margin-left: 3.8em; }

.Bl-bullet {	list-style-type: disc;
		padding-left: 1em; }
.Bl-bullet > li { }
.Bl-dash {	padding-left: 0em; }
.Bl-dash > li:before {
		content: "\2014  "; }
.Bl-item {	padding-left: 0em; }
.Bl-item > li { }
.Bl-compact > li {	margin-top: 0em; }

.Bl-enum {	padding-left: 2em; }
.Bl-enum > li { }
.Bl-compact > li {
		margin-top: 0em; }

.Bl-diag { }
.Bl-diag > dt {
		font-style: normal;
		font-weight: bold; }
.Bl-diag > dd {
		margin-left: 0em; }
.Bl-hang { }
.Bl-hang > dt { }
.Bl-hang > dd {
		margin-left: 5.5em; }
.Bl-inset { }
.Bl-inset > dt { }
.Bl-inset > dd {
		margin-left: 0em; }
.Bl-ohang { }
.Bl-ohang > dt { }
.Bl-ohang > dd {
		margin-left: 0em; }
.Bl-tag {	margin-top: 0.6em;
		margin-left: 5.5em; }
.Bl-tag > dt {
		float: left;
		margin-top: 0em;
		margin-left: -5.5em;
		padding-right: 0.5em;
		vertical-align: top; }
.Bl-tag > dd {
		clear: right;
		column-count: 1;  /* Force block formatting context. */
		width: 100%;
		margin-top: 0em;
		margin-left: 0em;
		margin-bottom: 0.6em;
		vertical-align: top; }
.Bl-compact {	margin-top: 0em; }
.Bl-compact > dd {
		margin-bottom: 0em; }
.Bl-compact > dt {
		margin-top: 0em; }

.Bl-column { }
.Bl-column > tbody > tr { }
.Bl-column > tbody > tr > td {
		margin-top: 1em; }
.Bl-compact > tbody > tr > td {
		margin-top: 0em; }

.Rs {		font-style: normal;
		font-weight: normal; }
.RsA { }
.RsB {		font-style: italic;
		font-weight: normal; }
.RsC { }
.RsD { }
.RsI {		font-style: italic;
		font-weight: normal; }
.RsJ {		font-style: italic;
		font-weight: normal; }
.RsN { }
.RsO { }
.RsP { }
.RsQ { }
.RsR { }
.RsT {		text-decoration: underline; }
.RsU { }
.RsV { }

.eqn { }
.tbl td {	vertical-align: middle; }

.HP {		margin-left: 3.8em;
		text-indent: -3.8em; }

/* Semantic markup for command line utilities. */

table.Nm { }
code.Nm {	font-style: normal;
		font-weight: bold;
		font-family: inherit; }
.Fl {		font-style: normal;
		font-weight: bold;
		font-family: inherit; }
.Cm {		font-style: normal;
		font-weight: bold;
		font-family: inherit; }
.Ar {		font-style: italic;
		font-weight: normal; }
.Op {		display: inline; }
.Ic {		font-style: normal;
		font-weight: bold;
		font-family: inherit; }
.Ev {		font-style: normal;
		font-weight: normal;
		font-family: monospace; }
.Pa {		font-style: italic;
		font-weight: normal; }

/* Semantic markup for function libraries. */

.Lb { }
code.In {	font-style: normal;
		font-weight: bold;
		font-family: inherit; }
a.In { }
.Fd {		font-style: normal;
		font-weight: bold;
		font-family: inherit; }
.Ft {		font-style: italic;
		font-weight: normal; }
.Fn {		font-style: normal;
		font-weight: bold;
		font-family: inherit; }
.Fa {		font-style: italic;
		font-weight: normal; }
.Vt {		font-style: italic;
		font-weight: normal; }
.Va {		font-style: italic;
		font-weight: normal; }
.Dv {		font-style: normal;
		font-weight: normal;
		font-family: monospace; }
.Er {		font-style: normal;
		font-weight: normal;
		font-family: monospace; }

/* Various semantic markup. */

.An { }
.Lk { }
.Mt { }
.Cd {		font-style: normal;
		font-weight: bold;
		font-family: inherit; }
.Ad {		font-style: italic;
		font-weight: normal; }
.Ms {		font-style: normal;
		font-weight: bold; }
.St { }
.Ux { }

/* Physical markup. */

.Bf {		display: inline; }
.No {		font-style: normal;
		font-weight: normal; }
.Em {		font-style: italic;
		font-weight: normal; }
.Sy {		font-style: normal;
		font-weight: bold; }
.Li {		font-style: normal;
		font-weight: normal;
		font-family: monospace; }

/* Overrides to avoid excessive margins on small devices. */

@media (max-width: 37.5em) {
.manual-text {
		margin-left: 0.5em; }
h1.Sh, h2.Ss {	margin-left: 0em; }
.Bd-indent {	margin-left: 2em; }
.Bl-hang > dd {
		margin-left: 2em; }
.Bl-tag {	margin-left: 2em; }
.Bl-tag > dt {
		margin-left: -2em; }
.HP {		margin-left: 2em;
		text-indent: -2em; }
}