:root {
	--radius: 18px;
	--font-family: 'Courier Prime', 'Courier New', Courier, monospace;
	--font-size: 1.2rem;
}

body {
	font-family: var(--font-family);
	line-height: 1.5;
	color: var(--colour-text);
	background: var(--colour-bg);
	padding: 1rem;
	max-width: 80vw;
	margin: 0 auto;
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-sizing: border-box;
}

header {
	text-align: center;
	margin: 2rem 0;
	background: var(--colour-surface);
	border: 3px solid var(--colour-border);
	border-radius: var(--radius);
	padding: 1.5rem 1rem;
	box-shadow: 4px 4px 0 var(--colour-brick);
}

header h1 {
	color: var(--colour-terracotta);
	margin: 0;
}

header p {
	color: var(--colour-muted);
}

.layout {
	display: grid;
	grid-template-columns: 2fr 8fr;
	flex: 1;
	min-height: 0;
}

.sidebar {
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0.5rem;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

.sidebar.is-scrolling {
	scrollbar-color: var(--colour-muted) transparent;
}

.content {
	overflow-y: auto;
	padding: 1rem 2rem;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
}

.content.is-scrolling {
	scrollbar-color: var(--colour-muted) transparent;
}

.sidebar::-webkit-scrollbar,
.content::-webkit-scrollbar {
	width: 6px;
}

.sidebar::-webkit-scrollbar-track,
.content::-webkit-scrollbar-track {
	background: transparent;
}

.sidebar::-webkit-scrollbar-button,
.content::-webkit-scrollbar-button {
	height: 0;
	width: 0;
	background: transparent;
}

.sidebar::-webkit-scrollbar-thumb,
.content::-webkit-scrollbar-thumb {
	background: transparent;
	border-radius: 9999px;
	transition: background 0.3s;
}

.sidebar.is-scrolling::-webkit-scrollbar-thumb,
.content.is-scrolling::-webkit-scrollbar-thumb {
	background: var(--colour-muted);
}

.sidebar button {
	display: block;
	width: 100%;
	text-align: left;
	font-family: var(--font-family);
	font-weight: 700;
	padding: 0.6rem 1rem;
	margin-bottom: 0.4rem;
	border: none;
	border-radius: 8px;
	box-shadow: 3px 3px 0 var(--colour-brick);
	color: var(--colour-surface);
	cursor: pointer;
}

.sidebar button:hover {
	filter: brightness(0.9);
}

.sidebar button.active {
	box-shadow: 1px 1px 0 var(--colour-brick);
	transform: translate(2px, 2px);
	background-image:
		repeating-linear-gradient(
			90deg,
			var(--colour-surface) 0,
			var(--colour-surface) 8px,
			transparent 8px,
			transparent 16px
		),
		repeating-linear-gradient(
			180deg,
			var(--colour-surface) 0,
			var(--colour-surface) 8px,
			transparent 8px,
			transparent 16px
		),
		repeating-linear-gradient(
			90deg,
			var(--colour-surface) 0,
			var(--colour-surface) 8px,
			transparent 8px,
			transparent 16px
		),
		repeating-linear-gradient(
			180deg,
			var(--colour-surface) 0,
			var(--colour-surface) 8px,
			transparent 8px,
			transparent 16px
		);
	background-size:
		16px 3px,
		3px 16px,
		16px 3px,
		3px 16px;
	background-position:
		0 0,
		100% 0,
		0 100%,
		0 0;
	background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
	animation: marching-ants 1.6s linear infinite;
}

@keyframes marching-ants {
	to {
		background-position:
			16px 0,
			100% 16px,
			-16px 100%,
			0 -16px;
	}
}

.sidebar button:active {
	box-shadow: none;
	transform: translate(3px, 3px);
}

[data-target='about'] {
	background: var(--colour-terracotta);
}
[data-target='contact'] {
	background: var(--colour-mustard);
}
[data-target='tech-profile'] {
	background: var(--colour-green);
}

.nav-label {
	background: var(--colour-blue);
}
[data-target='battleship'] {
	background: var(--colour-purple);
}
[data-target='route-calculator'] {
	background: var(--colour-terracotta);
}
[data-target='snake'] {
	background: var(--colour-mustard);
}
[data-target='older-projects'] {
	background: var(--colour-green);
}

.sub-nav button {
	padding-left: 1rem;
	font-weight: 400;
	font-size: 0.9rem;
	width: calc(100% - 2rem);
	margin-left: 2rem;
}

ul {
	margin: 0.5rem 0 0 1rem;
	color: var(--colour-muted);
}

#tech-list {
	color: var(--colour-text);
}

figure {
	text-align: center;
	align-items: center;
	padding: 0.75rem;
}

img {
	max-width: 49%;
	height: auto;
	display: inline;
	border-radius: var(--radius);
	vertical-align: top;
	margin: 0 0 0.5rem 0;
}

a {
	color: var(--colour-blue);
	font-weight: bold;
	text-decoration: underline;
}

a:hover {
	color: var(--colour-orange);
}

a:visited {
	color: var(--colour-brick);
}

a:active {
	color: var(--colour-orange);
}