* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--dark: #111111;
	--light: #ffffff;

	/* Theme mapping defaults to dark */
	--theme-bg: var(--dark);
	--theme-fg: var(--light);
	--link: #0ff;
	--link-border: rgba(0, 255, 255, 0.3);
	--link-bg: rgba(0, 255, 255, 0.05);

	/* Text Colors */
	--text-main: #dddddd;
	--text-muted: #888888;
	--text-lighter: #bbbbbb;

	/* Borders and Backgrounds */
	--border-light: rgba(255, 255, 255, 0.1);
	--border-lighter: rgba(255, 255, 255, 0.2);
	--bg-light: rgba(255, 255, 255, 0.05);

	/* Code Blocks */
	--dark-code: #0a0a0a;
}

/* Light Mode Overrides ("Silver Screen") */
[data-theme="light"] {
	--theme-bg: #f0f0f0;
	--theme-fg: #000000;
	--link: #0055cc;
	--link-border: rgba(0, 85, 204, 0.3);
	--link-bg: rgba(0, 85, 204, 0.05);

	--text-main: #333333;
	--text-muted: #555555;
	--text-lighter: #777777;

	--border-light: rgba(0, 0, 0, 0.1);
	--border-lighter: rgba(0, 0, 0, 0.2);
	--bg-light: rgba(0, 0, 0, 0.05);

	--dark-code: #e0e0e0;
}

/* System preference defaults (fallback if no local storage is set) */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--theme-bg: #f0f0f0;
		--theme-fg: #000000;
		--link: #0055cc;
		--link-border: rgba(0, 85, 204, 0.3);
		--link-bg: rgba(0, 85, 204, 0.05);

		--text-main: #333333;
		--text-muted: #555555;
		--text-lighter: #777777;

		--border-light: rgba(0, 0, 0, 0.1);
		--border-lighter: rgba(0, 0, 0, 0.2);
		--bg-light: rgba(0, 0, 0, 0.05);

		--dark-code: #e0e0e0;
	}
}

::selection {
	color: var(--theme-bg);
	background-color: var(--theme-fg);
}

::-moz-selection {
	color: var(--theme-bg);
	background-color: var(--theme-fg);
}

::-ms-selection {
	color: var(--theme-bg);
	background-color: var(--theme-fg);
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	font-family: monospace;
	margin: 0;
	padding: 0;
	background-color: var(--theme-bg);
	color: var(--theme-fg);
	position: relative;
	cursor: none;
}

h1,
h2,
h3 {
	text-transform: uppercase;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.17em;
}

h1,
h2,
h3 {
	margin-top: 0;
	margin-bottom: 0.5em;
	font-weight: 500;
}

h3 {
	margin-bottom: 1em;
}

p {
	margin-top: 0;
	margin-bottom: 1rem;
}

p:first-child {
	margin-top: 0;
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--link);
	text-decoration: none;
}

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

section {
	margin: 5rem 0;
}

.main-container {
	max-width: 1024px;
	text-align: center;
	margin: 0 auto;
	padding: 0 clamp(1rem, 4vw, 3rem);
}

.screen {
	height: 100dvh;
	height: 100vh;
	display: grid;
	place-content: center;
}

.project {
	margin-bottom: 2rem;
}

.quote {
	font-style: italic;
}

#lets-connect {
	position: relative;
}

footer {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translate(-50%, 0);
	font-size: 0.625rem;
}

.n-cursor-one,
.n-cursor-two,
.n-crosshair-v,
.n-crosshair-h {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	pointer-events: none;
}

.n-cursor-one,
.n-cursor-two {
	transform: translate(-50%, -50%) rotate(45deg);
}

.n-cursor-one {
	width: 5px;
	height: 5px;
	background-color: var(--theme-fg);
	transition:
		width 0.3s,
		height 0.3s,
		opacity 0.3s;
}

.n-cursor-two {
	width: 25px;
	height: 25px;
	border: 1px solid var(--theme-fg);
	opacity: 0.5;
	transition: all 200ms ease-out;
}

.n-crosshair-v,
.n-crosshair-h {
	opacity: 0.2;
}

.n-crosshair-v {
	height: 100vh;
	border-left: 1px dashed var(--theme-fg);
}

.n-crosshair-h {
	width: 100vw;
	border-top: 1px dashed var(--theme-fg);
}

.n-cursor-down {
	width: 16px;
	height: 16px;
	opacity: 0.3;
}

/* Layout Components */

.back-navigation {
	text-align: left;
	margin-top: 2rem;
}

.site-footer {
	margin-top: 5rem;
	text-align: center;
}

#theme-toggle {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
	background: none;
	border: none;
	color: var(--theme-fg);
	cursor: none;
	font-family: monospace;
	font-size: 1.1rem;
	z-index: 100;
	padding: 0.5rem;
	transition: opacity 0.2s ease;
	user-select: none;
}

#theme-toggle:hover {
	opacity: 0.7;
}